[React] 리액트(React.js) 설치 및 시작하기 (Window)

리액트(React.js)와 특징에 대해 간단하게 이해하였다면, 리액트를 설치하고 프로젝트를 만들어 보자

[React] 리액트(React.js) 가볍게 알아보기

순서

1. Node.js / npm 또는 yarn 설치

2. Visual Studio Code 설치

3. Git 설치

4. React 프로젝트 만들기

 

설치

1. Node.js / npm 또는 yarn 설치

리액트(React.js)를 통해 프로젝트를 만들기 위해 Node.js를 반드시 설치해 줘야한다.

 

 

하기 링크를 통해 Node.js를 설치할 수 있는데, 현재 최신 버전 보다는 안정적인 버전을 설치하는 것이 좋다.

 

Node.js

 

Node.js를 설치할 때, 패키지를 관리해주는 npm이라는 도구가 같이 설치가 되는데, npm을 사용해도 무관하지만 yarn이라는 패키지 관리자 도구가 npm보다 더 빠르고 효율적으로 캐시 시스템을 제공하고 있기 때문에 npm 대신 yarn을 설치해서 사용하려고 한다.

 

yarn 설치는 cmd를 통해서 할 수 있고, 명령어는 하기와 같다.

 

 

※ yarn 설치가 완료되었다면 yarn --version 명령어를 통해 yarn이 제대로 설치가 되었는지 확인할 수 있다.

 

2. Visual Studio Code 설치

이제 리액트 코드를 입력하고 수정할 수 있는 코드 에디터로는 Bracket, Sublime Text, Atom, VS Code(Visual Studio Code) 등이 있지만 여기서는 VS Code 설치하여 진행해보려한다.

 

 

VS Code를 하기 링크에서 운영체제에 맞는 버전을 설치한다.

 

Download Visual Studio Code - Mac, Linux, Windows

 

필수는 아니지만 개발의 편의를 위해 Reactjs Code Snippets, ESLint, Prettier-Code fomatter 확장 프로그램을 설치해 준다

Reactjs Code Snippets - 단축 단어를 사용하여 코드를 자동으로 생성해 낼 수 있는 코드 스페닛 모음

ESLint - 문법 및 코드 스타일을 검사해 주는 도구

Prettier-Code fomatter - 코드 스타일을 정리해주는 도구

 

3. Git 설치

Git도 마찬가지로 운영체제에 맞게 설치해 준다.

 

 

하기 링크를 통해 Git을 설치할 수 있다.

 

Git - Downloads

 

cmd를 이용해도 상관없지만 Git bash 에뮬레이터를 사용할 것이기 때문에 Git을 설치할 때, bash 에뮬레이터도 함께 설치한다. 

 

4. React 프로젝트 만들기

Git을 설치할 때, 함께 설치했던 bash 에뮬레이터를 이용해 프로젝트를 만드는데, 명령어는 하기와 같다.

 

 

yarn create react-app [프로젝트 이름] 명령어를 통해 프로젝트를 생성할 수 있다.

이 때, 프로젝트를 저장 경로를 지정 해준 이후에 프로젝트 명령어를 통해 프로젝트를 생성한다.

 

Happy hacking! 이라는 말과 함께 프로젝트가 생성된다.

 

생성된 프로젝트를 실행하는 명령어는 하기와 같다.

 

 

프로젝트가 설치되어 있는 경로로 접근해서 yarn start 명령어를 통해 프로젝트를 실행한다.

 

 

http://localhost:3000/으로 이와 같은 웹 페이지가 나왔다면 리액트를 하기위한 기본적인 준비가 끝난다.