[토이프로젝트/React] 리액트 프로젝트 생성(npm init, CRA)

리액트 프로젝트를 만드는 방법은 여러 가지가 있습니다.

• npm init
• npx create-react-app (통칭 CRA)
• Vite, Parcel, Next.js, Remix 와 같은 툴 이용

이번 포스팅은 npm init react-app과 npx create-react-app 의 차이점을 알아보기 위해서, 각 명령어로 프로젝트를 만들어 보는 과정입니다.

---

목차

---

프로젝트를 만들기 앞서, 로컬에 프로젝트의 루트가 되는 디렉토리(폴더)를 만들었습니다. 프로젝트 루트 폴더은 마음대로 하셔도 됩니다.

---

■ 리액트 프로젝트 명명규칙

리액트 프로젝트를 생성할 땐 대문자를 넣을 수 없습니다.

npm init에서 리액트 프로젝트를 만들 떄, 이름에 대문자가 들어가면 오류

CRA로 리액트 프로젝트를 만들 때, 이름에 대문자가 들어가면 오류

---

■ npm init

• 리액트 프로젝트 생성

# (cd:change directory) 경로이동
cd [프로젝트 루트 디렉토리 경로]

# npm으로 react 프로젝트 생성
npm init react-app [프로젝트명]

(붉은색) 명령어 (노랑색) 로그에서 찾아 본 리액트 프로젝트 생성 문구

• 정상적으로 생성됐는지 확인하기(1) : 프로젝트 파일 확인

위 명령어 실행 후, 프로젝트 루트 경로로 이동해 보면 폴더와 파일이 잔뜩 생긴 걸 볼 수 있습니다. 리액트 프로젝트가 생성됐습니다.

• 정상적으로 생성됐는지 확인하기(2) : 리액트 프로젝트 실행

터미널로 다시 돌아와 보면, npm init의 로그의 맨 아래에 npm 명령어에 대해 간단히 소개해 주고 있습니다.

npm star : 개발 서버 실행
npm run build : 리액트 프로젝트를 static 파일로 묶음
npm test : test 파일을 찾아 실행
npm run eject : 리액트 프로젝트 삭제

---

리액트 설치가 정상적으로 됐다면 npm start를 통해서 리액트 프로젝트가 브라우저에서 실행되는 모습을 확인할 수 있어야 합니다.

# 생성한 리액트 프로젝트로 이동
cd [npm init에 적은 프로젝트명]

# npm을 통해 해당 경로의 프로젝트 실행
npm start

위의 사진과 다르게 프로젝트명이 si인 이유는, si 프로젝트를 하나 더 만들었기 때문입니다.

브라우저에 'localhost:3000'으로 리액트 프로젝트가 열린 것을 통해, 리액트 프로젝트가 정상적으로 만들어진 것을 확인할 수 있습니다.

주소 포트번호가 3001인 이유는, simember 프로젝트를 실행하면서 si 프로젝트로 실행했기 때문입니다.

• 리액트 프로젝트 종료 (npm 서버 닫기)

터미널에서 Ctrl + C 를 누르면 "일괄 작업을 끝내시겠습니까? (Y/N)" 가 나오는데 "y" 입력하고 엔터 누르면 리액트 서버가 닫힙니다. 제가 이걸 몰라서 당황한 마음에, 리액트 프로젝트를 2개(simember, si)만들었습니다..ㅎㅎ 

---

■ create-reat-app (CRA)

npm init로 만든 프로젝트와 CRA로 만든 프로젝트의 차이를 비교하기 위해 CRA로도 만들어 보겠습니다.

---

• create-react-app 설치

✅ CRA 설치 확인하기

node에는 기본적으로 create-react-app 기능이 없습니다. 그래서 아래처럼 CRA 명령어를 실행하면. 에러가 뜹니다.

'create-react-app@*' is not in this registry.
: 'create-react-app'의 어떤 버전도 이 저장소에서 찾을 수 없다.

Note that you can also install from a tarball, folder, http url or git url.
: tarball, folder, ... 등에서 이 기능을 설치할 수 있으니까 알아두세요.

---

정말 없는지 확인해보기 위해 create-react-app --version 명령어를 실행시켜 보니, 그런 명령어는 쓸 수 없다고 합니다.

npm을 통해 create-react-app 패키지를 설치해 줍니다. tar 패키지 버전으로 문제로 CRA 설치가 제대로 안 된다면 [바로가기]를 눌러주세요.

# 패키지를 관리하는 npm을 통해서 create-react-app 패키지 설치
npm install -g create-react-app

• 리액트 프로젝트 생성

# npx의 CRA 패키지를 이용해서 리액트 프로젝트 생성 (npx 생략가능)
npx create-react-app [프로젝트명]

프로젝트 이름이 v인 이유는, 오타입니다. 원래는 -v 옵션을 적으려고 했는데 -를 빼먹었습니다.

✅ CRA 로그 확인하기

눈에 띄는 로그가 몇 개 있어서 설명을 덧붙입니다.

• Installing 어쩌구... : 설치되는 패키지 이름 중 일부를 보여줍니다.
• Git repo not initialized Error : 깃 패키지가 설치되어져 있지 않아 나오는 에러입니다. 깃을 이용하지 않을 거라면 영향도는 없습니다.
• Installing template 어쩌구... : npm에 의존하는 템플릿을 설치하겠다는 내용입니다.
• 8 vulnerabilities : 취약점이 발견됐다는데 영향도는 낮은 것 같습니다. [깃허브-vulnerability in react-scripts 바로가기]
• Success! Createted [프로젝트명] at [경로] Inside that ... : 프로젝트가 경로 아래에 잘 만들어졌다는 내용입니다.

• 리액트 프로젝트 실행 (정상적으로 만들어졌는지 확인하기)

# 생성한 리액트 프로젝트로 이동
cd [npx CRA에 적은 프로젝트명]

# npm을 통해 해당 경로의 프로젝트 실행
npm start

 

위와 동일하게 브라우저로 리액트 화면이 보이면 정상적으로 만들어진 겁니다.

---

• [추가] TypeScript 기반의 리액트 프로젝트 생성

✨ CRA로 typeScript 기반의 리액트 앱 생성하기

npx create-react-app [프로젝트 이름] --template typescript

---

위의 2가지 방식으로 만든 프로젝트에 Tailwind CSS 라이브러리와 TypeScript 라이브러리를 설치하니까 경고 문구가 뜨면서 설치가 안 되더라구요.

원인 : 특정 패키지들의 버전이 맞지 않는, 의존성 문제

특히, Tasilwind를 install할 때 경고로 언급된 패키지가 20여 개가 넘었습니다.

해결 방법을 찾아보니 해당 패키지를 전부 하나씩 업데이트 해줘야 하는데, 어느 세월에 그걸 다 업데이트하나요. 리액트 프로젝트에서 타입 스크립트 또는 테일윈드(Tailwind)를 사용하실 예정이라면, template 옵션이나  Vite , Parcel , Next.js 또는 Remix 로 프로젝트를 생성하시길 추천드립니다.

---

■ npm init과 CRA 차이

• 프로젝트 구조의 차이 : 없다

각 명령어로 리액트 프로젝트(이하, '리액트 앱' 또는 '앱')를 만들고 가장 처음 확인한 게 프로젝트 구조 비교였습니다. 대충 확인해 봤을 땐 설치된 패키지 개수, 종류 동일했습니다.

그와중에 찾은 차이점은, npm init는 캐시를 이용하는 것 같았습니다. 제가 캐시는 개념이 없어서 추가 설명은 못 적겠네요..

(좌) CRA로 생성한 리액트 앱 (우) npm init으로 생성한 리액트 앱

 

package.json에서는 뭔가 다를까 했는데 사용하는 패키지 버전까지 동일합니다.

(좌) npm init으로 생성한 리액트 앱 (우) CRA로 생성한 리액트 앱

---

아래 포스팅을 참고해서 차이가 있다는 부분을 확인해 봤으나 잘 모르겠습니다..

React Project 생성하기 npm init과 npx create-react-app 차이

• 프로젝트 생성 시간 차이 : 있다

그런데 각 명령어로 앱을 만드는 시간 차이가 꽤 있더라구요. 차이점 비교하겠다고 계속 프로젝트를 만들다보니 체감됐습니다. CRA 너무 느립니다..

npm init react-app : 20초 내
npx create-react-app : 1분 이상

(좌) npm init로 패키지 다운 받는 시간을 밑줄친 사진 (우) CRA로 패키지 다운 받는 시간을 밑줄친 시진

---

■ CRA 왜 쓰냐?

이렇게 보니 CRA를 왜 쓰냐 싶겠지만, CRA의 옵션을 이용하면 TypeScript 템플릿 기반의 리액트 앱을 만들 수 있습니다. 프로젝트 생성은 아래 명령어로 가능합니다.

npx create-react-app [프로젝트 이름] --template typescript

---

옵션없이 npm init이나 CRA로 리액트 앱을 만들면, 자바스크립트을 템플릿을 따릅니다. 따라서, 특정 라이브러리를 사용할 때 의존성 문제로 사용하기 힘들 수 있습니다. 의존성 라이브러리를 찾아서 하나씩 버전을 맞춰 설치를 할 게 아니라면, 템플릿 옵션을 사용하는 것도 방법입니다.

---

npm init, CRA VS CRA --template의 차이
- 앱 구조 다름
- 기본 파일 다름 : .js VS .tsx

 

TypeScript 템플릿 기반이기 때문에 앱 구조가 다릅니다. 또한, TypeScript를 사용하기 때문에 소스 파일의 확장자도 다르며 문법 규칙에서도 약간의 차이가 있습니다.

(좌) 기본적인 리액트 앱 구조와 소스 코드 (우) TypeScript 기반의 리액트 앱 구조와 소스 코드

---

*참고

위 방법대로 만들고 문제 없이 개발 후 서버에 배포했더니 흰 화면만 나오는 경우가 있습니다. 개발자 도구를 열어 확인해 보니 Failed to load resource: net::ERR_FILE_NOT_FOUND 에러가 나옵니다. create-react-app 빌드시에 기본 경로가 package.json의 homepage를 기반으로 설정되기 때문에 생기는 문제입니다. package.json을 수정한 다음 npm run build 를 통해 만들어진 파일을 다시 배포하면 문제가 해결됩니다.

  "homepage": "./"

43번째 줄 추가

---

감사합니다. :)