[5주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : npm, node.js 시작!- react강의

npm 프로젝트 버전 일치시키기

package.json : 수동 모듈 관리

package-lock.json : 수동 모듈과 연결된 다른 외부 모듈

두 파일이 필요하다.

두 파일을 프로젝트 디렉토리의 루트경로에 이동시키고 npm i 명령어를 통해 설치한다.

 

node.js

https://nodejs.org/ko/

chrome V8 자바스크립트 엔진으로 만들어진 JavaScript런타임<-프로그래밍 언어가 동작하는 환경

자바스크립트가 실행될 수 있는 환경 : node.js가 설치된 컴퓨터, 웹브라우저

 

웹브라우저에서는 html, css, js만 동작을 한다. 

하지만 이들만으로 개발을 하면 비효율적이므로, 도움을 주는 여러 모듈들을 가지고 와서 제작한다.

모듈들은 html, js, css로 변환되어야 한다. 이러한 경우에 node.js를 사용한다.

 

NVM : node version manager

원할때, 원하는 node.js 버전을 사용하기

 

프로젝트가 node.js의 버전에 영향을 받을 수 있으므로 다양한 버전을 사용할 수 있는 nvm이 필요하게 된다.

(node.js의 최적화된 버전은 프로젝트에 따라 다를 수 있다.)

 

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

https://github.com/nvm-sh/nvm#installing-and-updating

https://github.com/coreybutler/nvm-windows (윈도우의 경우에는 이 링크에서 확인)

 

설치 확인

nvm --version

설치 버전에 따라 다를 수 있으나 아래와 같이 버전 정보가 출력되면 올바르게 설치되었다.

nvm 으로 설치된 node.js의 목록 확인하기

nvm ls

위와 같이 현재 설치된 목록을 확인 할 수 있다.

 

nvm으로 특정 버전 설치하기 (예: 12.14.1)

nvm install 12.14.1

사용할 node 버전 설정

nvm use 12.14.1

현재 사용되는 node 버전에 (*)로 표시된다.

node --version

으로도 확인 가능하다.

 

삭제하기

nvm uninstall 12.21.0

삭제하기를 원하는 버전을 입력(예: 12.21.0)

 

추가적으로 더 활용해 보고 싶은 경우

사용가능한 명령어 목록을 다음 명령어로 확인해 볼 수 있다.

nvm --help

npm 

npm 생태계에서 패키지(모듈, 기능)을 설치하여 사용할 수 있다.

독립된 특정 기능을 한 데 묶어서 사용할 수 있다. (ex. 모듈형 주택)

 

기존의 <link>태그로 연결해서 사용해야 하였던 기능들을 npm install 과 같은 명령어로 설치하여 사용할 수 있다.

(관리효율 증가)

 

npm 이용하여 프로젝트 시작하기 (npm으로 패키지 관리하기)

npm init -y

package.json 파일이 생성된다.

 

{
  "name": "npmtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

name 프로젝트 이름 (-y y플래그 사용으로 기본적으로 디렉토리 명이 지정된다.)

프로젝트 버전, 프로젝트 설명

main 현재 프로젝트를 하나의 패키지로 만들어서 npm에 올릴때 필요한 옵션

scripts 현재 프로젝트의 명령어 모음

 

parcel-bundler 설치하기

npm install parcel-bundler -D

npm install 명령어로 패키지를 설치하게 되면 node_modules 디렉토리 밑에 설치되게 된다.

이러한 설치된 패키지를 "모듈"이라고도 한다.

parcel-bundler 를 설치하는데, 다른 것들도 설치되는 이유는 parcel-bundler가 사용하는 의존성 패키지(dependencies)들이 함께 설치된다.

 

package.json에 설치된 패키지 목록을 확인 가능하다.

 

lodash 설치하기

npm install lodash

 

package.json

-D 플래그(--save-dev) 사용시 devdependencies 

사용하지 않을 시 dependencies에 추가된다.

 

package.json의 내용에 따라 npm install(npm i)로 해당 패키지를 설치할 수 있다.

 

package-lock.json

패키지의 내부 모듈들이 자동으로 들어간다.

package-lock.json은 자동으로 관리되는 파일이다.

 

node_modules의 내용은 지우더라도 다시 설치 가능, package.json, package-lock.json은 지우지 말기

 

dependencies / dev-dependencies

개발용 의존성 패키지(dev dependencies)

일반 의존성 패키지(dependencies) 브라우저에서 동작할 때 필요

 

package.json으로 parcel 연습해보기

"scripts": {
    "dev": "parcel index.html", // 개발용
    "build": "parcel build index.html" // 사용자들이 보는, 결과물
  },

npm run dev

npm run build 

명령어를 터미널에 입력하여 확인 할 수 있다.

 

build 명령어로 생성된 index.html은 난독화 된다(/dist).

웹브라우저에서 동작시키는 용도(브라우저에서 해석가능하면 된다.)

용량을 최소화(압축), 번들(lodash도 포함해서 만들어줌.)

-> 기존 main.js에 연결한 js(import)한 것들을 한 파일로 만듦

parcel bundler는 웹브라우저에서 동작하는 것x 개발용으로만 사용하므로 "devdependency"로 설치

 

유의적 버전

Semantic Versioning, SemVer

node --version

으로 node 버전을 확인할 수 있다.

 

npm --version

npm또한 같은 방법으로 확인 가능하다.

 

00.00.00 과 같이 특정 프로그램 버전을 명시할 때 유의적 버전이라는 개념을 사용한다.

 

유의적 : 의미가 있다. 버전에 의미를 부여하여 이를 구분하고 해석할 수 있다.

Major.Minor.Patch로 .를 기준으로 구분 되어있다.

 

Major 기존 버전과 호환되지 않는 새로운 버전

Minor 기존 버전과 호환되는 새로운 기능이 추가된 버전

Patch 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전

 

^캐럿기호가 맨 앞에 붙어 있는 경우

^Major.Minor.Patch

Major 버전 내에서 가장 최신 버전으로 업데이트가 가능하다.(Minor, Patch는 바뀔 수 있다.)

 

npm info lodash

lodash 패키지의 버전 정보 확인하기

 

실제 설치 버전은 package.json의 버전과 다를수 있다.

(node_modules/lodash/package.json확인)

 

특정 버전을 설치하기

npm install lodash@4.17.20

4.17.20 버전을 지정하여 설치

npm update lodash

4.17.20이 설치된 후에, 최신 버전으로 업데이트가 된다(package.json에서, lodash가 ^와 함께 작성되었기 때문 - 업데이트를 허용한다. 허용하지 않은 경우-^가 없는 경우-는 항상 해당 버전으로 유지된다. 이 경우에는 업데이트 되지않는다.)

 

^를 사용하면, npm update 명령어를 이용하여 언제든지 Minor, Patch버전을 업데이트 할 수 있다고 가정한다는 의미이다.

 

.gitignore

.gitignore를 이용하여 버전관리를 하지 않는 파일(폴더)는 어두운 색상으로 표시된다(VSCode).

파일혹은 디렉토리를 버전관리에서 제외시킬 수 있다.

 

.cache/
dist/
node_modules/

ECMA 스크립트(ES) 

유럽컴퓨터 제조 협회. 자바스크립트 국제 표준화 기구 

 

typeof 특정 데이터의 타입 확인(string, number, boolean, undefined, object...)

 

typeof null, [], {} : object

객체, 배열데이터의 타입을 정확히 알기 위해서는 함수로 확인

const getType = (target) => {
	return Object.prototype.toString.call(target);
}

getType([]);
[object Array]

const getType = (target) => {
	return Object.prototype.toString.call(target).slice(8, -1);
}

 

export default function func() {

}

내보내기

 

import func from "파일" //.js는 생략가능

가져오기

상대경로를 올바르게 작성하여야 한다(절대경로로 작성시 node_modules 에서 해당 파일을 찾음)