패캠 reat 강의 목록은 편의상 주차별로 강의가 나뉘어 있다.
주차별 목록에 맞춰 들으면 강의를 못듣고 밀리는 경우를 대비 할 수 있으니
오히려 편하다.

근데 이번 5 주차는 시작도 못했다.. ㅜ
4주차의 마지막 내용인 node.js 를 공부하며 내용을 정리했다.

꼭 주차를 맞춰 들을 필요는 없다는 공지를 읽었지만 더 미뤄지면 안되니까 6주차 때까지는
6주차 목록까지 마무리 지어야겠다.

---

Node.js 개요

브라우저에서는 html, css, javascript 만 동작을 한다.
3가지로만 웹 페이지를 만들 수 있지만, 비효율적인 부분도 있기 때문에
여러 모듈을 이용해서 만들 수 있다. 그 중 하나가 Node.js 이다.

Node.js
: chrome의 V8 javascript 엔진으로 빌드된 javascript 런타임
: 자바스크립트가 동작하는 환경

모듈로 개발이 된 소스는 브라우저에서 동작 되기 위해
html, css, javascript로 변환을 해줘야 한다. 컴퓨터에 변환 명령을 내려야 하고
명령을 할 수 있는 환경이 필요하다.
Node.js 환경에서 javascript 언어로 변환하는 명령을 내릴 수 있다.

NVM 다운로드

node.js 다운로드 페이지로 이동하면 2가지 버전을 확인 할 수 있다.
LTS 버전과, 최신 버전이다.

lts 버전 : 장기적으로 안정되고 신뢰도가 높은 버전
최신 버전 : 비교적 불안정할 수 있다.

작업을 하다 보면 여러 버전의 node.js를 사용해야 할 수도 있는데,
그 때마다 모든 버전을 설치 할 수는 없으니 다운로드 시 한 가지 버전만 다운 받아서 쓰기 보다는
node.js를 설치하기 전에 언제든지 원하는 버전으로 지정할 수 있는 노드 버전 매니저(nvm)를 먼저 다운로드 받는 것을 권장한다.

나는 windows 환경이라
https://github.com/coreybutler/nvm-windows/releases
에서 nvm-setup.zip 을 다운로드 받아 설치했다.
설치 후 터미널에서 nvm --version 명령어로 설치가 완료되었는지 확인 할 수있다.




근데.. nvm —version 명령어를 입력했더니 명령어를 찾을 수 없음 오류가 계속 나왔다.
환경 변수를 통해 해결을 했지만 이후에 nvm 을 통해 원하는 버전의 node.js를 설치하고
nvm use 버전 명령어를 입력했더니 깨진 문자열과 함께 exit status 1 오류가 새롭게 나타났다..!
구글링 해보니 nvm 설치 시 설치 경로에 공백이 포함 되어서 였다.

결론적으로, nvm 설치 시 주의 할 점은

1) 설치 경로에 공백이 포함되지 않도록 지정하고 설치한다.

nvm 루트 경로는 C:\Users\sylee\AppData\Roaming\nvm
nodejs 경로는 C:\Program Files\nodejs 가 아닌 C:\Progra~1\nodejs 로 지정해준다.

2) 환경 변수를 확인한다.

환경 변수
파일이 설치된 폴더가 아닌 다른 위치에서도 사용할 수 있도록 변수 설정이 가능하다.
실행할 파일이 포함된 폴더 경로를 환경 변수에 미리 설정해 두면
cmd에서 실행하려는 파일이 포함된 폴더 경로가 아니더라도 실행 할 수 있다.

시스템 속성 - 고급 - 환경 변수 - path - 편집
에서 설치한 nvm 폴더 경로가 있는지 확인이 필요하다.
없다면 ‘새로 만들기’를 눌러 해당 경로를 추가해준다.

3) 그리고 에디터 터미널에서는 명령어 실행이 바로 되지 않는 것 같아 관리자 권한으로
cmd창을 사용했다!

4) nvm --version 명령어를 실행 해 정상적으로 설치 된것을 확이했다.

설치부터 다사다난 했다…
몇 번이나 다시 설치하고 명령어 입력해보고 하나가 해결되면
또 다른 명령어에서 오류가 나고.. 또 구글링 하고
아마 프로그램을 처음 사용해보기도 하고 터널 사용도 익숙하지 않아서
더 애먹었던 것 같다! 알고 보니 그렇게 복잡한 문제는 아니었다.. 해결해서 다행이다…

NVM을 통해 원하는 버전의 Node.js 설치

터미널에서 nvm li 명령어를 입력하면 No installations recognized. 라는 내용이 나타난다. nvm을 통해 설치된 node.js가 없다는 내용이다.

nvm install 버전 명령어로 원하는 버전의 node.js를 설치한다.

nvm li로 다시 확인했을 때 node.js의 버전 목록이 여러 개 일수도 있다. 그래서
nvm use 버전 명령어로 사용할 node.js 버전을 정해줘야 한다

이제는 내 컴퓨터에서 node 명령어를 사용할 수 있다.
node --version 으로 nodejs가 정상적으로 사용 가능한지 확인한다.

그리고 적업할 때는 그 때에 권장되는 버전을 확인하고 사용한다.

npm은 node.js 설치 시 자동으로 설치된다.

NPM

: Node Package Manager 는 전 세계의 개발자들이 만든 다양한 패키지(기능, 모듈)들을 관리한다.

패키지 : 어떤 기능을 사용하기 위해 누군가 만들어 놓은 소스 코드

스타벅스 페이지를 따라 만들며 필요한 기능들을 link 태그, script 태그로 연결 해 사용했지만,
최근에는 프로젝트에 이 기능들을 별도로 설치를 해두고 수정을 거쳐 결과물을 만든 후
웹사이트에서 동작 시킨다.

즉, node.js 환경에서 npm이라는 개념으로 여러 패키지들을 설치하고 관리하고 동작 시켜줘야 한다.
이런 방법을 이용하는 이유는 프로젝트를 효율적으로 관리할 수 있고,
여러 기능들을 손쉽게 고도화 할 수 있다.

1) 프로젝트 폴더 경로의 터미널에서 npm init -y 명령어를 실행해 package.json파일을 생성한다.

• name 옵션 : 프로젝트 명
• main 옵션 : 현재의 프로젝트를 하나의 패키지로 만들어 npm에 업로드할 때 필요하다.
  웹사이트를 만들 때에는 main 옵션이 필요하지는 않다.
• scripts 옵션 : 여러 스크립트 명령들을 이 옵션에 명시해두면 편하게 필요한 명령을 사용할 수 있다.

2) npm install parcel-bundler -D npm install 명령어를 실행해 필요한 패키지를 설치한다.

프로젝트 구조에 package-lock.json 파일 및 node_modules 폴더가 생성된다.
npm 을 통해 패키지를 설치하면 node_modules 폴더 내에 해당 패키지가 설치된다.
지금 parcel-bundler 라는 패키지를 설치했으니까 node_modules 폴더 내에
parcel-bundler 패키지 폴더가 있는 걸 확인할 수 있다.

직접 설치한 parcel-bundler 패키지 이외에도 수많은 패키지가 포함되어있는 것도 확인 할 수 있다.
이유는 parcel-bundler 패키지 설치 후 관련해서 필요한 패키지가 같이 설치되었기 때문이다.

그리고, 직접 만들었던 package.json 파일을 확인해 보면
devDependencies 옵션이 생겨있고, parcel-bundler 패키지가 명시되어있다.
즉, npm 을 통해 패키지를 설치하면 package.json 파일에 설치 내역이 남는다.

3) 또 다른 패키지도 설치해 본다. npm install lodash 명령을 실행한다. 플래그 D는 붙이지 않는다!
package.json 파일에 dependencied 옵션에 lodash 패키지가 명시되어진다.

npm install 패키지명 -D
플래그D(-D)가 붙으면 devDependencies에 설치 내역으로 남고
붙지 않으면 dependencies에 설치 내역으로 남게된다.

npm install 패키지명 -D , npm install 패키지명 —save-dev : 개발용 의존성 패키지 설치
→ 개발 할 때에만 필요하고 웹 브라우저에서 동작할 때는 필요 하지 않은 패키지

npm install 패키지명 : 일반 의존성 설치
→ 웹 브라우저에서 동작할 수도 있는 패키지

4) node_module 폴더는 실제로 언제든지 삭제해도 무방하다.

삭제하더라도 설치했던 패키지가 지워지지 않고,

npm install 혹은 npm i 명령어로 다시 패키지를 생성할 수 있다.

5) package.json 및 package-lock.json 파일은 프로젝트에서 지워지면 안되는 파일들이다.

직접 설치한 외부 모듈은 parcel-bundler, lodash 2가지 이지만 내부적으로 어떤 모듈이
사용 되는지는 모른다. 그 정보가 package-lock.json에 자동으로 입력된다.

---

많이 들어보기는 했지만 직접 배우고 사용해보기는 처음이라
시작에 불구한 내용임에도 많이 버벅거렸다.
처음 보는 오류 내용도 많이 봤고.. 그래도 덕분에 더 자세히 공부하게 되었다고 생각한다.

남은 강의도 열심히 해봐야겠다..!

#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의 #React&Redux로시작하는웹프로그래밍