nvm 설치하기
Node.js를 사용해서 백엔드를 구축하자. 런타임이라는 용어가 붙었는데 javascript가 동작할 수 있는 환경을 이야기 한다.
Node.js가 작동할 수 있는 환경은 컴퓨터와 브라우저가 존재한다.
순수하게 html, css, js로만 개발하면 개발과정이 비효율적이다. 그래서 모듈들의 도움을 받는데 모듈들을 html,css,js로 변환작업 과정이 필요하다. 그래서 node.js를 통해 이를 변환해줄 수 있다.
LTS(Long Term Serviced)를 사용하면 안정적으로 사용할 수 있다. 보통 짝수버전이 안정적인 버전이다.
하지만 앞으로 우리가 노드js의 버전이 자주 바뀌게 될 것이다. 그래서 node js의 node version manager(nvm)을 설치하자
VSCode에서 실행시키어 보니 버전이 나오는 것을 확인할 수 있다.
node js 설치하기
nvm ls 하면 설치된 버전들이 나온다.
nvm install 12.14.1 하면 특정 버전을 설치할 수 있다.
하면 위와 같이 특정 버전이 설치된 것을 확인할 수 있다.
nvm install 12.21.0 버전도 설치해주자.
nvm use 12.14.1을 입력해서 node.js 를 선택할 수 있다.
node --version 으로 우리가 사용하는 노드의 버전을 확인할 수 있다.
우리는 일단 12.21.0버전을 사용하자
삭제를 원하면
nvm uninstall 12.1.0으로 하면 특정 버전을 삭제할 수 있다.
위의 초록색 버튼을 누르면 최신 버전의 node js를 확인할 수도 있다.
npm
npm(node package manager) 노드 안에서 사용할 수 있는 여러 패키지를 관리할 수 있는 매니저이다.
npm install 패키지명으로 패키지를 설치해서 사용할 수 있다.
npm으로 패키지를 설치 및 활용해야하기 때문에 사용 난도가 증가한다. 기존의 방식에 비해 많이 복잡하지만 관리 효율 증가 + 기능 고도화가 가능해진다.
사용
npm init -y하면 package.js 파일이 생긴다.
이런식으로 프로젝트가 구성된다.
현재 폴더가 NPM이라서 프로젝트 명도 NPM
version: 1.0.0
main은 우리가 npm에 패키지를 올릴때 사용하는 것이다.
scripts는 npm 실행시 실행되는 명령어이다.
license는 말그대로 라이센스이다.
이제 npm install parcel-bundler -D로 패키지를 설치하자
그러면 시간이 조금 지나고 패키지 설치 완료와 함께 좌측에 새로운 폴더와 파일이 생긴것을 확인할 수 있다.
근데 왜 우리는 parcel-bundler만 설치했는데 왜 다른것들도 딸려왔을까? 그것은 parcel-bundler를 사용할때 사용하는 패키지들이 함께 왔기 때문이다.
그리고 우리가 설치한 패키지가 package.json에 남는 것을 확인할 수 있다.
npm install lodash도 설치해주자
그러면 package.json에 또 포함된 것을 확인할 수 있다.
만약 우리가 node_modules 파일을 지운다고 하더라도
npm install을 입력하면 자동으로 우리에게 필요한 패키지들이 설치된다.
또한 package-lock.json 파일을 확인할 수 있는데 이건 내부에서 사용되는 추가적인 패키지들의 내용들이 들어간다.
그런데 lodash는 왜 -D를 붙이지 않았을까?
-D가 존재하면 개발용 의존성 패키지이고 없으면 일반 의존성 패키지라고 부른다.
개발용 의존성이라는 것은 내가 설치한 특정한 패키지가 개발용으로만 필요하고 웹브라우저에서는 필요 없다. 하지만 일반 의존성은 웹브라우저에서 작동할 수 있다고 선언해주는 것이다.
즉 parcel-bundler는 개발할때만 사용하는 패키지이다.
간단한 프로젝트
대충이렇게 짜주자. 그런데 이걸 매번 live server을 사용할 수 없으니
parcel index.html을 입력하자
하면 무슨 말인지 컴퓨터가 이해 못한다.
그래서 package.json에서 scripts에 "dev" : "parcel index.html" 을 작성해주자
그리고 터미널에
npm run dev라고 치면 우리가 dev라고 입력했던 scripts가 작동하게 된다.
이번에는 일반 의존성 패키지를 사용해보자.
따로 입력이 없기에 node_modules로 부터 lodash라는 패키지를 가지고 오라는 내용을 입력해주자.
그래서 이 패키지를 직접 사용해보면 camelCase로 문자열이 바뀐것을 확인할 수 있다.
build라는 추가 명령을 붙이어서 사용자가 보는 용도의 결과물이 출력된다.
우선 서버를 ctrl+c 로 종료하고 npm run build를 입력해주자
그러면 dist 폴더가 생긴다. 그리고 내부에 index.html에 들어가보면 코드가 다닥다닥 붙어 있다. 이건 브라우저에서 작동하기에 최적의 상태로 만들어준것이다.
이렇게 index.html과 패키지들 난독화로 만들어 주는 것이 parcel이 해주는 일이다.
이방식으로 관리 및 배포 해줄 수 있다.
유의적 버전
버전에 의미가 있다는 뜻으로 각 마침표 별로 어떤 의미인지 확인해보자
이제 패키지 버전을 확인해보자
그냥 parcel --version하면 에러가 뜬다 하지만
npm info parcel하면 정보가 뜬다
실재 lodash 폴더안에 패키지.json을 보면 최신 버전이 설치된 것을 확인할 수 있다. 이것의 버전을 바꿀려면
npm install lodash@4.17.20을 입력해주자
그러면 버전이 바뀌어서 설치된 것을 확인할 수 있다.
반대로 패키지를 최신버전으로 업데이트 하려면
npm update lodash를 해주면 최신버전으로 업데이트가 된다.
이렇게 npm update lodash로 업데이트 되는 실수를 막아주려면
버전에서 캐럿(^) 표시를 없애주면 된다. 그러면 npm update가 먹히지 않는다.
github에 업로드하기
이제 npm, nvm이 있는 것을 업로드하는데
.cache, dist, node_modules는 package.json을 통해서 자동으로 생성되기 때문에 깃헙에 업로드할 필요가 없다.
그래서 gitignore에 해당 폴더들을 모두 적어주자
