프론트앤드 개발자가 Github에 프론트앤드 소스를 공유한 파일을 분석하는 과정에 대해서 살펴보겠습니다. 먼저, 프론트엔드 소스 파일을 다운로드 받습니다.
파일을 다운받았으면 구조를 봅니다.
가장 먼저 css
, data
, imgs
, js
폴더가 보입니다. 폴더들 안에는 각각 CSS 파일, data 파일, 이미지 파일, 자바스크립트 파일들이 모여 있습니다.
HTML 파일은 폴더 없이 있는 것을 볼 수 있습니다.
index.html
을 열어서 HTML, CSS, JS가 각각 어떻게 작동하는지 살펴봅시다.
제일 먼저 버튼과 같이 사용자가 상호작용할 수 있는 부분을 살펴봅니다.