React 개발환경 구성(Create React App, React기초)

들어가며

모든 프로그래밍 언어를 배울 때 가장 귀찮은 것은 바로 개발환경 구성이다.

하지만, 그 귀찮음도 React에서는 예외일 것이다.

 

아주 간단하게 React를 키는 과정을 한번 살펴보겠다.

설치과정은 npm 설치(node.js 설치) -> Create React App 설치 -> 개발환경 구성 순으로 진행하겠다.

---

1. Node.js 설치

가장 먼저 Node.js에 들어가서 Node.js를 설치하자 Node.js 설치링크

Node.js에는 npm이라는 패키지 관리자가 포함되어 있는데,

우리는 npm을 사용하기 위해 그것을 포함하고 있는 node.js를 설치할 예정이다.

왼쪽의 LTS를 설치하자

설치를 할 때에는 LTS설치를 권장한다.

LTS란, Long Term Support를 의미하는데 즉, 이 버젼을 설치하면 장기간에 걸쳐 지원하도록 고안된 소프트웨어 버젼이다.

또한, 최신의 버전보다 안정화되어 에러나 버그가 적으니 완전 최신의 버전에 포함된 신기술이 필요한 것이 아니라면 되도록 LTS를 설치하자.

2. Create-react-app 설치

npm이 설치되었다면, CLI를 한번 켜보자(windows는 cmd, Mac은 iTerm, Linux는 이걸 쓸 정도면 CLI는 알 것이다)

 

그곳에 아래와 같이 작성하면된다.

npx create-react-app <당신이 생각하는 프로젝트 이름>
// 사용법

npx create-react-app myBlog
// myBlog라는 리액트 앱 만드는 명령

 

npx는 execute npm package binaries라는 뜻으로 해당 패키지를 설치한 후 바로 실행시키라는 뜻이다.

이렇게 하면 당신의 파일시스템에 리액트 실행을 위한 모든 개발환경이 구성되었다.

 

cd <당신의 프로젝트 이름>
npm start

당신이 아까 작성한 프로젝트로 들어가서 (나의 경우에는 myBlog)

npm start를 입력해보자

 

이제 당신이 리액트를 공부하기위한 모든 준비는 끝났다.