React 시작하기 ②- node.js설치와 react-app 프로젝트 생성하기

이번글에서는 npm 을 통해 node.js를 설치하고 react-app project를 생성하고 빌드하는 방법에 대해서 알아보겠습니다.

 

npm설치가 되어있지 않으신 분은 이전 글을 참고해주세요.

https://yellongs.tistory.com/entry/React-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%E2%91%A0-Homebrew-NVM-%EC%84%A4%EC%B9%98-nvm-not-found-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0%EB%B2%95-%ED%8F%AC%ED%95%A8

React 시작하기 ①- Homebrew, NVM 설치 (nvm not found 오류해결법 포함)

 

►Node.js 설치하기

- npm으로 node.js를 설치해 보겠습니다.

최신버전과 LTS버전을 설치하는 방법에 대해서 알아보겠습니다. (LTS는 안정화된 버전으로 대부분의 개발자가 사용하는 안정된 버전이라고 생각하시면 됩니다.)

 

1. 설치할 버전 고르기

-nvm으로 노드를 설치 할 수 있는데, 거의 모든 버전을 설치할 수 있습니다. 어떤 버전을 설치할지, 어떤 버전이 LTS인지 다음 명령어를 통해 알아봅시다.

nvm ls-remote

 

이렇게 설치할 수 있는 버전들이 나오는데 제가 글을 작성하는 시점에서는 14.17.0버전이 가장 최신의 LTS버전이네요

그러면 14.17 버전을 설치해보도록 하겠습니다.

 

nvm install v14.17.0

 

잘 설치가 되었는지 확인해볼까요?

ls 명령어로 확인해 볼 수 있습니다.

 

nvm ls

 

보시면 맨 위에 -> 이런 표시와 함께 v14.17.0이 표시되어있는걸 알 수 있습니다. 잘 설치되었다는 뜻이네요!

node --version 명령어로도 확인 해 볼 수 있습니다.

 

 

►react-app 프로젝트를 생성해봅시다.

자 이제 리액트 프로젝트를 생성할 준비를 모두 마쳤습니다!

리액트 프로젝트는 node.js 환경에서만 작동을 하니깐 앞에 과정들을 거치지 않았다면 할 수 없답니다!

 

이제 리액트 앱 프로젝트를 설치해주는 프로그램을 설치해봅시다.

 

 npm install -g create-react-app

create-react-app 는 리액트 앱을 만들 수 있게 편리하게 프로젝트를 만들어주는 도구라고 생각하시면 됩니다.

*본 글에서는 자세한 내용을 다루고 있지 않고, 단순 설치와 오류를 위한 해결법만 제공드립니다. 왜냐하면 제가 초보기 때문이죠..ㅎㅎ.

 

npx create-react-app my-blog

npx 는 npm을 뭐 어떻게 해주는거라는데 위 명령어를 입력하면 my-blog라는 이름으로 리액트 패키지를 만들어 줍니당.

시간이 좀 걸려요!

 

정상적으로 설치 되면 이렇게 나옵니다.

위 화면을 처음부터 끝까지 잘 읽어주세요. 앞으로 자주 사용할 명령어들입니다.

 

저기보면 cd my-blog 와 npm start가 있죠? 차례대로 입력해서 한번 만든 프로젝트를 실행해 봅시다.

 

cd my-blog
npm start

 

이제.... 터미널에 이런창이 뜨신다면?

그럼 잘 돌아간다는 뜻입니다.

이제 자동으로 크롬이나 웹브라우저가 뜨면서?! 리액트 앱이 실행될거에요.

실행이 안되시는 분은 이 주소로 넘어가주세요.

http://localhost:3000/

 

짠!~ 이제 우리는 리액트 프로젝트를 만들고 실행할 수 있게 되었습니다.

 

*저는 편의상 만든 my-blog프로젝트를 documents 폴더로 이동해서 사용했는데요, 왜냐하면.. 파인더로도 보고싶었기 때문입니다.

그렇게 하실 분은 다음과 같이 해주세요.

 

터미널 my-blog 폴더 안에서 cd .. 를 쳐서 밖으로 나와주신 상태에서 

 mv my-blog Documents/

이렇게 입력하면 Documents 폴더로 이동됩니다.

 

►이제 빌드를 한번 해보겠습니다.

빌드를 하면 웹에서 작동되는 정적인 사이트가 만들어집니다.

 

npm run build

오.. 빌드좌.. 과연?

 

이제 프로젝트 폴더안에 build라는 폴더를 들어가보시면..!

 

파일들이 주르륵 있는것을 알 수 있습니다. 

 

이게 빌드 된 파일입니다.

 

이제 이걸.. 나중에 클라우드 aws나.. 등등에 올려서 web서버에 올려서 사용하면 됩니다. 

 

 

여기 까지 기본 프로젝트를 만들고 빌드하는 방법에 대해서 배워보았습니다.

 

궁금하신점이나, 글에서 잘못된 부분은 댓글로 알려주시면 감사하겠습니다.

 

그럼 모두.. 고수가 되는 그날까지.. 안녕!