1. Node.js

1.1. 정의

• 브라우저 밖에서도 서버 구축 등의 javascript를 실행할 수 있게 해주는 런타임 환경.

1.2. 특징

• 오픈소스 Javascript 엔진인 Chrome V8을 기반으로 동작.
• Single-Thread의 non-blocking I/O 이벤트 기반의 ‘Async’ 방식. 즉 시간이 오래 걸리는 행동을 계속 기다리지 않고, 시간이 지나 해당 행동의 결과만 따로 받아서 출력한다는 개념.

1.3. NPM(Node Package Manager)

• Javascript를 위한 패키지 관리자.
• 공개된 라이브러리들을 쉽게 설치해 사용할 수 있다. (ex. npm start)
• Node.js의 경우 NPM을 포함하기 때문에, 설치 시 함께 설치된다.

1.4. Node.js의 설치방법

1. 홈페이지에서 자신의 환경에 맞는 Node.js 다운로드
   1. *필자의 경우 Intellij 내부에서 Node.js를 다운로드하여 사용함.
2. 설치 확인 방법(터미널에서)

$ node --version
$ npm --version

1. 실행 확인 방법

$ node
> console.log('test');
> .exit

2. Create-react-app

2.1. 정의

• React 기반의 프로젝트 개발 환경을 구성해주는 툴.

2.2. 설치 방법

• CRA를 이용한 프로젝트 생성

	$ npx create-react-app memo-project
	// npx = npm 레지스트리에 존재하는 최신 버전의 모듈을 설치해줌.
	$ cd memo-project

• 생성한 프로젝트 실행

$ npm run start
// 실행 완료 시 localhost:3000으로 접속하게 된다.

• 실행 종료 = Ctrl + C

2.2. CRA의 구조

• 전체 구성 요소

• package.json: 프로젝트에 설치된 라이브러리와 정보들을 담은 파일.
  • “scripts”: 터미널에 해당 문구를 입력하는 경우 start, build, test, eject 등의 기능을 실행하는 react library.
  • dependencies: 현재 사용 중인 라이브러리 버전 정보.
• index.js: 프로그램의 시작점. 서비스 실행 시 index.js 내부에 존재하는 ‘ReactDOM’에 의해서 안의 코드들이 실행되게 된다.
• App.js: 프로그램 생성 시 기본적으로 존재하는 메인 코드.
• index.css: 모든 js에서 전역으로 사용되는 css.
• App.css: App.js에서만 사용되는 css.

3. eslint와 prettier

3.1. eslint

• 문법 및 코드 스타일을 검사하는 도구.
• 문법적인 오류를 사전에 발견할 수 있고, 협업에서 통일된 코드 스타일을 유지할 수 있도록 도와줌
• CRA에 자체 내장되어 있다. (package.json의 eslintConfig)

3.2. prettier

• 자동으로 코드를 정해진 규칙에 맞게 고쳐주는 툴
• prettierrc.json에서 규칙 정의
• CRA에 내장되어 있지 않으므로 직접 extension에서 설치해 주어야 한다.