[React] 개발 환경 셋팅하기
React - 4
[본 글은 '리액트를 다루는 기술' 의 책을 참고로 정리한 공부 내용입니다.]
이번 포스팅에서는 React 프로젝트를 개발하기 위한 개발환경 셋팅을 해보려고 한다.
설치할 프로그램
1. node.js(+npm)
2. 에디터
3. Git
node.js
리액트 개발을 위해서는 node.js가 반드시 필요하다.
node.js는 과연 무엇인가?
node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있게 해준다. node.js에는 ECMPScript6(자바스크립트 공식 문법)를 호환시켜주는 바벨(babel), 모듈화 된 코드를 하나로 합치고 코드 수정 시 웹 브라우저를 리로딩하는 등의 역할을 하는 웹팩(webpack) 등이 있다. node.js를 설치할 때 패키지 매니저 도구인 npm도 같이 설치된다.
npm이란?
패키지 매니저 도구. 다른 개발자가 만든 패키지(재사용 가능 코드)를 설치하거나 설치한 패키지의 버전 관리를 할 수 있도록 도와준다. 리액트 또한 하나의 패키지다.
리액트는 직접적으로 node.js와는 연관이 없지만, node.js가 지닌 수많은 기능들이 리액트 개발 시에 필요하기 때문에 설치를 해주어야 한다.
https://nodejs.org/en/download/
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
해당 포스팅에서는 Node.js의 LTS 버전을 사용할 예정이다. LTS 버전은 장기적으로 안정적인 지원을 제공하는 버전으로, LTS 버전을 설치하는 것을 권장한다.
설치 마법사에서는 아무것도 건드리지 않고 Next만 눌러도 설치가 된다.
설치 후에는 cmd를 켜
노드의 버전 확인 및 설치 확인을 해보도록 하자.
node -v
에디터 설치
에디터는 본인이 사용하기 편한 걸로 사용하면 된다.
이 포스팅에서는 VS CODE (Visual Studio Code) 를 사용한다.
https://code.visualstudio.com/Download
만약 VS CODE를 사용할 예정이라면 유용한 플러그인을 추천한다.
플러그인 설치시에는 VS CODE를 켜서 하단 이미지에 표시해놓은 아이콘을 클릭하면 플러그인 검색과 설치가 가능하다.
어디까지나 유용이지 필수가 아니라는 점 참고해두길 바란다.
ESLint : 자바스크립트 문법 및 코드 스타일을 검사하는 플러그인
Reactjs Code Snippets(제작자 : charalampos karypidis) : 리액트 컴포넌트, 라이프사이클 함수 작성 시 단축 단어를 사용해 코드를 자동 생성하는 코드 스니펫 모음 플러그인
Prettier-Code formatter : 코드 스타일을 자동으로 정리해주는 플러그인
VS CODE 한국어 설정 방법
마켓플레이스에서 Korean Language Pack for Visual Studio Code 설치
VS CODE 내에서 F1을 누른후 Configure Display Language 입력
locale.json 파일 내 locale값을 ko로 설정 (F1을 눌러 입력 후 뜨는 언어 리스트에서 선택해도 된다.)
VS CODE 재시작
Git
Git은 형상 관리 도구로 프로젝트 버전을 관리하고 협업의 핵심적인 역할을 한다. 개발자라면 Git에 대한 지식을 필수이므로 잘 모른다면 시간을 투자해 꼭 공부하도록 하자.
https://www.git-scm.com/download/win
window에서 설치할 경우 bash 에뮬레이터도 함께 설치되는데, 설치 후 리눅스, macOS와의 명령어 통일을 위해 cmd보다는 bash창을 이용할 것을 추천한다.
React 시작하기
다 설치했을 경우 bash나 cmd 창을 열어 프로젝트 디렉토리를 만들 폴더로 이동하자.
(bash의 경우 탐색기를 이용해 해당 폴더에서 오른쪽 클릭을 해 Git bash 메뉴를 클릭하면 cd 명령어 없이 바로 프로젝트 생성이 가능하다.)
그렇게 이동한 폴더에서
npm 버전이 5.2 이상이면
npx create-react-app <프로젝트명>
* npx는 오타가 아님
(npm과 npx의 차이점이 궁금하다면 https://geonlee.tistory.com/32 글을 참고해보자)
npm 버전이 6 이상이면
npm init react-app <프로젝트명>
프로젝트 생성이 끝난 뒤
cd <프로젝트명>
npm start
를 입력해 리액트 개발 전용 서버를 구동해보자.
구동에 성공하면 아래의 메세지가 뜬다.
Compiled successfully!
You can now view hello-react in the browser.
Local: http://localhost:3000
On Your Network: http://<아이피 주소>:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
메세지가 뜬 뒤에는 자동으로 리액트 페이지가 띄워지는데,
만약 띄워지지 않는다면 브라우저 주소창에
http://localhost:3000 을 입력해보자.
여기까지 성공적이라면 아래와 같은 페이지가 뜬다.
여기까지 리액트 개발환경 셋팅하는 법을 알아보았다.
다음 포스팅에서는 본격적으로 리액트의 문법을 공부해보도록 하겠다.
