JavaScript/React

react create-react-app 프로젝트 생성 시 구조

Z_Z 2024. 1. 26. 13:52
반응형

react 프로젝트 생성을 위해 "npx create-react-app 프로젝트명" 명령어를 사용해 생성했다.

 

생성된 폴더 구조는 아래와 같다.

 

해당 구조를 알기 전에 NPM(Node Package Manager) 에 대해 알아야한다.

 

NPM(Node Package Manager)

npm 은 node.js 를 위한 패키지 관리 매니저이자 node.js 를 위한 오픈소스 생태계이다.

npm 은 node.js 에서 사용하는 모듈들을 패키지로 만들어 의존성, 필요한 라이브러리 등

관리해준다.

 

 

package.json

package.json 파일은 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다.

기본적으로 "npm init" 명령어를 통해 생성할 수 있다.

 

// package.json
{
  "name": "react_test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

 

name

패키지의 이름이며, 이름에는 규칙이 있다.

  • 소문자로 작성되어야 한다.
  • 한단어로 작성되어야 한다.
  • -(하이픈) 이나 _(언더스코어)를 포함할 수 있다.

 

version

패키지의 버전을 나타낸다.

 

private

private 필드는 해당 프로젝트가 npm 패키지 저장소로 발행해도 되는지 여부를 지정하기 위해 사용된다.

기본값은 false 이며 true일 경우 npm 패키지 저장소로 업로도 되는 사고가 발생할 수 있다.

 

description

패키지에 대한 설명이다. 사람들이 해당 프로젝트를 봤을 때 이해할 수 있도록 도움을 준다.

 

 

scripts

프로젝트에서 사용해야 하는 작업을 스크립트로 등록해놓기 위해서 사용된다.

"npm run 스크립트명" 으로 실행하며 주로 쓰이는 npm run start, npm un build 등이 정의된다.

 

 

dependencies && devDenpendencies

프로젝트에 필요한 모듈들과 정의된 모듈에 필요한 라이브러리들을 관리하기 위한 필드이다.

해당 프로젝트가 구동되기 위해선 어떤 라이브러리들이 필요한지 정의되어 있으며,

"npm install 라이브러리명 --save" 명령어를 통해 라이브러리를 다운받을 수 있다.

--save 를 통해 dependencies 에 저장할 수 있다.

 

dependencies 와 devDenpendencies 의 기본적 작성법은 같으며, 큰 차이점은

dev가 붙은것처럼 개발시에만 사용될 라이브러리만 저장하기 위해 사용된다.

운영 시 필요한 라이브러리들은 dependencies 에 저장하면 되고 

개발 시 필요한 라이브러리들은 devDependencies 에 저장한다.

 

devDependencies 의 사용방법은 "npm install 라이브러리명 --save-dev" 로 사용한다.

--save 와 --save-dev 의 차이다.

 

 

package-lock.json

package.json 의 dependencies나 devDependencies 에 명시된 의존성 패키지들의

히스토리를 관리해주는 파일이다.

 

보통 패키지의 버전은 [Major].[Minor].[Patch] 와 같은 방식으로 정의된다.

 

해당 패키지에 1.0.0 이라는 버전의 패키지가 설정되어 있더라도 Minor 와 Patch 는 언제든지

업데이트 될 수 있다.

package.json 의 dependencies 에 1.0.0 으로 설정되어 있더라도 1.1.0 이나 1.0.1 과 같은

업데이트된 버전이 설치될 가능성이 있다.

이러한 경우 여러 개발자들의 다른 개발환경에 예기치 못한 오류가 발생할 수 있다.

이때 필요한게 package-lock.json 파일이다. package.json 의 버전이 바뀌더라도

package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있게끔

보장하는것이다.

 

 

node_modules

해당 프로젝트에 필요한 라이브러리들을 설치하면 node_modules 에 다운로드 된다.

특정 경로를 지정하지 않고 외부 모듈을 import 하게 되면 node_modules 에서 찾는다.

 

 

public/

index.html 과 index.html 에서 사용될 "정적 파일"들이 위치하는 곳이다.

 

 

public/index.html

브라우저에 표출되는 파일이다.

public/index.html 파일은 index.html 이라는 이름을 사용해야 한다. 변경을 하려면 따로 서버 설정이 필요하다.

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

<html>
	...
  <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
  </body>
</html>

 

 

public/manifest.json

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

 

public/robots.txt

웹 크롤러를 위한 정보입니다.

disallow 옵션에 특정 URL 을 추가하면 공개적으로 사용할 수 있지만 검색 엔진에는 인덱싱되지 않는다.

 

 

src/

src/ 내부에 위치한 파일들은 webpack에 의해 재빌드된다. src/ 파일 외부에 위치하는 JS, CSS 파일들은

webpack 이 찾을 수 없으므로 빌드에 필요한 파일들은 src/ 내부에 위치시킨다.

 

src/index.js

public/index.html 파일과 같이 src/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>
);

reportWebVitals();

 


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

 

ES16 에서 새롭게 나온 import 키워드를 통해 외부 라이브러리 모듈을 불러온다.

 

 


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

 

우리가 개발하는 src/ 경로의 파일들을 index.js 의 ReactDOM 이 public/index.html 파일 내

id 가 root인 태그안에 랜더링 한다.

실제적으로 index.html 파일이 사용자에게 배포되고 보여지는 파일이다.

 

 

src/App.js

<App /> 태그를 통해 랜더링 시킨 Root 가 되는 React 컴포넌트이다.

import logo from './logo.svg';
import './App.css';

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>
      </header>
    </div>
  );
}

export default App;

 

export 키워드를 통해 App 이라는 함수를 외부로 내보내기했다.

 

반응형