[패스트캠퍼스] 프론트엔드 강의 학습일지(Node.js와 Git)

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

---

Node.js

Node.js는 Chrome V8 JavaScript 엔진(자바스크립트 문법을 해석하는 엔진)으로 빌드된 JavaScript 런타임(자바스크립트 언어가 프로그램이 동작하는 환경)이고, 자바스크립트는 프로그램 언어인데, 컴퓨터(로컬)에서도 동작할 수 있고, Chrome 웹브라우저에서도 동작할 수 있다.

웹페이지를 개발하기 위해 Node.js의 도움을 받는 용도로 사용한다.

• 여러 모듈을 사용하여 개발하고 node.js로 html,css,js 파일로 변환하여 웹브라우저에 넘긴다.

Node.js 설치

Node.js

• LTS(Long Term Supported)버전: 안정되고 신뢰도가 높은 버전이다.

개발하기 위해서 Node.js 버전의 여러 개의 상황이 필요할 수 있기 때문에, Node 버전 매니저를 설치한다.

NVM

nvm 설치

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

설치 확인을 위해 터미널에서 아래 명령어 입력한다.

nvm --version

Node.js 설치

nvm install {설치원하는버전}

설치된 버전 확인

nvm ls

설치된 버전 중 사용할 버전 선택

nvm use {버전}

이제 node 명령어를 사용할 수 있다.

node 버전 확인

node --version

삭제하고 싶은 버전이 있다면 아래 명령어 입력

nvm uninstall {버전}

NPM

Node.js 설치되면 npm도 같이 설치된다.

npm(Node Package Manager)은 다양한 기능(패키지, 모듈)들을 관리해 주는 매니저이다.

 

package.json 파일 생성

npm init -y

pacel-bundler를 설치한다. -D를 꼭 붙여서 설치한다. 

npm install parcel-bundler -D

설치되면 node_modules 폴더와 pakage-lock.json파일이 생성된다.

lodash 설치

npm install lodash

npm으로 설치한 내용이 package.json파일에 남아서, node-modules 폴더를 삭제해도 npm install을 통해 json 내역과 같은 내용으로 설치된다.

package.json은 직접 관리하는 파일이고, 여기서 설치된 모듈들의 내부적으로 사용되는 파일들이 package-lock.json에서 관리된다.

node-modules폴더는 삭제해도 되지만, package.json과 package-lock.json파일은 삭제되지 않도록 조심!

 

위에서 parcel-bundler는 -D(--save-dev)를 붙여서 설치했는데, 이렇게 설치하면 devDependencies에 설치된다.(개발용 의존성 패키지)

그 외는 일반 의존성 설치가 된다.

차이점?

• 개발용 의존성 패키지: 개발할 때만 필요한 것(추후 웹브라우저에서는 필요하지 않은 것)
• 일반 의존성: 추후 웹 브라우저에서도 동작이 필요함

개발 서버 실행과 빌드

Parcel을 사용하여 개발서버 실행

프로젝트 내부에서 명령어가 실행되도록 아래 이미지와 같이 설정해준다. 이 설정을 하지 않으면 터미널에서 사용할 수가 없다.

이제 위에 설정할 것 과 같이 터미널에서 개발 서버 실행하기 위해 명령어를 입력한다.

npm run dev

개발서버실행

lodash 사용

main.js에 아래와 같이 입력해서 사용해 본다.

import _ from 'lodash'
console.log(_.camelCase('hello world')); // helloWorld

 

빌드 명령어 추가

parcel을 통해 build를 통해 하면 실제 사용자가 보이는 화면을 위한 파일로 빌드된다.

npm run build

그러면 아래와 같이 dist파일(압축버전)이 난독화된 내용의 파일이 생성된다.

유의적 버전(Semantic Versioning, SemVer)

12.14.1

Major(기존 버전과 호환되지 않는 새로운 버전).Minor(기존 버전과 호환되는 새로운 기능이 추가된 버전).Patch(기존 버전과 호환되는 버그 및 오타 등이 수정된 버전)

맨 앞에 ^캐럿 기호가 있는 경우(^12.14.1)에는 Major 버전 안에서 가장 최신 버전으로 업데이트가 가능하다는 의미이다.(major는 정해진 버전 안에서 minor와 patch버전은 변경될 수 있다는 의미이다. 이걸 사용하기 싫다면, package.json에서 ^캐럿 기호를 삭제해 준다)

정보 확인

npm info lodash

다운그레이드

npm install lodash@4.17.20

업데이트

npm update lodash

NPM 프로젝트 버전 관리(.gitignore)

node_modules 등 파일이 없더라도, 터미널 명령어로 npm install을 하면 package.json에 입력된 내용 대로 설치된다.

 

git으로 관리

관리 전 .gitignore 파일을 설정해 준다.(git에 올리지 않을 파일)

그리고 아래 명령어 입력으로 버전 관리 시작

git init

변경사항이 추적되지 않는 파일들 확인

git status

gitignore에 입력한 파일은 보이지 않는지 확인 후 버전을 만들기 위해서 아래 명령어 입력

git add .

다시 git status로 확인해 보면, 아래와 같이 변경 사항 추적 내용이 보인다.

git status

git commit 메시지 생성한다.

git commit -m '프로젝트 생성'

잘 생성 됐는지 확인하는 방법

git log

이렇게 연결이 완료되었다면, 이제 저장소에 업로드해 본다.

프로젝트를 github 저장소에 업로드

https://github.com/ 에서 새로운 레포지토리 만들고, 만들어진 저장소 주소를 복사해서 아래 명령어에 사용한다.

git remote add origin {복사한 주소}

연결이 잘 됐으면 master 브랜치에 push 해준다.

git push origin master

https://github.com/ 에서 만들어둔 레포지토리 새로고침해서 잘 업로드되었는지 확인되면 완료이다.