빌드환경

지니씨·2022년 2월 17일
0

프론트엔드

목록 보기
20/87

node

LTS 버전이란?
개발 환경의 변화로 인해 문제가 나타날 수 있다.
최신 버전은 새로운 기능이 포함되어있지만 안정성에대한 검증이 완벽히 되지 않은 버전이다.
LTS 버전은 안전성이 보장된 최신 버전이라 생각할 수 있다.

nvm

  1. 설치
    brew 설치 https://velog.io/@jinic/brew
brew install nvm
  1. 설정
brew info nvm // 명령어에서 안내대로 추가 진행

https://stackoverflow.com/questions/53118850/brew-install-nvm-nvm-command-not-found

// 생성
touch ~/.bash_profile || touch ~/.zshrc
// 작성(brew info nvm 안내대로 진행)
vi ~/.bash_profile || vi ~/.zshrc
// 재실행
source ~/.bash_profile || source ~/.zshrc

Oh my Zsh 설치하면 재 설정 필요

  1. node 버전 설치/변경/확인
nvm install --lts
nvm install x.x.x
nvm use x.x.x
node -v

// nvm 으로 설치한 node 버전 확인
nvm list

Build Tool

https://buddy.works/blog/webpack-vs-gulp
https://kdydesign.github.io/2017/07/27/webpack/

Gulp

gulpfile.js 파일을 기반으로 실행하는 Task Runner
Task Runner = 반복 가능한 특정 작업들을 단순 자동화한 것
(배포, 테스트와 같은 미리 정의해 놓은 어떤 작업들을 자동화하여 실행)
빌드속도가 빠름, 구축 시간이 적게 걸림
작은 규모의 개인프로젝트에서 사용

Webpack

package.json의 script를 기반으로 동작하는 Package Bundler
Package Bundler = 종속성을 가진 어플리케이션 모듈을 정적인 소스로 재생산
(소스들을 하나의 패키지화 하는 것)
Webpack = Gulp + 의존성 관리 기능 + 솓고 빠름

entry
의존성의 시작점
Webpack은 모든 파일을 모듈로 관리한다.
Webpack에서 모듈이 많아질수록 서로의 의존성은 높아진다.

output
Webpack을 이용하여 빌드하고 번들된 파일의 위치를 지정

loader
파일을 해석하고 변환하는 과정에 관여하여 모듈 처리
Webpack은 javascript밖에 알지 못하므로 css,scss,babel,file 등은 loader로 등록해줘야 Webpack이 빌드할 때 인식을 할 수 있다.

plugin
해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리한다.
결과물에서 스타일 코드만 뽑아서 별도 css 파일로 만들어 역할에 따라 파일을 분리하는것이 가능하다.


자바스크립트 패키지 매니저

npm

Node.js의 기본 패키지 관리자
command-line client인 npm과 온라인 데이터베이스인 npm registry로 이루어져 있으며, 일반적으로 command-line client를 npm이라고 생각하는데, 실제로 npm에는 npm registry까지 포함되어 있습니다.

yarn

페이스북에서 만든 자바스크립트 패키지 관리자
npm과 같은 기능을 수
npm에 단점(속도, 안정성, 보안성)을 느껴 만들어 짐


기타

Babel

Lint

Prettier

profile
하루 모아 평생 🧚🏻

0개의 댓글