React 환경 설정 및 프로젝트 생성하기(Windows)

1. 우선 아래 링크로 접속하여 Node.js를 설치한다.

https://nodejs.org/ko

Node.js

링크에 접속하면 아래와 같은 화면이 뜨는 데 웬만하면 왼쪽의 다운로드 링크를 사용하자. 노드 뿐만 아니라 어떤 개발도구도 최신버전을 사용하기보다는 좀 안정화가 되어있는 버전을 쓰는게 좋다. 왜냐하면 최신버전에는 어떤 버그가 도사리고 있을 지 모르기 때문이다. 최신버전에서 우리가 해결할 수 없는 버그를 만나게 되면 뭐 때문에 잘못되었는지도 모른 채 시간을 낭비하게 된다. 하지만 좀 오래된 버전은 이미 많은 개발자들이 사용해왔고 지금도 사용하고 있는 버전이기 때문에 웬만한 버그는 알려져 있고 스택오버플로우 등을 통해 해결방법을 찾을 확률이 높아진다.

나는 18.16.1버전을 설치했다.

 

다운받은 파일을 설치까지 완료한 후 명령프롬프트 창을 띄워 'node -v', 'npm -v' 두 명령어를 입력하면 노드가 잘 설치되었는지, 설치된 버전은 몇버전인지 확인할 수 있다. 여기서 npm이란 Node Packaged Manager의 약자로 Node.js를 사용하는 데에 필요한 모듈들을 모아 관리해주는 것이라고한다. 다음에 Node.js를 제대로 파볼 생각인데 그 때 자세히 알아보기로 하고 아무튼 지금 npm을 확인하는 것은 이 npm 안에 react로 개발하는데 필요한 다양한 모듈도 포함되어있기 때문에 npm이 제대로 깔려있는지 확인한 것이다. 그러면 npm만 따로 설치하면 되지 Node.js까지 설치할 필요가 있나 나는 SpringBoot 쓸건데 라고 생각할 수 있지만 Node.js 또한 하는 역할이 있단다. 바로 Webpack과 Babel을 지원하는 것인데 Webpack은 Front-end 개발에 사용된 많은 정적파일들(.js, .css, .png 등)을 번들링 해주는 툴이고 Babel ES6을 지원하지 않는 구닥다리 웹브라우저에서도 우리가 짠 코드를 읽을 수 있게 해준다고 한다.

cmd에서 node와 npm 버전체크하기

 

2. 프로젝트 생성하기

 우선 프로젝트를 저장할 폴더를 생성한다.

 폴더를 만들었다면 그 폴더를 <Shift + 우클릭> 하여 여기에 PowerShell 창 열기를 선택해 PowerShell창을 열어준다.

PowerShell 창이 떴다면 

npx create-react-app <프로젝트 이름>

을 통해 프로젝트를 생성할 수 있는데 그대로 실행하면 아래와 같은 에러가 뜬다.

이는 아직 react 개발환경이 구축되지 않아 생기는 error로

npm install -g create-react-app

이라고 치고 실행한 뒤 다시 위의 코드를 실행하면 된다.

이렇게 하면 프로젝트가 담긴 폴더가 생성된다. 나같은 경우에는 ex01이라는 이름으로 생성했는데 프로젝트이름은 뭐 알아서 마음에 쏙드는 걸로 작명하시길 바란다. 

 

3. 프로젝트 열기(Visual Studio Code 이용)

열려있는 PowerShell 창에서 프로젝트를 시작해도 되지만 어차피 작업할 곳은 VSCode 이므로 VSCode에서 프로젝트도 시작하는게 좋을 것 같다(VSCode는 터미널도 지원한다). React를 공부하려고 마음먹은 사람이 VSCode를 사용해본 적이 없을 확률은 거의 없다고 생각하지만 혹시모르니까 아래에 VSCode 링크도 올려두겠다.

https://code.visualstudio.com/

VSCode도 준비되었다면 상단의 파일 탭의 폴더열기를 이용하여 생성된 프로젝트의 폴더를 연다.

그 후 터미널을 켜

npm start

라고 치면 프로젝트가 실행된다.

프로젝트가 실행된 모습. 왼쪽과같은 화면이 새로운 브라우저 창이나 탭에 떠야한다.

기본적으로 코드를 통한 화면설계는 src의 App.js에서 이루어지며 여기 코드를 변경함으로써 화면을 설계할 수 있다. 설명하자면 왼쪽 화면은 public의 index.html을 브라우저가 읽고 렌더링한 것인데 App.js에서 index.html에서 수행되는 index.js에서 사용하는 App Component를 정의해놓았으므로 여기서 JS와 JSX를 사용해서 화면을 설계하면 된다.