공공연히 개발하기 🧑‍💻/JavaScript

[React] 리액트 프로젝트 환경 관리

공공연히 2025. 3. 14. 10:29

 

1. 리액트 프로젝트 환경은 개별적으로 관리됨

리액트 프로젝트는 create-react-app, Vite, Next.js 등 다양한 방법으로 생성할 수 있는데,
모든 방식에서 프로젝트마다 독립적인 환경을 가진다.

예를 들어, create-react-app을 사용하여 새 프로젝트를 생성하면:

npx create-react-app my-project

이렇게 하면 my-project 폴더 내부에 새로운 node_modules, package.json, package-lock.json이 생성되며,
기존 프로젝트와는 완전히 분리된다.

 

2. 프로젝트 생성 시 라이브러리 리셋 여부

  • 새 프로젝트를 만들면 기본적으로 제공되는 라이브러리 외에는 별도로 설치한 라이브러리는 포함되지 않음.
  • 예를 들어, 기존 프로젝트에서 axios, styled-components 등을 사용했다고 해도, 새로운 프로젝트에서는 다시 설치해야 함.
  • 새 프로젝트에서 package.json을 수동으로 설정하지 않는 한, 의존성이 자동으로 이전되지 않음.

 

3. 프로젝트마다 라이브러리와 환경이 다른 이유

  • node_modules는 각 프로젝트마다 독립적으로 관리됨.
  • package.json에 정의된 라이브러리는 해당 프로젝트에서만 사용 가능.
  • 버전 충돌 방지를 위해 프로젝트마다 환경이 분리됨.
  • 전역적으로 설치된 패키지는 프로젝트에서 직접 사용되지 않음.
    (예: npm install -g create-react-app은 글로벌 설치지만, react, react-dom 같은 패키지는 프로젝트 내부에서 관리됨)

 

4. 동일한 패키지 환경을 유지하려면?

만약 새 프로젝트에서도 동일한 라이브러리를 유지하고 싶다면:

1. 기존 프로젝트의 package.json 복사 후 설치

cp old-project/package.json new-project/
cd new-project
npm install  # 또는 yarn install

이렇게 하면 기존 프로젝트와 동일한 패키지를 설치할 수 있음.

2. 패키지 리스트 가져오기 (package.json 없이)

  • 특정 프로젝트의 패키지 목록을 dependencies.txt로 저장
npm list --depth=0 > dependencies.txt
  • 새 프로젝트에서 한 번에 설치:
xargs npm install < dependencies.txt

3. 전역 패키지 공유 (비추천)

  • npm link 또는 yarn link를 사용하여 로컬에서 패키지를 공유 가능하지만,
    일반적으로 프로젝트마다 독립적인 환경을 유지하는 것이 안전함.

 

5. 결론

✅ 리액트 프로젝트를 새로 만들면 기존 프로젝트와 별개의 환경으로 관리됨.
✅ node_modules는 각 프로젝트마다 독립적으로 존재하므로 라이브러리는 자동으로 유지되지 않음.
✅ 기존 라이브러리 구성을 유지하려면 package.json을 복사하거나 패키지 리스트를 추출하여 설치해야 함.

즉, 프로젝트마다 환경이 별도로 관리되므로, 필요하면 package.json을 이용해서 동일한 설정을 유지하는 방법을 추천한다.