프론트앤드 개발자가 Github에 프론트앤드 소스를 공유한 파일을 분석하는 과정에 대해서 살펴보겠습니다. 먼저, 프론트엔드 소스 파일을 다운로드 받습니다.
파일을 다운받았으면 구조를 봅니다.
가장 먼저
css, data, imgs, js 폴더가 보입니다. 폴더들 안에는 각각 CSS 파일, data 파일, 이미지 파일, 자바스크립트 파일들이 모여 있습니다.
HTML 파일은 폴더 없이 있는 것을 볼 수 있습니다.
index.html 을 열어서 HTML, CSS, JS가 각각 어떻게 작동하는지 살펴봅시다.
제일 먼저 버튼과 같이 사용자가 상호작용할 수 있는 부분을 살펴봅니다.
버튼을 눌러보면서 어떤 html로 연결이 되는지, 어떤 기능을 가진 버튼인지 대략적으로 확인할 수 있습니다.
그리고 header와 footer 내용을 담는 container, side bar, menu bar 등의 존재를 확인합니다.
Django에서 template을 설정할 때 다양한 영역을 나누어서 설정하기 때문에 미리 페이지 화면 구성을 알면 좋습니다.
또한 화면 스크롤에 따라서 나타나거나 구성이 변하는 요소가 있는지 확인합니다.
페이지 화면 사이즈가 줄어들자 검색창이 사라지고 숨어있던 박스가 보이는 것을 볼 수 있습니다.
이러한 HTML, CSS, JS가 작동하는 것을 구체적으로 확인하기 위해서는 개발자 도구를 사용할 수 있습니다. 크롬 브라우저일 경우에 단축키 Ctrl + Shift + I 또는 F12 를 통해서 개발자 도구 창을 열 수 있습니다. 또한 페이지에서 자신이 파악하고자 하는 HTML 영역을 마우스 오른쪽 클릭한 후 검사(N) 버튼을 선택하면 개발자 도구 창을 열 수 있습니다.
개발자 도구 창 Elements 항목에서는 HTML 구조를 볼 수 있습니다.
특정 HTML 요소를 클릭하거나 마우스로 가리키면 해당하는 영역이 표시가 됩니다. 이를 이용해서 HTML, CSS를 간단하게 파악할 수 있습니다.
개발자 도구 창 Console 항목에서는 개발하는 데 참고할 수 있는 정보가 표시되고, 프론트앤드 개발자가 설정한 메세지가 출력되기도 합니다.
이렇게 파일들을 살펴보았습니다. 이러한 프론트앤드 파일들이 Django에서 문제없이 잘 작동할 수 있도록 하는 것이 중요합니다.