4주차 강의 복습 및 정리

이전 주차에 이어서 클론코딩이 나오고 완성했으며, Node.js를 설치하고 간단히 살펴봤다.

1. Node.js

• 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경
• 먼저 아래를 터미널에 입력하여 nvm(node version manager) 다운 -> 이를 통하여 버젼을 자유롭게 왔다갔다 장착(?)하고 탈착(?)할 수 있음
  • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  • TMI: 맥을 처음 사용해서 설치과정에서 조금 해맸으나 아래 사이트를 보고 실행할 수 있었음
  • https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

1.1 NPM(node package manager)

• npm init -y를 하게되면 자동적으로 ‘package.json’이 생성됨 → 이 폴더 안에는 해당 프로젝트에 사용되는 패키지들을 볼 수 있음
• 이와 같이 딸려 오는 것은 ‘pacakage-lock.json’이고 이 파일은 ‘package.json’에 명시된 패키지를 작동하는 데 필요한 것들을 자동적으로 기재해주는 파일 → 이 두 개는 절대 삭제하면 안 됨
• npm install xxx node의 생태계에서 필요 패키지 또는 모듈을 다운 받을 수 있음
  • npm install -D xxx 작성 시 개발용 의존성 패키지 설치(개발할 때만 필요하고 웹 브라우저 작동 시 필요 X) → devDependencies로 ‘package.json’에 분류
  • npm install xxx작성 시 일반 의존성 패키지(웹 브라우저 동작하는 용도 → dependencies로 ‘package.json’에 분류
    

1.2 개발 서버 실행과 빌드

• scripts 항목에 작성 시 해당 패키지에서 무엇을 실행할 지 세팅할 수 있음
  • npm run dev 입력 시 실행 → 개발용 서버를 만듦
  • npm run build를 통해 배포용 진행
    • 이 작업을 통해서 코드 난독화가 진행
      • 작성된 코드를 읽기 어렵게 만드는 작업. 빌드된 결과(제품)는 브라우저에서 해석되는 용도로, 용량을 축소하고 읽기 어렵게 만드는 등의 최적화
      • 번들화: 프로젝트 개발에 사용한 여러 모듈을 하나로 묶어내는 작업

1.3 유의적 버전(SemVer)

• Semantic Versioning, SemVer: 의미가 있는 버전
  version: "^12.14.1"

뜻	표기	해석
^	^	최신 버전으로 minor와 major가 업데이트 가능 → 새 업데이트가 나오면 update할 수 있게 표식을 만든 것임
Major	12	기본 버전과 호환되지 않는 새로운 버전
Minor	14	기전 버전과 호홛되는 새로운 기능이 추가된 버전
Patch	1	기존 버전과 호환되는 버그 및 오타 등이 수정된 버전

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

• git을 통해서 버전을 관리한다고 하면 다음을 작성하여 관리하지 않도록 지정
  
• 아래 과정을 통해서 github에 commit 가능

  git init → git add . → git status → git commit -m “메세지 입력" → git log → git remote add origin “주소" → git push origin master

주간회고

• 강의를 따라해도 출력이 다르면 버전확인하고 해결하자