Tomato's BLOG

[React] 리액트 시작하기(node.js, npm, npx 설치 및 create-react-app) 본문

개발/Web

[React] 리액트 시작하기(node.js, npm, npx 설치 및 create-react-app)

토마토Tomato 2021. 2. 8. 12:43

1. node js 다운받기

WSL(Ubuntu 20.04 LTS)에서 nodejs github을 참고해 다운받았다. 버전 14를 설치할 경우 명령어는 다음과 같다.

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
$ sudo sudo apt-get install -y nodejs

node -v 명령어를 통해 설치 완료와 버전을 확인하면 된다.

2. npm, npx 다운받기

우분투의 경우 npm을 별도로 설치해주어야 했다.

$ sudo apt-get install -y build-essential

이 명령어를 통해 쉽게 설치 가능하다.
이후 npm이 잘 설치되었는지 확인하기 위해 npm -v를 입력해본다.

create-react-app을 사용하기 위해서는 npx도 설치해야 하는데 나는 이미 설치가 완료되어있었다. 만약 설치가 되어있지 않다면 다음 명령어를 이용하면 된다.

$ sudo npm install npx -g

3. create-react-app

원래 react에는 복잡한 과정이 필요했지만 create-react-app을 활용하면 코드 한 줄로 react app을 만들 수 있다.

$ npx create-react-app new-app

해보니 시간이 조금 오래 걸리긴 했다. 한 3-5분..? 내 컴퓨터의 문제일 수도 있겠다.
주의할 점은 app 이름에 대문자가 들어가면 안 된다. 들어가는 순간 다음과 같은 에러를 보여줄 것이다.

$ npx create-react-app New-app
npx: installed 67 in 9.869s
Cannot create a project named "New-app" because of npm naming restrictions:

  * name can no longer contain capital letters

Please choose a different project name.

이럴 경우 그냥 소문자만 들어간 이름을 다시 지정해주면 된다.

'개발 > Web' 카테고리의 다른 글

[React] 컴포넌트(Component)  (0) 2021.02.08
Comments