Node.js란?
node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다.
Chrome V8 Javascript 엔진이란? js의 문법을 해석하고 그것을 실제로 동작시켜줄 수 있는 엔진.
런타임이란? 프로그래밍 언어가 동작하는 환경. 즉 js가 동작하는 환경
node.js를 배운다는 의미는 컴퓨터를 제어하는 것을 배운다와 같다.
node.js 사이트에 들어가면 LTS가 있는데 LTS = Long Term Supported의 약자로 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전으로, 유지/보수와 보안(서버운영 등)에 초점을 맞춰 대부분 사용자에게 추천되는 버전이다.
NVM
nvm이란? Node Version Manager의 약자로 node.js를 내가 원할때 버전을 바꿔줄 수 있는 프로그램
구글에 nvm-windows검색해서 설치
$nvm ls nvm을 통해서 설치된 node.js 목록 확인 ls = list
$nvm install 설치하고자 하는 버전
$nvm use 사용하고자 하는 버전
$nvm uninstall 지우고자하는 버전
NPM
nvm을 설치하면서 npm도 같이 설치된다.
npm이란? Node Package Manager의 약자로 전세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는 것 이다.
관리효율 증가, 손 쉬운 기능 고도화 라는 장점이 있지만 학습난도 증가, 구성이 복잡해지는 단점이 있어 Trade-off(상충관계)가 발생.
$npm init -y 를 입력해 package.json 파일 생성,node_modules폴더 생성.
$npm install parcel-bundler -D를 설치
설치한 패키지들을 지우더라도 npm install or npm i 명령으로 다시 설치가 가능.또한 한번 설치한 패키지는 히스토리가 남는다.
package.json 은 직접적으로 관리.
package-lock.json은 자동으로 관리되는 파일.
$npm install -D는 devDependencies : 개발용 의존성 패키지 설치 -> 설치한 특정한 패키지들이 개발할때만 필요하고 웹브라우저에서 동작할때는 필요없다 라는 개념이다.
$npm install -D를 붙이지 않으면 dependencies : 일반 의존성 설치 -> 실제로 웹브라우저에서 동작할 수도 있다는 것을 전제.
dev = development
요즘 프론트개발에서 open with live server 는 그다지 효율적이지 않아 터미널에 parcel index.html로 (로컬환경에서 개발용으로 서버를 열겠다는 의미)해야하는데 이때 터미널에서는 parcel이란 명령을 알아듣지 못한다. 그래서 package.json파일로 가 "script" 부분에 "dev" : "parcel inde.html"명령을 추가.(프로젝트 내부에서만 명령동작), 그 후 터미널에 dev라는 이음으로 실행하면 된다. 즉 $npm run dev 입력.
만약 개발용 의존성 패키지가 아닌 일반 의존성 설치를 가려오려면 $import _ from '이름(A)' A라는 패키지를 프로젝트에 설치를 했고 main.js에 import from '이름(A) 으로 가져오는 코드를 작성했으면 A의 패키지에 package.json에 명시되어 있는 main옵션에 A.js라는 파일을 실젤로 가져와서 나의 main.js에서 활용한다 라는 개념.
ex)``` $import from 'lodash'```
실제 프론트엔드 개발은 내부에 로컬서버를 별도로 오픈해서 작업하는 방식 사용.
package.json에 main이란 옵션은 우리의 프로젝트를 실제로 npm생태계 패키지로서 업로드 할 때 필요한 옵션.
"dev" = 프로젝트 내부에서 설치한 parcel-bundler 패키지를 통해서 기본적으로 index.html 파일을 기준으로 해서 동작을 할 수도있는데 기본적으로 시작하는 것은 결국엔 로컬환경에서 개발용으로 서버를 열어서 브라우저에서 프로젝트를 확인.
만약 package.json script부분에 parcel 명령에 build라는 추가 명령을 붙힌 상태에서 index.html을 연결해서 실행하게 되면 실제로 사용자들이 보는 용도의 결과물이 출력 ex)$"build": "parcel build index.html" 이러면 dist라는 폴더에 여러개 파일들이 생성된다. 그 중 index.html 파일을 보면 난독화가 적용되어있다.
난독화
난독화란? 작성된 코드를 읽기 어렵게 만드는 작업이다.
난독화를 하는 이유는 빌드된 결과(제품)는 브라우저에서 해석되는 용도로, 용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치기 위해.
번들(Bundle)
번들은 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업이다.
유의적 버전(Sem Ver, Semantic Versioning)
의미가 있다라는 개념 즉 버전에 의미를 부여한다.
Ex)
Major.Minor.Patch
12.14.1
Major = 기존 버전과 호환되지 않는 새로운 버전.
Minor = 기존 버전과 호환되는 새로운 기능이 추가된 버전.
Patch = 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전.
만약 ^Major.Minor.Patch (^12.14.1) =Major 버전 안에서 가장 최신 버전으로 업데이트 가능하다는 의미.
^ = 캐럿
패키지의 버전을 보고싶으면 $npm info 패키지명
패키지의 버전을 따로 명시후 설치를 원하면 $npm install 패키지명@원하는 버전 (아래버전. 다운그레이드일때 자주 사용)
상위 버전 다운을 원하면 $npm update 패키지명
버전관리(.gitignore)
npm을 통해 프로젝트를 관리할땐 몇가지 주의 필요.
node_module 같이 양이 많고 언제든 지우고 언제든 최신으로 설치가 가능한것들은 제외하고 깃허브에 올리기. 파일에 .gitignore 파일 만들어서
.cache/
dist/
node_modules/작성해서 깃허브에 push
