root
|- dist
|- public
|- src
|- assets
|- img
|- page1
|- img1-1.png
|- img1-2.png
|- img1-3.png
|- page2
|- img2-1.jpg
|- img2-2.svg
|- font
|- font1.ttf
|- font2.woff
|- css
|- page1.css
|- page2.css
|- fragments
|- common
|- headerTag.js
|- footerTag.js
|- shareContents.js
|- js
|- page1.js
|- page2.js
|- pages
|- page1.html
|- page2.html
|- .babelrc
|- .gitignore
|- .prettierrc
|- package-lock.json
|- package.json
|- README.md
|- webpack.config.js
|- yarn.lock
- 프로젝트 폴더를 의미한다. 최상단 폴더라고 보면 된다.
- 개발한 코드의 결과물이 생성되는 파일이다.
dist는distribution이란 단어를 의미하는데, 나누어준다는 의미를 가지고 있다. 컴퓨터에서 나눈다는 것은 복사를 통해서 다른 사람이 파일을 이용할 수 있게 한다는 의미이다. 웹에서는 서버의 html, css, js 파일을 만들어서 이를 브라우저가 다운로드 하여 실행한다. 곧 서버에서 파일을 나눠 받는다는 의미를 가지고 있다. 이런 의미에서distribution를 의미하는dist란 폴더명을 사용한다.public이란 폴더명을 가질 때도 있는데public이란 폴더는 웹페이지를 제공하는 폴더에 붙인다. 도메인 또는 아이피로 접근을 하게 되면 서버는 어떤 폴더를 제공한다. 폴더에 접근할 수 있으면 파일에도 접근을 할 수 있는데, 브라우저는 파일을 접근하여 다운로드한다. 이 때, 파일이 HTML 파일이면 파일 내의 코드를 읽어서 웹 페이지에 표시한다. 이 때 외부 컴퓨터에서 서버의 컴퓨터의 폴더에 접근할 수 있도록 공개한 폴더가public폴더이다.build라는 폴더명으로 사용될 때도 있다. 소프트웨어에서 어떤 도구에 의해 변환된 결과물을 빌드되었다고 말한다. 웹팩에 의해 변환된 파일이 위치하므로 빌드된 파일이 위치하는 곳이다. 이런 의미에서build라는 이름으로도 사용된다.
- 개발자가 코드를 개발하는 폴더이다. 최종적으로 빌드된 파일 또는 배포되는 파일을 만들기 위한 원본 소스가 위치하는 곳이다.
- src 폴더는 하위 폴더로 assets, fragments, js, pages 폴더가 위치한다.
- 학습을 위한 예제 코드이므로 src 폴더 대신에 src_study로 만들어 두었다. 실제로 프로젝트를 진행하는 경우는 src로 폴더 이름을 지어주도록 하자.
- 정적 파일이 위치하는 폴더이다. 정적 파일이란 빌드 또는 배포되는 파일로 변경이 되더라도 내용물이 그대로 유지되는 것을 의미한다.
- 전통적인 웹 서버에서 html, css, js는 소스에 따른 결과물이 생성되는 파일이 아니므로 정적 파일로 분류된다. 하지만 웹팩에서는 css, js도 웹팩에 의해서 빌드되는 파일이므로 정적파일로 분류하지 않는다. 웹팩은 기본적으로 자바스크립트만을 빌드한다. 웹팩이 자바스크립트만 빌드 할 때는 html, css는 빌드 대상이 아니므로 정적 파일로 분류가 되어
assets폴더 하위에 위치한다. 웹팩에 플러그인을 추가하여 css나 html도 빌드 대상으로 한다면 이들은 더 이상 정적 파일이 아닌 개발자가 작성한 소스 코드로 빌드되는 파일이 되므로assets폴더 하위에 위치하지 않도록 한다. - 웹팩에서 배포 전후가 같은 대상은 이미지, font 등의 파일에 해당하며 이들을
assets폴더 하위에 위치시킨다. 하지만 이미지 또는 font라도 웹팩에 의해 용량이 줄여질 수도 있다. 이 경우 정적인 파일이라고 하기 어려울 수도 있지만, 개발자의 직접 작성하는 소스코드가 아니기 때문에 정적 파일에 해당하는 분류로서assets폴더 하위에 위치시킨다.
- html 파일의 코드에서 여러 html 코드에서 공통적으로 사용하는 태그 코드를 별도의 파일로 분리한 부분이다.
- 순수한 html의 경우 외부로 파일을 분리할 수 없다. 웹팩을 사용하는 코드에서는 html 파일에 템플릿 엔진을 사용해서 공통적으로 사용하는 코드를 분리한다.
- 템플릿 엔진에서 일부분을 대신하여 별도의 파일로 만들고 이를 불러서 일부분을 사용할 수 있는 방식의 대상을 patial이라고 부른다.
fragments라는 폴더명은patials로 쓰는 경우도 있다. - 템플릿 엔진에서 partial을 불러올 때 불러오는 코드의 맥락에 관계 없이 partial을 불러올 때 partial에 전달하는 값이 같다면 결과를 예측할 수 있는 기대의 결과를 갖는 partial을 component라고 부른다.
- fragments의 하위 폴더에 전체 페이지에서 공통으로 사용하는 partial의 경우 common과 같은 공통적인 의미를 갖는 폴더를 만들어 fragment 파일을 배치하고, 일부 페이지에서만 공통적으로 사용하는 경우 대상 partial이 갖는 역할에 적합한 이름을 붙여 분류하도록 한다.
- 폴더를 페이지별로 만들지 않고 담당하는 역할에 따라 이름을 붙이고 그룹화하는데 이는 일반적으로 patial이 여러 페이지에서 가져와 사용할 수 있도록 만들어지기 때문에 페이지별로 이름을 붙이는 것이 적절하지 않기 때문이다.
- 각각의 웹 페이지에 대한 html 코드를 관리한다.
- 폴더 구조는 가능한 URL의 path에 따라 파일을 배치하는 것이 좋다. 해당 html 파일이 어떤 주소에서 랜더링될지를 쉽게 알 수 있기 때문에 html 파일과 페이지의 주소를 매칭하기 쉬워서 좀 더 관리하기 쉬운 코드가 되기 때문이다.