Create React App 의 기본 구조

Create React App 로 생성한 프로젝트의 기본 구조를 살펴보겠습니다.

app/
    node_modules/
    public/
        favicon.ico
        index.html
        manifest.json
        robots.txt
    src/
        index.js
        App.js
    .gitignore
    package.json
    README.md
    yarn.lock

node_modules/

외부 모듈을 설치하면 이 node_modules 폴더에 다운로드 됩니다. 설치된 외부 모듈을 import 하면 (특정 경로를 명시하지 않았을 때) Node.js (Chrome V8 자바스크립트 엔진으로 빌드된 JavaScript 런타임) 는 node_modules 에서 해당 모듈을 찾습니다.

각 모듈의 저장소에 이미 모듈 코드가 존재하므로 굳이 저장소에 중복으로 올려놓을 필요가 없고 용량도 많이 차지하므로 .gitignore 처리합니다.

public/

index.html 과 index.html 에서 사용될 '정적 파일'들이 위치합니다.

public/ 에 src/ 에서 사용될 파일을 두고 src/ 에서 process.env.PUBLIC_URL 등으로 접근하여 사용할 수 도 있지만, src/ 에서 사용되는 public/ 내 파일들은 post-processed 나 minified 되지 않는 점, 유실된 파일이 있을 경우 컴파일 시점에 호출되지 않고 프로덕션에서 404 에러를 유발하는 점 등의 단점이 있으므로 공식문서 (Create React App: Using the Public Folder) 에서 권장하는대로 js 파일에서 에셋을 import 하는 방식을 사용하도록 합니다.

index.html

서버에서 읽고, 브라우저가 표출하는 파일입니다.

기타 다른 파일들은 삭제하거나 이름을 바꾸어도 상관없지만 public/index.html 과 src/index.js 는 해당 이름으로만 사용하여야 합니다. (변경을 못하는 건 아니지만 서버 설정 변경이 필요합니다. 굳이 바꿀 필요는 전혀 없습니다.)

public 폴더 내의 파일들은 public/index.html 에서만 사용될 수 있습니다.

manifest.json

웹앱 메타데이터입니다. 홈 화면에서 보여지는 앱 이름, 아이콘, 디스플레이 유형 등등을 설정할 수 있습니다.

메타데이터란 다른 데이터를 설명해 주는 구조화된 데이터입니다. 예를들어 디지털 카메라에서는 사진을 찍어 기록할 때마다 카메라 자체의 정보와 촬영 당시의 시간, 노출, 플래시 사용 여부, 해상도, 사진 크기 등의 사진 정보를 화상 데이터와 같이 저장하게 되어 있습니다. 이러한 데이터를 분석하여 이용하면 그 뒤에 사진을 적절하게 정리하거나 다시 가공할 때에 아주 유용하게 쓸 수 있는 정보가 됩니다. https://ko.wikipedia.org/wiki/메타데이터

robots.txt

웹 크롤러를 위한 정보입니다. 크롤러에게 색인화할 수 있는 페이지와 허용되지 않는 페이지를 알려줍니다. Disallow 옵션에 특정 URL 을 추가하면 공개적으로 사용할 수 있지만 검색 엔진에 의해 인덱싱되지는 않습니다.

favicon.ico

favorites + icon 의 합성어입니다. 브라우저의 주소창에 표시되는 웹 페이지 대표 아이콘입니다.

src/

더 빠른 재빌드를 위해 src/ 내부에 위치한 파일들만 webpack 에 의해 processed 됩니다. src/ 파일 외부에 위치하는 JS, CSS 파일은 webpack 이 찾을 수 없으므로 src/ 내부에 둡니다.

index.js

기타 다른 파일들은 삭제하거나 이름을 바꾸어도 상관없지만 public/index.html 과 src/index.js 는 해당 이름으로만 사용하여야 합니다.

ReactDOM.render(
    <App />, 
    document.getElementById("root")
);

ReactDom이 App 컴포넌트를 document 내 id 값이 root 인 태그 안에 랜더링합니다.

App.js

root 가 되는 리액트 컴포넌트입니다.

package.json

프로젝트 메타데이터입니다. 프로젝트의 종속성을 처리하고 패키지매니저가 프로젝트를 식별할 수 있는 정보와 프로젝트 설명, 버전, 라이센스 정보 등 기타 메타데이터를 제공합니다.

yarn.lock / package-lock.json

https://classic.yarnpkg.com/en/docs/yarn-lock/

협업 개발자 간 서로 같은 버전의 패키지를 설치할 수 있게 하는 패키지 잠금 파일입니다. 프로젝트에 패키지가 최초로 추가될 당시 정확히 어떤 버전이 설치되었는지를 기록합니다.

• 프로젝트 초기 설정 시 해당 파일을 저장소에 올려서 다른 개발자들이 이 잠금 파일을 기준으로 패키지를 설치할 수 있도록 합니다.
• 패키지 잠금 파일은 패키지 매니저가 새로운 패키지 설치 및 기존 패키지 업데이트 또는 삭제 시 package.json 과 자동으로 동기를 맞춰주므로 직접 수정할 필요가 없으며 절대 수정하지 않도록 합니다..!
• 새 패키지 설치 및 기존 패키지 업데이트, 삭제 시 반드시 package.json 과 패키지 잠금 파일을 함께 커밋합니다.