1.3 작업 환경 설정

node.js

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다.

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking)[3] I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다.

내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다.

npm

npm으로 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있습니다. 리액트 역시 하나의 패키지입니다.

node.js가 빠른 발전을 할 수 있었던 것도 이 npm덕분이라 생각하는데

npm은 위에 설명한 것 처럼 Node Package Manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포하고 있다.

이게 무엇을 의미하냐면 다른 사람이 잘 만들어놓은 모듈들을 npm을 통하여 설치하여 사용이 가능하다는 점이다.

또한 이 모듈이 사용하고있는 다른 모듈의 의존성또한 자동으로 해결해준다.

어떻게? npm install 이 명령어 한번으로 말이다.

설치: window

Node.js 공식 내려받기 페이지(https://nodejs.org/ko/download/)에서 Windows Installer를 내려받아 설치합니다.

설치가 끝나면 터미널(또는 명령 프롬프트) 창을 열고, 다음 명령어를 입력하여 제대로 설치했는지 확인해 보세요.

$ node -v
//v10.14.1

yarn

yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공합니다.

yarn 내려받기 페이지(https://yarnpkg.com/en/docs/install#windows-stable)에서 Download Installer 버튼을 눌러 설치 프로그램을 내려받은 후 실행하세요.

터미널을 열고 다음 명령어를 입력하여 yarn을 제대로 설치했는지 확인하세요(macOS, Windows, Ubuntu 공통).

$ yarn –version
//1.12.3

vscode

1. ESLint: 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구입니다.

2. Reactjs Code Snippets: 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음입니다. 검색했을 때 유사한 결과가 여러 개 나올 수 있는데 제작자가 charalampos karypidis인 것을 설치하세요.

3. Prettier-Code formatter: 코드 스타일을 자동으로 정리해 주는 도구입니다.

git

Git은 매우 빠른 속도와 분산형 저장소 지원이 특징이다. 방대한 Linux 커널 소스 코드를 생각해 보면, 속도 문제는 매우 중요하다. 오픈 소스 개발의 특성상 여럿이 달려들어 자기 맘에 드는 걸 하기도 하며, 또한 뭘 하나 잘못 붙였다 이상한 걸 건드려 망하기 쉬운데, Git는 이런 환경의 특성에 맞게끔 잘 만들어져 있다.

Windows

Git 공식 내려받기 페이지(https://git-scm.com/download/)에서 설치 파일을 내려받아 설치하세요. Windows에서는 bash 에뮬레이터도 함께 설치합니다. 앞으로 리액트 프로젝트를 진행할 때는 cmd 창보다는 bash 에뮬레이터를 사용할 것을 권유합니다(bash가 cmd보다 편하기도 하지만, 터미널에서 사용할 명령어를 macOS, 리눅스에서 사용하는 명령어와 통일하는 것이 주목적입니다).

create-react-app

create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구입니다. 나중에 설정을 커스터마이징해야 하면 자유롭게 설정을 변경할 수도 있습니다.

$ yarn create react-app hello-react
$ cd hello-react
$ yarn start # 또는 npm start