webpack, loader

권세진·2021년 3월 3일

프론트엔드 지식

목록 보기

1/3

요즘 youtube 검색 api를 사용해서 웹을 제작하고 있다.
그런데 문제가 api key를 숨겨서 git에 배포해야하는데
어떻게 숨길 것인가에 대해서 고민이 됐다.

대략 방법은 2가지로 생각을 했는데
1. webpack을 이용해 nodeJs의 환경변수를 설정해주는 dotenv 패키지 활용
2. github secrets을 이용하고 github action으로 배포
그런데 어차피 프론트엔드 개발자로서 웹팩은 필수라
웹팩을 사용하는 1번 방법으로 시도해보기로 했다.
key를 숨기는 방법은 이 블로그에 정리가 잘 되어있다.

인 줄 알았는데.... 1번 방법에 큰 문제가 있었다.
결론적으로는 프론트에서 AJAX를 api키를 포함한 형태로 request를 보낸다면 api키를 숨기는 것이 불가능하다.(개발자 도구에서 다 보임)

이 문제에 대한 해결법은 여기에 정리했다.

그리고 여태까지 그냥 웹팩을 쓰기만 했지 자세히 모른다는 생각이 들어서
웹팩에 대해서 자세히 공부해 보기로 하였다.

🧶 webpack

webpack 등장배경

하나의 entry js파일에 많은 js 모듈이 종속됨으로써 불러와야하는 파일들이 많아졌고 웹 페이지 부하의 원인이 되었다.

그래서 최적화를 위해 모든 파일을 모아 하나의 js 파일로 만들 수 없을까? 라는 고민에서 웹팩이 등장하게 되었다.

webpack이란?

webpack은 entry 파일에서부터 종속된 모든 파일들을 하나의 파일로 합쳐주는 번들러다. (nodeJs를 사용)

웹팩은 정말 다양하게 활용할 수 있다. nodeJs를 기반으로하기 때문에 es 환경에서 nodeJs 관련 코드를 사용할 수 있게 한다던지...(위 youtube api 예시처럼)

여튼 웹팩은 css 파일이나 심지어 image 파일도 모듈로 보고 javascript 언어로 변환할 수 있고 이를 통해 모든 파일을 하나의 js 파일에 모으는 것이 가능하다. 이게 어떻게 가능한 것일까?

이제 로더가 등장한다.

💕 로더의 두둥 등장

로더의 예시 css-loader, style-loader, babel

로더(loader)란?

하나의 언어로 작성된 코드를 입력으로 받아

다른 프로그래밍 언어로 동등한 소스 코드를 만들어내는 컴파일러의 일종

로더의 존재 이유
1. 호환성을 위해 높은 버전의 언어로 작성된 코드를 낮은 버전의 언어로 변환한다. (최신 A 언어 -> 구버전 A 언어)
2. css, image파일 등등 모든 것을 js파일 하나에 담기 위해 언어를 변환
  
  (B 언어 -> A언어)

로더 vs 트랜스파일러

로더와 트랜스파일러는 비슷한 개념인데

로더는 웹팩 환경에서 범용적으로 쓰이는 용어이고

트랜스파일러는 최신 es문법을 호환성을 위해 이전 버전의 문법으로 바꾸는 로더의 한 종류다.(babel)
참고

로더가 트랜스파일러를 포함한다고 생각하면 된다.

로더 예시 알아보기

css-loader

css를 javascript 코드로 변환 시켜줌

style-loader

css-loader에 의해서 변환된 javascript 코드는 변환만

되었을 뿐 DOM에 적용되는 과정은 거치지 않았다.

그래서 DOM에 적용시켜주는 로더를 style-loader라고 한다.

항상 css-loader 이후 style-loader가 적용되어야함

//ex
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], 
        // 뒤에서부터 앞으로 로더가 작동함.
        // (css-loader -> style-loader)
      },
    ],
  },
}