React.js 설치하기

React를 시작하기 위한 준비사항

• Node.js : 리액트 프로젝트 작업시 필요한 도구를 사용하기 위한 기반
• npm : 프로젝트에서 사용될 라이브러리를 설치/버전을 관리해주는 도구. Node.js와 함께 설치되며 React역시 npm을 통해 설치할 것임. 동일한 기능의 Yarn을 사용해도 좋음
• VS Code : 사용할 코드에디터. VS Code이외에 다른 좋은 에디터를 선택해도 됨
• Git : 소스코드의 버전관리를 위한 도구

 

 

Node.js와 npm설치

리액트를 사용하기 위해서는 먼저 기본 환경을 위한 node.js를 설치합니다. 

리액트는 컴포넌트단위로 여러개의 파일로 분리저장 하는데 이 파일들을 한개로 결합하기 위해 Webpack을 사용합니다. 또 각 컴포넌트들은 일반 자바스크립트가 아닌 JSX라는 문법으로 작성하게 되는데 이 JSX를 사용하기 위해 Babel이라는 도구가 필요하구요. node.js를 사용하는 이유는 Webpack과 Babel이 자바스크립트 런타임인 Node.js기반으로 만들어져 있기 때문입니다.

 

먼저 Node.js사이트 https://nodejs.org/ko/를 방문하여 최신버전이 아닌 안정적인 LTS버전을 다운로드합니다.

 

 

기본 설치위치는 C:\Program Files로 지정되며 nodejs란 폴더가 생성되어 설치됩니다.

 

위 화면에서 필요한 툴들 자동설치는 해제해주세요. 설치했다가 뭐하는지도 모르는 엄청난 양의 툴들이 언제 끝날지 모르게 계속 설치되는 암담함을 느낄 수 있습니다. 참고로 저는 중간에 강제로 멈추고 node.js 삭제했다가 다시 깔았습니다.

 

 

설치를 다 했으면 Node.js와 npm이 잘 설치되어있는지 cmd창을 통해 확인합니다. 먼저 node -v로 버전을 확인하고 node를 실행하여 간단한 코드를 작성해봤습니다.

npm도 마찬가지로 버전을 확인해봅니다. 한꺼번에 설치되니 간단하네요.

 

 

 

 

React.js 설치하기

저는 이미 VS code를 설치해뒀기때문에 설명은 pass하고 본격적으로 React.js를 설치합니다.

cmd창에 아래 코드를 입력합니다. (yarn을 사용하실 경우 install코드가 다르니 별도로 찾아보세요.)

npm install -g create-react-app

 

설치가 다되면 버전확인 또 해봅니다.

create-react-app --version

 

 

 

React 프로젝트폴더 생성하기

아래 코드를 입력하여 원하는 이름의 폴더를 생성합니다. 참고로 저는 카멜형식의 reactTest로 했다가 npm이름규칙에 어긋난다고하여 react_test로 변경하였습니다.

create-react-app react_test

 

 

설치가 쭉 진행됩니다.

 

뭐 때문인지 몰라도 제 경우는 Type스크립트를 직접 설치하라네요. 나중에 따로 설치를 해줘야 할 것 같습니다.

그리고 나머지는 옵션항목이라 skip하고 일단 진행상황을 지켜봅니다.

 

 

설치가 완료되었습니다.

간단하게 몇 가지 설명이 나오네요. 안내되는 내용대로 리액트가 잘 설치되었는지 확인해 보겠습니다.

일단 생성한 디렉토리로 이동을 한 후 서버를 실행해보겠습니다.

 

npm start

 

npm start를 입력하고 나니 브라우저가 켜지면서 로컬서버 index화면을 자동으로 보여주네요.

이렇게 리액트 프로젝트를 시작할 준비가 모두 끝났습니다.