Programming

[패스트캠퍼스:4주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/4

mionager 2022. 7. 19. 21:37


4주차.Chapter 4

Node.js란,
: Chrome V8 JavaScript 엔진으로 만들어진 JavaScript 런타임
=> JavaScript가 동작하는 환경. javascript 문법을 해석, 동작하는 엔진으로 만들어졌다.
=> JavaScript는 1. 웹 브라우저 2. Node.js가 설치된 컴퓨터 환경에서 동작한다.
=> JavaScript가 동작하는 컴퓨터 환경을 Node.js라고 한다.
=> 다양한 모듈을 사용해 CSS, JavaScript등을 더 쉽게 작성하고 구현할 수 있는데 이런 모듈을 웹 브라우저에서 읽을 수 있게 변환해 준다.



Node.js 세팅하기

  1. 노드 버전 매니저 설치
  2. 다양한 노드 버전 설치
  3. 사용할 노드 버전 설정
  4. npm 세팅하기
  5. github에 업로드해서 버전관리 하기




1. 노드 버전 매니저(nvm, Node Version Manager) 설치 (Window용)

  1. https://github.com/coreybutler/nvm-windows 접속(or nvm window 검색 > GitHub 링크 접속)
  2. Download Now! 라는 버튼 찾아서 링크로 이동
  3. nvm-setup.zip 다운로드하고 zip 파일 해제 후, 설치 파일로 nvm 설치
  4. VS Code를 열어서 Terminal 켜기 (상단 Terminal > New Terminal 혹은 하단 바를 끌어올리기 혹은 ctrl + shift + `)
  5. nvm --version을 입력하면 현재 버전 및 설치여부 확인 가능

 


2. 다양한 노드 버전 설치
다양한 프로젝트를 작업하거나 오랫동안 작업해 온 프로젝트에 경우,
최신 버전이 아닌 다른 노드 버전 환경에서 작업을 했기 때문에
해당 버전으로 환경을 바꿔서 그 프로젝트를 작업해야 하는 경우가 있기 때문에
한 개 이상의 버전을 설치해 놓고 바꿔가며 사용하게 된다.

  1. node.js 사이트에 접속해, 다운로드 받을 버전을 확인한다. (짝수 버전은 최신 버전은 아니지만 안정적인 버전이고, 홀수 버전은 안정적이지 않지만 가장 최신 버전이다.)
  2. VS code Terminal로 돌아와 nvm install 버전을 입력하고 엔터를 누르면 설치를 시작한다. (예. nvm install 16.16.0)
  3. 사용할 버전을 바꾸기 위해서 nvm use 버전을 입력하고 엔터 (예. nvm use 16.16.0)
  4. nvm ls라는 명령어로 다운받은 버전 및 사용 중인 버전을 확인할 수 있다.


https://nodejs.org/en/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

nvm ls

혹시 아래와 같은 에러가 뜬다면,
exit status 1: Access is denied.
exit status 5: Access is denied.
해결방법
시작(window)창에서 PowerShell을 검색해서
'관리자 권한으로 열기'를 해서 똑같은 명령어를 적어주면 동작한다.
(모든 경우 통하는지는 모르겠다.)


명령어 정리
nvm install 버전 : 새로운 버전의 노드 다운로드
nvm use 버전 : 사용할 노드 버전 바꾸기
nvm ls : 다운되어있는 노드 버전 확인(사용 중인 버전 확인 가능)
node --version : 사용중인 노드 버전 확인
nvm uninstall 버전 : 노드 버전 삭제하기
nvm --help : 명령어 확인, 사용법 확인


3. npm (Node Package Manager) 설치하기
npm 개요
노드 환경에서 사용할 수 있는 패키지(모듈)를 관리해 주는 매니저로
'npm생태계'라는 공간이 있고,

개발자들이 패키지/모듈/기능을 만들어서 생태계에 업로드하면

누구든 설치해서 사용을 할 수 있다.
(지난 시간 스타벅스 코딩 할 때 사용한 라이브러리들과 같다고 생각하면 될 것 같다.)
*모듈이란 : 독립된 기능으로, 다양한 모듈을 한 곳에 묶어서 무언가를 만들 수 있다.

(예. 다양한 모듈을 합쳐 핸드폰을 만듦)

npm을 사용하는 이유는,
효율적으로 관리할 수 있고 손쉽게 기능을 고도화할 수 있다.

하지만 구성이 더 복잡하고 활용방법에 대해 학습을 해야 하기 때문에 공부할게 더 많아진다.
<head></head>내부에 라이브러리를 태그로 연결해 프로젝트에

직접적으로 설치하는 방법도 있지만 npm을 더 추천한다고 한다.

 


npm 기본세팅

  1. 프로젝트를 처음 시작하면 Terminal에 npm init -y를 입력해서 npm을 세팅한다. (그럼 package.json이 생성된다.)
  2. npm i parcel-bundler -D 명령어를 입력해 parcel-bundler라는 모듈을 다운로드한다.
  3. package.json을 다시 확인하면 devDependencies가 새로 생기고 parcel-bundler가 추가된 걸 확인할 수 있다.
  4. 이번에는 npm i lodash를 다운로드한다.
  5. package.json에 dependencies에 lodash가 추가된다.


npm 기본 세팅 추가 설명
모듈을 다운로드하고 보면, package-lock.json, node_modules, .cache 등 새로운 파일들이 생성된다.
폴더 형태로 생성된 애들은 실수로 삭제를 해도 npm i 명령어로 복구가 가능하지만,
package.json, package-lock.json은 안되니 삭제를 하면 안 된다.

package.json은 내 프로젝트에 대한 정보를 갖고 있고,
package-lock.json은 내가 다운로드한 모듈이 사용하는 다른 모듈 및 정보가 담겨있다.
*해당 파일들 내부에 “main”이라고 적힌 부분이

npm 생태계에 프로젝트를 올릴 때 모듈로 만들어져서 올라가는 js파일이다.

 


devDependencies와 dependencies의 차이점
개발환경에서만 사용할지, 웹브라우저에서도 사용할지에 따라 구분이 되는데,

모듈 다운로드 시 -D를 붙이면 개발환경에서만 사용하겠다는 뜻이다.
npm install -D 모듈로 설치하면,

devDependencies, 개발용 의존성 패키지, 개발할 때만 필요하고 웹브라우저에서는 필요 없음
npm install 모듈로 설치하면(-D가 없음),

dependencies, 웹브라우저에서도 필요

*package.json에 주석이라도 적어 넣으면 에러가 발생하니 주의하기
*npm i parcel-bundler -D : npm install parcel-bundler —save-dev와 동일한 명령어로, 짧게 줄인 것
*parcel-bundler 모듈은, 작업 중인 프로젝트의 개발 서버를 열어주는 모듈 (VS Code 확장 기능 중 Live Server를 대체할 모듈)

 


Parcel-bundle 모듈 동작시키기

  1. package.json에 들어가서 "script": {}에 key 값으로 'dev', value 값으로 'parcel index.html'을 입력한다. (index.html 폴더를 기준으로 시작한다.)
  2. Terminal에서 'npm run dev' 입력하면 localhost 주소가 생성된다.
  3. package.json에 들어가서 “script”: {}에 key 값으로 ‘build’, value 값으로 ‘parcel build index.html’을 입력한다.
  4. Terminal에서 ‘npm run build’를 입력하면 파일들이 난독화되서 새로 생성된다. (용량이 줄어들고 실제 서비스 제공할 때 해당 파일들을 사용한다.)

 


4. 버전관리(Github)
.cache, dist, node_modules는 버전 관리가 필요 없다.
삭제해도 재설치 가능, 용량이 너무 큼

 

1.

프로젝트 루트 폴더에 .gitignore 파일을 생성해서 버전관리를 하지 않을 폴더/파일을 추가한다. 

.gitignore 파일에 폴더/파일명 작성

 

2.

Terminal에 git init을 입력해 저장소를 생성한다. 

git init하면 파일 색이 초록, 회색으로 바뀐다.

 

3.

git status로 상태를 확인

git status 파일들의 상태 및 수정된 파일이 있는지 확인한다.

 

4.

git commit -m '메시지'로 버전 관리를 위해 버전 생성

git commit -m '메세지'로 버전 생성

 

5.

git log로 버전 확인

git log로 commit한 내용을 볼 수 있다.

 

6.
github 사이트에 들어가서 create repository를 해서 생성된 주소 복사

 

 

7.

git remote add 저장소 별칭 복사한 주소

별칭을 origin이라고 했다.

 

8.
git push 별칭 master 명령어로 저장소에 넣기

이번에도 에러가 떴다.

이 전에 버전 관리 공부한다고 세팅해 뒀던 github 계정이랑

현재 작업 중인 계정이 달라서 발생한 것 같다.


에러 403 해결방법 중 1개
https://breakcoding.tistory.com/61

 

[GitHub] 깃허브 fatal: unable to access, push 안 됨

학교 연구실 PC에서 작업하던 것을 집에서도 이어서 하고 싶어서 집에 와서 내 노트북에 내 레파지토리를 clone해왔다. 그러고 나서 코드를 수정하고 add와 commit까지는 잘 했다. 그런데 push가 안 되

breakcoding.tistory.com

 


유의적 버전(SemVer, Semantic Versioning)
명시된 버전의 세 가지 위치에 적힌 숫자의 의미
Major.Minor.Patch

:
Major : 기존 버전과 호환되지 않는 새로운 버전 (ex. Window 10, Window 11 ...)
Minor : 기존 버전과 호환되지만 새로운 기능이 추가
Patch : 기존 버전과 호환. 버그, 오타 등 단순한 수정

(예. 16.16.0)

 

유의적 버전에서 ^(캐럿) 기호의 의미

Major 버전 안에서 가장 최신 버전으로 업그레이드 및 다운그레이드를 허용한다.

^Major.Minor.Patch

:
Major 버전 안에서 install 모듈@버전 명령어로 명시한 버전으로 다운그레이드, 

npm update 모듈 명령어로 최신 버전으로 업그래이드가 가능하다.
(BUT, Major 버전 안에서만 가능)
^(캐럿) 기호가 빠지면, 그 버전에 고정되어서 update 명령어가 먹히지 않는다.


node_modules > 모듈 > package.json에서 설치된 version을 확인할 수 있다.

npm install 모듈@버전 : 버전을 낮춰서 덮어서 설치하기 (예. npm install lodash@4.16.20)
npm update 모듈 : 최신버전으로 업데이트 (예. npm update lodash )

npm info 모듈 : 최신 버전을 확인할 수 있다.

node_modules > 모듈 > package.json : 설치된 version을 확인할 수 있다.

저작자표시 (새창열림)