프로젝트 폴더 트리 설명

yarn create-react-app test를 하면 다음처럼 폴더 트리가 구성된다.

아래 사진은 VisualStudioCode에서 볼 수 있는 폴더 트리.

 

test
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

 

트리 구조를 간략하게 살펴보자.

 

.gitignore

여기에 명시된 폴더나 파일은 깃에 공유되지 않는다.

 

/build같은 거, 기본 설정 같은 거 추적해서 버전 별로 파일 관리할 필요가 없다. 프로젝트 실행했을 때 부수적으로 생기는 애들 여기에 들어가 있음. 실제로 깃에 공유하고 싶지 않은 내용을 여기에 담아둘 수 있다.

 

 

package.json

npm에서 내 프로젝트에서 외부적으로 쓰이고 있는 라이브러리와 버전을 관리하는 것.

직접 수정하지 않고, 명령어로 외부 라이브러리 추가하고 버전업 하게 될 것!

 

yarn create react-app으로 create-react-app설정하고 yarn start로 서버 실행했었는데

그에 대한 내용도 여기에 정의 되어 있음.

실제로는 react-scripts start를 실행한 것이다.

react scripts가 실행이 되면 (npm start, yarn start시 실행이 됨) 필요한 설정 (configuration)과 프로젝트 안에 우리가 볼 수 있는 package.json 내용 말고 안 보이게 설정되어 있는 내용이 있는데, 거기에 있는 내용을 실행하고 빌드해준다. eject로 풀어서 볼 수 있다.

README.md

우리 프로젝트를 설명합니다~

안에 내용 지우고 프로젝트 관련된 설명을 넣도록 해요^-^

yarn.lock

yarn을 사용할 때 쓰이는 파일

 

node_modules폴더

외부 라이브러리를 추가했을 때 여기에 들어간다.

package.json안에 설정되어 있는 라이브러리의 실제 파일이 여기 들어 있다고 생각하면 된다.

 

public폴더

우리가 사용자에게 배포할 때 외부적으로 보여지는 내용이 들어있다. favicon, logo와 기본적인 index.html 파일
사용자가 한번 받아서 콘텐츠가 변하지 않는 것을 담아주면 됨.

manifest.json

웹 어플리케이션에 필요한 건 아니고, PWA(Progressive Web App).. 웹 사이트가 모바일에서 앱처럼 동작하게 만들 때 사용된다. 우리가 원하는 웹 어플리케이션 만드는 데 쓰는 일은 없어서 나중에 필요하면 학습하면 된다.

https://developer.mozilla.org/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json

★src폴더!

화면에 보여지는 소스 코드가 들어간다. src 폴더에서 작업이 이루어지겠지?

index.js도 지금 웹 어플리케이션에 보여주는 애들이 들어간 거라 할 수 있다.

콘텐츠가 다이나믹하게 동적으로 변하는 것들이 src폴더에 들어간다.

 

Uploaded by Notion2Tistory v1.1.0

사용자가 한번 받아서 콘텐츠가 변하지 않는 애들

사용자가 한번 받아서 컨텐츠가 변하지 않는 애들