< 초기 세팅 >
1. node.js, npm 설치 후 작업할 공간의 터미널을 열어서 npm init 으로 초기화

2. index.js 파일 작성 후 터미널에서 node index.js 명령어 치면 실행

3. "scripts" 아래 "start": "node 경로명" 적어주면 npm run start 로 간편하게 실행할 수 있음


< Java Script의 모듈 시스템 >
1. Common JS (CJS)
2. ES Module (ESM)
[ CJS ]

1. math.js 에서 module.exports 로 내보내면 index.js 에서 require로 받아올 수 있음.
2. module.exports 에서 내보내는 이름(sub)와 함수 이름(sub)이 같다면 sub 한 번만 작성해도 됨.
3. 객체의 구조분해할당 방식으로 받아올 수 있음
[ ESM ]
1. ESM을 사용하려면 package.json에 "type": "module"을 적어야 함 (CJS에선 사용 불가)

2. export {} 로 내보내고 import ~ from "~.js" 로 받아올 수 있음 (.js 안쓰면 못불러옴)

3. 'export ' 를 함수 앞에 붙여서 바로 내보내기도 가능
'default' 를 붙이면 math 모듈을 대표하는 단 하나의 기본 값이 되기 때문에 import 시 중괄호 없이 불러옴
(이름이 길면 커스터마이징 가능: multiply -> mul)

< Node.js 라이브러리 사용하기 >
실습용 randomcolor 를 받음

우측에 Install 아래의 명령어를 터미널에 입력

1. 설치되면 package.json 파일의 dependencies 아래에 randomcolor 의존성 추가
2. 왼쪽에 node_modules (설치된 라이브러리의 저장소) 폴더와 package-lock.json (패키지가 사용하는 라이브러리의 정보를 package.json보다 정확하고 엄밀하게 저장하는 곳) 이 생김
3. 만약 node_modules 혹은 package-lock.json이 사라졌다면, 터미널에서 'npm i' 를 입력하면 한 번 설치되서 package.json에 기록된 라이브러리를 다시 설치해줌
4. 그래서 코드를 공유하거나 깃허브에 업로드 시 node_modules 파일은 굳이 포함하지 않음

5. 라이브러리를 import 후 생성해서 출력하면 random color가 출력됨
'한 입 크기로 잘라먹는 React' 카테고리의 다른 글
| 7. 실습 : 카운터 앱 만들기 (0) | 2024.06.01 |
|---|---|
| 5. React.js의 useRef (0) | 2024.05.31 |
| 4. React.js 의 State와 Props (0) | 2024.05.31 |
| 3. React.js 입문 (0) | 2024.05.30 |
| 2. React.js (0) | 2024.05.30 |