Node.js란?
자바스크립트는 웹 브라우저에 내장된 자바스크립트 엔진으로 실행되는데, 그 웹 브라우저를 자바스크립트의 구동 환경이라는 뜻에서 '자바스크립트 런타임'이라고도 표현함
Node.js 등장 이전에는 웹 브라우저가 유일한 자바스크립트 런타임이었으나, 독립적인 자바스크립트 런타임인 Node.js가 등장한 이후에는 어떤 환경에서도 자바스크립트를 실행할 수 있게 됨
Node.js는 서버 개발 기술이 아닌 단순 자바스크립트 런타임
Node.js에는 리액트를 효율적으로 다루는 여러 도구들이 내장되어 있을 뿐만 아니라, 궁극적으로 Node.js가 리액트로 만든 자바스크립트 애플리케이션을 구동하기 때문에 Node.js 학습이 선행되어져야 함
Node.js 환경 설정하기
윈도우 사용자 계정 이름 바꾸기
PC 사용자 계정명이 영어로 되어 있어야 향후 이용 과정에서 문제가 발생하지 않음
Node.js 설치
Node.js 설치 확인하기
Node.js 버전 확인하기
터미널에서 node -v를 입력하고 현재 버전이 출력되는 것을 확인
npm 버전 확인하기
Node.js를 설치하면 npm(Node Package Manager)이라는 도구도 함께 설치되며, 터미널에서 npm -v를 입력하고 현재 버전이 출력되는 것을 확인
비주얼 스튜디오 코드
자바스크립트를 웹 브라우저가 아닌 Node.js를 이용해 실행하기 때문에, 데스크톱 환경의 소스 코드 에디터 비주얼 스튜디오 코드(Visual Studio Code)를 설치
비주얼 스튜디오 코드 설치하기
한국어 설정을 위한 확장 기능 설치하기
언어 설정을 한국어로 변경하기 이해 확장 기능(Extension) 중, 한국어 팩(Korean Language Pack for Visual Studio Code)를 설치
Node.js로 자바스크립트 실행하기
sample.js 파일을 새로 만들고, Ctrl + J 로 비주얼 스튜디오 코드의 터미널을 열고, node sample.js 입력해서 실행
Node.js 패키지
하나의 프로젝트에서 여러 자바스크립트 파일을 Node.js를 이용해 실행할 때는 패키지(Package) 형태로 구성하며, 패키지는 Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위임
패키지 만들기
최상위 폴더인 '루트 폴더'에서, 터미널에 아래 명령어를 입력해서 패키지를 초기화 함
> npm init
패키지 구성 완료 후, 루트 폴더 아래에 생성된 package.json (패키지의 메타정보 저장) 파일은 아래 항목으로 구성됨
- name: 패키지 이름
- version: 패키지 버전
- description: 패키지 설명
- main: 패키지의 소스 코드 파일 중 메인 역할을 담당하는 소스 코드 파일
- scripts: 패키지를 쉽게 다루기 위해 지정한 매크로 명령어
- author: 패키지를 만든 사람
- license: 패키지의 라이센스
패키지 스크립트 사용하기
폴더 구조
root
ㄴ index.js
ㄴ package.json
ㄴ sample.js
// package.json
{
(...)
"main": "sample.js",
"scripts": {
"start": "node index.js", // 추가
"test": "echo \"Error: no test specified\" && exit 1"
},
(...)
}
package.json에 있는 scripts 항목은 복잡한 명령어를 간단한 명령어로 변경하는 일종의 매크로 기능을 지원하며, "npm run" 명령은 scripts에서 일치하는 명령어를 찾아서 실행 함
> npm run start
Node.js 모듈 시스템
모듈과 모듈 시스템
모듈이란?
독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 말하며, 자바스크립트에서는 독립된 하나의 파일을 '모듈'이라고 함
모듈 시스템이란?
모듈을 사용하는 방법을 '모듈 시스템'이라고 하며, 리액트에서는 ES 모듈 시스템을 사용 함
ES 모듈 시스템
ECMAScript 모듈 시스템의 약자로 ESM이라고 하며, 최신 프런트엔드 기술은 모두 ESM을 채택하고 있음
ESM 사용 설정하기
Node.js는 기본적으로 ESM이 아닌 CJS (CommonJS) 모듈 시스템을 사용하므로, package.json에서 설정을 변경해야 함
// package.json
{
(...)
"type": "module" // 추가
}
개별 내보내기
모듈이 필요한 이유는 특정 파일의 값이나 함수를 다른 파일에서 공유하기 위함이므로, 이를 위해서는 해당 파일에서 내보내(export)는 설정 작업이 선행 되어야 함
// circle.js
export const PI = 3.141592;
export function getArea(radius) {
return PI * radius * radius;
}
export function getCircumference(radius) {
return 2 * PI * radius;
}
// 한 번에 내보내기
const PI = 3.141592;
function getArea(radius) {
return PI * radius * radius;
}
function getCircumference(radius) {
return 2 * PI * radius;
}
export { PI, getArea, getCircumference };
개별 불러오기
import 문으로 모듈에서 값을 불러 옴
// index.js
import { PI, getArea, getCircumference } from "./circle.js";
console.log(PI, getArea(1), getCircumference(1));
Output:
3.141592
3.141592
6.283184
전부 불러오기
모듈이 내보낸 값을 한 번에 불러오기
import * as A from B
// index.js
import * as circle from "./circle.js";
console.log(circle.PI, circle.getArea(1), circle.getCircumference(1));
Output:
3.141592 3.141592 6.283184
기본값으로 내보내기
export 키워드 다음에 default를 붙여 모듈의 기본값으로 내보낼 수 있음
export default 10;
// circle.js
const PI = 3.141592;
function getArea(radius) {
return PI * radius * radius;
}
function getCircumference(radius) {
return 2 * PI * radius;
}
export default {
PI,
getArea,
getCircumference
};
다른 모듈이 이 기본값을 불러올 때 다른 이름을 붙이는 것이 가능 함
import name from "./some-module.js";
// index.js
import circle from "./circle.js";
console.log(circle.PI, circle.getArea(1), circle.getCircumference(1));
Output:
3.141592 3.141592 6.283184
! export 키워드 다음에 default를 붙이지 않고 다른 이름으로 불러오면 오류가 발생함
SyntaxError: The requested module './circle.js' does not provide an exxport named 'default'
라이브러리 사용하기
라이브러리란?
프로그램을 개발할 때 공통으로 사용할 수 있는 기능들을 모아 모듈화한 것으로, 완전한 프로그램은 아니며 특정 기능만을 수행함
라이브러리 설치하기
라이브러리 설치 이후 패키지의 변화
lodash 라이브러리를 설치한 결과
- 패키지 루트에 lodash 라이브러리를 저장하는 'node_modules' 폴더가 생성됨
- package.json에 lodash 라이브러리의 정보를 저장하는 dependencies 항목이 추가됨
- 패키지 루트 아래에 package-lock.json이라는 이름의 파일이 생성됨
node_modules
node_modules 폴더는 패키지에 설치된 라이브러리가 실제로 저장되는 곳
package.json의 dependencies
dependencies란 이 패키지를 실행하기 위해 필요한 추가 라이브러리를 뜻함
package-lock.json
package.json의 dependencies에는?
설치된 라이브러리의 버전 범위(Version Range)만 있음
package-lock.json의 dependencies에는?
설치된 라이브러리의 정확한 버전이 있음
라이브러리 다시 설치하기
Node.js 패키지를 인터넷에 올리거나 공유할 때는 node_modules 폴더는 제외하고 공유하므로, 공유자가 이 라이브러리를 사용하기 위해서는 자신의 터미널에서 명령을 수행해야 함
> npm install
공유자가? npm install 을 사용해야 하는 주체나 이유가 정확히 이해가 안됨
라이브러리 사용하기
import lodash from "lodash"
const arr = [1, 1, 1, 2, 2, 1, 1, 4, 4, 3, 2];
const uniqueArr = lodash.uniqBy(arr);
console.log(uniqueArr);
Output:
[1, 2, 4, 3]
