폴더 구조

개요

기본적인 폴더의 구조와 파일의 용도를 알아보고자 한다.

루트

1. package.json

종속성(dependencies)과 프로젝트에 필요한 스크립트를 포함하고 있다.
어플리케이션을 실행하기 위한 scripts도 기본적으로 제공한다.

2. package-lock.json

종속성의 일관된 설치를 보장한다.

node_modules

모든 종속성이 설치된 폴더
npm install, yarn install 등으로 설치된다.

Public

공용 폴더

1. index.html

...
<div id="root"></div>
...

root 부분이 궁극적으로 UI를 담당하게 될 위치이다.

src

소스 폴더, 개발하면서 가장 많이 저장하게 될 폴더이다.

1. index.js

루트 컴포넌트로, Public의 root(public/index.html)를 지정하여 React DOM을 App.js을 랜더링 시킨다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. App.js

가장 기본적으로 사용되는 React 컴포넌트 뷰이다.