React 설치 및 실행 / 프로젝트 구조 정리

Node.js 설치

• Node.js 설치

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

원하는 Node.js 버전을 선택하여 설치한다.

• 설치 확인

node -v
npm -v

---

React Project 생성

• 프로젝트 생성

npx create-react-app [프로젝트명]

• 생성한 react app을 실행

cd [프로젝트명]
npm start

 

 

Can’t resolve ‘web-vitals’ Error 조치방법

 

web-vitals 설치 후 재실행

npm i web-vitals --save-dev

---

VS Code로 React Project실행

• VS Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

• React Proejct Open
  

  

• TERMINAL창으로 프로젝트 실행
  

  

  • Default 실행화면
    

    

  • App.js 수정 후 실행화면
    

    

    App.js 수정 후 로컬에서 실행되는 것을 최종적으로 확인하였다.

---

React Proejct 구조

 

• node_modules/
  프로젝트에서 사용되는 모든 의존성 패키지가 저장되는 디렉터리
  자동으로 생성되며, 이 디렉터리를 직접 수정하지 않음
• public/
  웹 애플리케이션에서 정적 파일을 저장하는 폴더
   (HTML 파일, 이미지, 아이콘 등 클라이언트에 전달될 파일들이 포함)
• src/
  React 컴포넌트와 애플리케이션의 자바스크립트 파일들이 위치하는 디렉터리
  - index.js : React 애플리케이션의 진입점 파일로, React DOM을 HTML에 렌더링
  - App.js : 애플리케이션의 주요 컴포넌트다. 다른 컴포넌트들을 이곳에서 불러오거나 라우팅 설정을 할 수 있음
• package.json
  프로젝트 메타데이터를 정의하고, 프로젝트에서 사용하는 의존성, 스크립트 명령어 등을 관리하는 파일이다.
• package-lock.json
  프로젝트에서 사용된 의존성 트리를 고정하는 파일로, 정확한 버전의 의존성 설치를 보장한다.

파일 첫 글자 대/소문자 정리

컴포넌트 파일

• 컴포넌트 파일은 보통 첫 글자를 대문자로 함
• 컴포넌트가 클래스나 함수형 컴포넌트를 정의하기 때문

유틸리티 및 헬퍼 파일

• 유틸리티 함수나 헬퍼 함수가 포함된 파일은 보통 첫 글자를 소문자로 함
• 이러한 파일들이 특정 기능을 수행하는 함수들을 포함하기 때문

상수 파일

• 상수를 정의하는 파일도 보통 첫 글자를 소문자로

---

package.json / package-lock.json (상세 정리)

package.json

package.json 소스

{
  "name": "frontend-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^1.7.9",
    "cra-template": "1.2.0",
    "http-proxy-middleware": "^3.0.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.1",
    "react-scripts": "5.0.1"
  },
  
  ...
}

• package.json 파일은 Node.js 프로젝트에서 사용되는 파일로, 일반적으로 이 안에는 프로젝트의 이름, 버전, 설명, 작성자, 라이센스, 프로젝트 실행에 필요한 서드파티 패키지인 의존성 목록이 포함된다.

의존성은 모듈과 모듈 간의 관계를 나타내며 의존성을 관리하는 것은 유지보수나 확장성에 영향을 미치므로 소프트웨어 개발에서 매우 중요하다.

• Node.js 프로젝트에서 터미널에 'npm install'라고 입력하면 package.json 파일에 나열된 의존성이 자동으로 설치되므로 프로젝트의 의존성을 쉽게 관리할 수 있고, 필요한 패키지의 동일한 버전을 사용하는 모든 사용자를 보장할 수 있다.
• package.json 파일의 의존성 선언에는 version range가 사용된다. version range란 특정 버전이 아니라 버전의 범위를 의미한다
  • version range
    
    

    표기법	Description
    version	명시된 version과 일치
    >version	명시된 version보다 높은 버전
    >=version	명시된 version과 같거나 높은 버전
    <version	명시된 version보다 낮은 버전
    <=version	명시된 version과 같거나 낮은 버전
    ~version	명시된 version과 근사한(?) 버전. 패치 버전 범위 내에서 업데이트한다.  ex) ~0.0.1: 0.0.1 ≤ version < 0.1.0ex) ~0.1.1: 0.1.1 ≤ version < 0.2.0
    ^version	명시된 version과 호환되는 버전. 마이너 버전 범위 내에서 업데이트한다. ex) ^1.0.2: 1.0.2 ≤ version < 2.0

package-lock.json

package-lock.json 소스

{
  "name": "frontend-react",
  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "frontend-react",
      "version": "0.1.0",
      "dependencies": {
        "axios": "^1.7.9",
        "cra-template": "1.2.0",
        "http-proxy-middleware": "^3.0.3",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-router-dom": "^7.1.1",
        "react-scripts": "5.0.1"
      },
      
      ...
      
    "node_modules/react-router-dom": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz",
      "integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==",
      "license": "MIT",
      "dependencies": {
        "react-router": "7.1.1"
      },
      "engines": {
        "node": ">=20.0.0"
      },
      "peerDependencies": {
        "react": ">=18",
        "react-dom": ">=18"
      }
    },
    
    ...
    
  }
}

• package-lock.json파일은 의존성 트리에 대한 구체적 정보를 가지고 있으며,  package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있다.

---

package-lock.json 파일이 필요한 이유

• 의존성 고정
  프로젝트에서 사용하는 패키지와 그 버전을 정확히 고정한다. 이를 통해 다른 개발자가 프로젝트를 설치할 때 동일한 패키지 버전을 사용하게 된다.
• 속도 향상
  'npm install' 명령을 실행할 때 package-lock.json 파일에 이미 정의된 버전을 사용하므로, 패키지를 다시 확인하지 않고 바로 설치할 수 있다.

즉, package.json의 버전 범위에 따라 버전이 바뀌더라도, package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있도록 한다.

 

예시

 

1) Developer1이 react-router-dom을 설치함

# package.json
"react-router-dom": "^7.1.1"

# package-lock.json
"node_modules/react-router-dom": {
  "version": "7.1.1",
  "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz",
  "integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==",
  "license": "MIT",
  "dependencies": {
    "react-router": "7.1.1"
  },
  "engines": {
    "node": ">=20.0.0"
  },
  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18"
  }
},

 

2) 6개월 후 8.1.0의 새로운 버전이 나왔더라도 Developer2가  npm install을 실행하면 package-lock.json 파일에 명시된 버전의 의존성을 설치한다.

따라서, 프로젝트의 패키지 의존성이 유지된다.

 

---

프로젝트 의존성 트리 확인

npm ls

frontend-react@0.1.0 D:\xxxxx\xxxxx\frontend-react
├── axios@1.7.9
├── cra-template@1.2.0
├── http-proxy-middleware@3.0.3
├── react-dom@19.0.0
├── react-router-dom@7.1.1
├── react-scripts@5.0.1
├── react@19.0.0
└── web-vitals@4.2.4

---

마무리

React 프로젝트 설치를 완료하였다.

이제 BackEnd 서버와 React 서버 간에 API통신을 연결하도록 하겠다. 별도 설정을 하지 않는다면 CORS 오류가 발생할 것이다.

 

이전글

• React 기본 개념 정리

다음글

• React CORS 설정 - 프록시 (http-proxy-middleware)
• React Hook 기본 정리 / Custom Hook
• React-Router-Dom 정리
• React axios 모듈화
• React Modal 구현하기 (Alter, Loading)
• React 로그인 구현 (JWT)