[React] React 프로젝트 시작하기 with create-react-app | 기본 구조
CRA를 이용하여 프로젝트 생성하기
1. 먼저 프로젝트를 생성할 디렉터리에서 다음 명령어를 실행한다.
npm init react-app <프로젝트 이름>❓ npm이란?
패키지 관리 도구로 정식 명칭은 Node Pacackage Manager이다.
npm은 일종의 거대한 소프트웨어 등록소로, 프로그래머들이 만든 여러 유용한 모듈들을 보유하고 있다. (전세계 게임의 배급과 관리를 담당하는 플랫폼인 steam과 비슷한 개념이라고 생각하면 된다.) 이렇게 npm에 업로드되어 있는 노드 모듈을 패키지라고 하는데, 우리는 필요에 따라 이 패키지들을 다운로드하여 사용할 수 있다.
2. 설치가 완료되면 cmd(터미널)에 아래와 같은 메시지가 표시되며 디렉터리에는 프로젝트명의 폴더가 생성된다.
3. 메시지에서 제안하는 바와 같이 생성된 프로젝트로 이동하여 npm start를 실행한다. 그러면 다음과 같은 초기 화면이 나타난다.
📁 CRA 디렉터리 구조
create-react-app을 통해 만들어진 폴더는 node_modules, public, src, .gitignore, package-lock.json, package.json, README.md, 그리고 숨겨져 있어서 당장은 보이지 않는 폴더인 .git으로 이루어져 있다.
node_modules
npm을 이용하여 설치한 모듈들이 저장되는 곳이다.
어떤 모듈들이 설치되었는지는 package.json의 dependencies에서 확인할 수 있다.
package.json
이 프로젝트에서 사용된 모듈과 모듈의 버전을 명시하는 파일이다.
node_modules 폴더는 크기가 상당하기 때문에 github과 같은 저장소에 프로젝트를 저장할 때 제외된다. 이렇게 해도 되는 건, package.json 파일에 내가 사용한 모듈들에 대한 정보가 있어 npm install 시 이 모듈들이 자동으로 설치되기 때문이다.
package-lock.json
좀 더 명확한 버전을 표시하기 위한 파일이다.
package.json에 명시된 모듈의 버전이 범위로 표기되어 있다면, 이 파일에 표기된 버전은 좀 더 명확하게 명시되어 있다.
public
HTML, img 등 정적 파일을 담는 디렉터리이다.
.git
commit 등 git 활동 기록이 저장되는 곳이다.
별도로 설치하지 않아도 commit이 가능한 것은 CRA 앱이 git 파일을 기본적으로 제공하기 때문이다. 숨김 파일이기에 숨김 파일 보기를 설정하기 전까지는 눈으로 확인할 수 없다.
src
우리가 작업하는 대부분의 코드는 이 디렉터리 내부에 위치하게 된다.
아래에서 좀 더 자세히 살펴보겠다.
src 디렉터리
App.js
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<p>안뇽, 일단 테스트 한번 해볼게 이거 재밌네</p>
</header>
</div>
);
}
export default App;
이 프로젝트의 메인이 되는 최상위 컴포넌트이다.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();- ReactDOM.render
컴포넌트를 페이지에 렌더링하는 함수이다.
첫 번째 인자로 페이지에 렌더링할 내용(JSX 형태)을, 두 번째 인자로 그 내용을 렌더링할 document 요소를 받는다. 이 코드에서 선택된 root 요소는 public/index.html 파일에서 확인할 수 있다. - React.StrictMode
추후 사라지게 될 오래된 기능을 사용했을 때 경고를 출력하는 역할을 한다.
setupTests.js
추후 테스트 코드를 작성할 때 enzyme 및 어댑터 적용 시 이곳을 활용한다.
참조