[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의 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 을 입력해보자.
여기까지 성공적이라면 아래와 같은 페이지가 뜬다.
여기까지 리액트 개발환경 셋팅하는 법을 알아보았다.
다음 포스팅에서는 본격적으로 리액트의 문법을 공부해보도록 하겠다.
