새로 알게된 것

• 참고: 프론트엔드 개발환경의 이해

npm

node 설치 버전

• 두 가지 버전을 지원(짝, 홀수)
• 짝수버전: 안정적, 신뢰도 높음(LTS, Long Term Support), 장기간 지원하는 것
• 홀수버전: 불안정할 수 있음. 최신 기능 지원

폴더 만들기

• 폴더 안에서 npm init을 하면 package.json이 만들어짐
• 'script' 안에서 npm 기본 명령어(ex.install, start)가 아닌, 커스텀 스크립트(ex.build)를 쓰고 실행할 때는 npm run을 앞에 붙여줘야 함

패키지 설치

방법1. CDN(Contents Delivery Network, 컨텐츠 전송 네트워크) 이용하기

• 외부 라이브러리를 직접 가져오는 방식
• 장점: 간단함
• 단점: CDN 서버 장애로 인해 외부 라이브러리를 사용할 수 없게 되면, 우리 어플리케이션 서버가 정상적이어도 필수 라이브러리 사용이 불가하면 웹 어플리케이션도 돌아가지 않게 됨(!!!)

방법2. 직접 다운로드

• 라이브러리 코드를 프로젝트 폴더에 직접 다운받기
• 장점: CDN 장애와 독립적으로 웹 어플리케이션을 제공 가능
• 단점: 라이브러리 업데이트를 따라 직접 다운로드 및 버전 하위호환 맞추는 것 번거로움

방법3. NPM을 이용

• npm으로 의존성을 관리하기(자동화)

node.js가 버전을 관리하는 방식

• ^16.12.0

• 유의적버전(Sementic Version): 버전 번호를 관리하기 위한 규칙
  - 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우

  • 부 버전(Minor Version): 기존 버전화 호환되면서 기능이 추가된 경우
  • 수 버전(Patch Version): 기존 버전과 호환되면서 버그가 수정된 경우

• 버전의 범위
  - 특정 버전을 사용: 1.2.3

  • 특정 버전보다 높거나 낮을 경우: >1.2.3, >=1.2.3, <1.2.3, <=1.2.3
  • 틸드(~)와 캐럿(^)이용: ~1.2.3, ^1.2.3
    • 틸트(~): 마이너 버전이 명시되어 있으면 패치 버전을 변경함(ex.~1.2.3:1.2.3부터 1.3.0미만)
      • 캐럿(^): 정식 버전에서 마이너와 패치버전을 변경.(ex.1.2.3:1.2.3부터 2.0.0미만), 정식버전 미만인 0.x버전은 패치만 갱신함.

• !!! 과거에는 node.js가 틸트(~)로 버전관리를 했는데 캐럿(^)으로 변경하였음

• WHY?
  보통 라이브러리 정식 릴리즈 전에는 패키지 버전이 수시로 변경됨. 0.1에서 0.2로 부버전이 변하더라도 하위 호환성을 지키지 않고 배포하는 경우가 빈번했음.

• Before: ~0으로 버전 범위를 표기하면 하위호환성을 지키지 못하는 0.2로 업데이트 되어버리는 문제 발생가능.

• After: ^0.0으로 표기한다면 0.0.0 ~ 0.1.0 미만 내에서만 버전을 사용하도록 제한하여, 하위호환성을 유지할 수 있음.

npm vs npx

• npx는 노드 패키지를 실행하는 명령어
  - npm은 명령어 커스텀을 위해서는 package.json의 scripts에 정의하고 npm run {script} 형태로 사용할 수 있음.
  • 설치한 패키지를 사용하려면 run script에 추가하거나 npx를 이용해야 함.
    - node_modules에 이미 설치되어 있는 A를 실행하는 방법
    • 방법1) 직접 실행: node_modules/.bin/A
      • 방법2) npx 명령어로 실행: npx A

webpack

• 전역 스코프로 함수를 사용하면, 다른 파일에서 동일한 이름의 함수명을 사용하면 충돌이 발생함. 의도대로 작동하지 않을 수 있음. 이런 문제를 예방하기 위해 스코프를 사용함. 함수 스코프를 만들어 외부에서 안으로 접근하지 못하도록 막음.
• 즉시실행함수(IIFE)로 감싸면, 세부 구현은 감추고 필요한 모듈만 외부로 노출시켜 모듈화할 수 있음. OOP의 캡슐화이기도 함.

즉시 실행함수 표현(IIFE, Immediately Invoked Function Expression)

• 참고: [MDN] IIFE

(function () {
	statements
})();

• 정의하자마자 즉시 실행되는 JS 함수
• Self-Executing Anonymous Function으로 알려진 디자인 패턴

1. 괄호로 둘러쌓인 익명함수
   : 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있음, IIFE 함수 안으로 다른 변수가 접근하는 것을 막을 수 있음
2. 즉시 실행 함수를 생성하는 괄호()
   : JS엔진은 함수를 즉시 해석해서 실행함

다양한 모듈 스펙

• IIFE 방식으로 JS 모듈을 구현하는 대표적인 명세: AMD, CommonJS
  - AMD: Asynchronous Definition
  : 브라우저처럼 외부에서 JS를 로딩해야 하는 곳(비동기로 로딩되는 환경)에서 사용

  • UMD: Universal Module Definition
    : AMD 기반으로 CommonJS까지 지원하는 통합형태

• ES2015에서 표준 모듈 시스템 출시
  => 이후로 babel과 webpack을 이용해 표준모듈시스템을 사용하는 것이 일반적임

• IE를 포함한 몇 브라우저에서는 모듈을 사용 못함.

• 크롬에서는 버전 61부터 모듈 시스템을 지원함.

• BUT 브라우저에 무관하게 모듈을 사용하고 싶을 때, webpack 나오게 됨

// index.html
<script type="module" src="src/app.js"></script>

• 모듈로 개발을 하게 되면 파일간의 의존 관계가 생김
• 하나로 합쳐진 파일을 번들이라고 부름. 그래서 웹팩을 번들러라고 부름.

webpack

webpack config 파일에서 쓰는 modules.exports는 node의 module임

• mode: propduction || developements
• entry: 엔트리포인트 = 시작점
• output: entry를 찾아서 모든 JS를 하나로 만든 다음에 내보내는 곳
• path: path는 절대경로를 계산해주는 resolve를 씀

로더

• 웹팩은 모든 파일을 모듈로 바라봄. JS 모듈 뿐만 아니라 스타일시트, 이미지, 폰트도 모두 모듈로 보기 때문에 import 구문으로 JS 코드 안으로 가져올 수 있음
• 웹팩의 로더는 모든 파일을 JS의 모듈로 만들어줌.
  • TS 같은 언어를 JS 문법으로 변환해주거나
  • 이미지를 data URL 형식의 문자열로 변환해줌.
  • CSS 파일을 JS에서 직접 로딩할 수 있게 해줌.

커스텀 로더 만들기

• test에 해당되는 모든 파일에 한번씩 use 안에 들어있는 로더가 실행됨.

// webpack.config.js
  // ...
    module: {
        rules: [
            {
                // 로더가 처리해야 할 파일들의 패턴(정규표현식)
                test: /\.js$/,
                // 사용할 로더를 명시함
                use: [
                    path.resolve('./my-webpack-loader.js')
                ]
            }
        ]
    }

자주 사용되는 로더

1. css-loader

• css를 js로 변경해줌

2. style-loader

• js로 변경된 css코드를 HTML에 주입시켜서 브러우저의 스타일이 적용될 수 있도록 만들어줌
• !!! use 안에서 로더가 사용되는 순서는 뒤 => 앞
  • 먼저 css를 js로 변경해줘야 하기 때문에 css-loader 사용
  • 그 이후 CSSOM을 만들어주기 위해 style-loader를 사용

  // webpack.config.js
  // ...
    use: [
    'style-loader',
    'css-loader'
    ]

3. file-loader

• 이미지 파일을 모듈로 사용할 수 있도록 변환하는 역할
• 사용한 파일을 output 경로로 이동시켜줌

   {
      test: /\.png$/,
      loader: 'file-loader',
      options: {
      publicPath: './dist/',
      // file-loader가 파일을 output에 복사할 때 쓰는 이름
  	  // 캐쉬 무력화를 위해 매번 달라진 hash값을 쿼리스트링으로 붙여줌
      name: '[name].[ext]?[hash]'
   },

4. url-loader

• 파일을 base64로 인코딩해서 그 결과를 js문자열로 변환함
• 처리할 파일의 크기 제한을 둬서, 일정 파일 미만만 처리하고 나머지는 file-loader로 위임함

  {
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader: 'url-loader',
    options: {
    publicPath: './dist/',
    name: '[name].[ext]?[hash]',
    // 20kb 미만의 파일은 js 문자열로 변환하고 그 이상은 file-loader가 실행함
    limit: 20000, //20kb
    },

    }