개요
Node.js 는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임(프로그래밍 언어가 동작하는 환경)
NVM (Node Version Manager)
Installing
curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh) | bashExamples
$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6node.js 프로젝트 시작하기
npm init -yNode.js project 를 생성하는 명령어
npm init 을 입력하게 되면 아래 정보를 입력하게 됨
입력한 내용을 기반으로 package.json 이 생성된다
package name:
version:
description:
entry point:
test command:
git repository:
keywords:
author:
license:NPM (Node Package Manager)
:npm은 Node.js의 의존성과 패키지 관리를 위한 패키지 매니저
NPM 사용예시
터미널을 이용하여 test폴더 위치에서 아래 명령어를 실행하면
npm install -D parcel-bundler
npm install loadsh아래와 같은 상태가 된다.
package.json에는 내가 설치한 패키지들의 내역이 남는다 (lock은 건들지 말 것)
→ node_modules의 내용을 삭제해도 내역이 남아있기 때문에 해당 파일 내에서 사용가능함
이 상태에서 터미널에서 parcel index.html 하면 위의 사진처럼 실패함
왜냐문!! 해당 모듈은 test라는 프로젝트 내에서만 들어있는것이고 운영체제의 터미널 내에 설치된 것이 아님
따라서 운영체제의 터미널은 parcel이라는 명령어를 인식할 수가 없슴
현재 프로젝트 내에서 parcel이라는 명령어를 사용하기 위해 아래와 같이 코드 수정
"scripts": {
"dev": "parcel index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.5"
},
이렇게 수정해주고 아래의 코드를 터미널에 입력
npm run dev
열려진 서버를 닫으려면
ctrl + c220224
로컬 프로젝트 내부에 개발의존성으로 parcel-bundler 설치해서 사용하려고 하니까
parcel명령어가 자꾸 오류 나서 그냥 글로벌하게 설치해줫음..
아마 node_modules 위치?? 경로상 문제가 계속 생기는듯.. 파일 이름 바꾸거나 위치 바꾸니까 계속 안되길래 짜증나서 기냥 글로벌 갈김.. parcel 공홈도 글로벌로 설치하래 ^^ 어차피 자주 쓰니까 상관없나??
NPX란?
npx
npm에서 제공하는 하나의 도구.
npm을 더 편하기 사용하기 위해 탄생한 npx는 npm을 통해 설치하는 모든 종류의 Node.js 기반의 파일을 간단하게 설치하고 실행할 수 있도록 한다.
npx는 다음과 같은 역할
1. 기본적으로 실행되어야할 패키지가 경로에 있는지 먼저 확인합니다.(예: 우리의 프로젝트);
2. 경로에 제대로 있다면, 그대로 실행합니다;
3. 그렇지 않다면 패키지는 설치되어 있지 않다는 걸 의미하고, npx가 최신 버전의 패키지를 설치를 한 후에 실행합니다;npx 사용이유
과거 npm으로 패키지 설치 시 두 가지 케이스 존재했음
- 전역으로 패키지 설치하여 의존성 라이브러리들을 전체적으로 관리
- 특정 프로젝트에만 의존성 라이브러리 설치
글로벌 모듈은 혼란을 야기한다.
npm 을 통해서 모듈을 설치할 때, 한 가지 옵션을 주게 되면 매 프로젝트마다 모듈을 설치해 줄 필요가 없고 그저 내 컴퓨터 안에 글로벌한 공간에 모듈을 설치해 프로젝트마다 같은 모듈을 공유해서 사용 가능
npm install 모듈이름 -g
NPX 이용하여 github 에서 내려받기
npx degit Zueon/parcel-basic [새로운 프로젝트 이름]깃헙 레파지토리 Zueon/parcel-basic 의 내용을 새로운 프로젝트 이름으로 생성한다.
→ 새롭게 버전관리가 가능하다
→ parcel-bundler 템플릿이나 webpack 템플릿을 새로운 버전으로 받아서 새 프로젝트 시작하는데 적합함
또는 수동으로 깃헙에서 zip파일을 다운받아서 압축해제하고 사용해도 됨
parcel-bundler
parcel 공홈
webpack
웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.
프로젝트에 webpack 설치하기
npm i -D webpack webpack-cli webpack-dev-server@next- webpack : 번들러가 동작하기 위한 핵심 패키지
- webpack-cli : cli를 지원해주는 패키지 ( parcel-bundler에서는 cli 자동 제공)
- webpack-dev-server : 개발 특화된 페이지 오픈을 위한 서버 패키지
webpack 패키지 설치 후 package.json 파일 스크립트 정리
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},webpack-cli 패키지를 사용함으로써 위와 같은 명령어를 사용할 수 있게 되었다.
이 때, webpack-dev-server --mode development 명령어를 이용하여 개발 서버를 오픈하기 위해서는 parcel-bundler와는 다르게 구성파일을 하나 생성해주어야 한다.
webpack.config.js 라는 이름으로 파일을 생성해주고 해당 파일 내부에 웹팩 구성옵션을 제공해주면 된다.
→ 세세한 설정을 제공하기 때문에 규모가 큰 프로젝트에서 활용하기 유용함 (parcel은 비교적 소규모)
webpack.config.js 파일
// import
const path = require('path');
// export
module.exports = {
// parcel index.html
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './js/main.js',
// 결과물 (번들)을 반환하는 설정
output: {
// path: path.resolve(__dirname, 'dist'), // return /Users/jueon/Desktop/study/front/webpack-template-basic/dist
// filename: 'main.js',
clean: true,
},
};path 모듈
path 모듈은 내장 모듈이므로 별도의 npm 설치 없이 바로 사용 가능
path.resolve([..paths])
절대경로를 만들어서 반환한다.
dirname, filename
노드에서는 모듈 관계가 있는 경우가 많아 현재 파일의 경로나 파일명을 알아야하는 경우가 많다. 노드는 __dirname , __filename 이라는 키워드로 경로에 대한 정보를 제공한다. (노드에서 제공하는 전역적인 변수) 파일에 해당 키워드를 넣어두면 실행 시 현재 파일명과 파일 경로로 바뀐다.
아래 예제에서 js파일의 위치는
/Users/jueon/Desktop/study/front/webpack-template-basic/js 이다.
// file 명을 포함한 절대경로
console.log(__filename); ///Users/jueon/Desktop/study/front/webpack-template-basic/js/main.js
// file 명을 제외한 절대 경로
console.log(__dirname); ///Users/jueon/Desktop/study/front/webpack-template-basic/jshtml-webpack-plugin: 최초 실행될 HTML 파일(템플릿)을 연결
copy-webpack-plugin: 정적 파일(파비콘, 이미지 등)을 제품(dist) 폴더로 복사
sass-loader: SCSS(Sass) 파일을 로드
postcss-loader: PostCSS(Autoprefixer)로 스타일 파일을 처리
css-loader: CSS 파일을 로드
style-loader: 로드된 스타일(CSS)을 <style>로 <head>에 삽입
babel-loader: JS 파일을 로드
@babel/core: ES6 이상의 코드를 ES5 이하 버전으로 변환
@babel/preset-env: Babel 지원 스펙을 지정
@babel/plugin-transform-runtime: Async/Await 문법 지원
sass: SCSS(Sass) 문법을 해석(스타일 전처리기)postcss: Autoprefixer 등의 다양한 스타일 후처리기 패키지autoprefixer: 스타일에 자동으로 공급 업체 접두사(Vendor prefix)를 적용하는 PostCSS의 플러그인
