BEST

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요.

(4.9) 수강평 214개

수강생 3,036명

난이도 중급이상

수강기한 무제한

김정환

새소식

6 개

관리

작성

김정환
2022. 02. 01.
패키지 버전이 달라 고생하시는 분은 수업에서 사용한 패키지 정보를 참고해 주세요
https://github.com/jeonghwan-kim/lecture-frontend-dev-env/blob/master/package.json
1
김정환
2020. 11. 04.
terser-webpack-plugin 에러 해결 방법입니다.
이 강의는 웹팩 4 버전을 사용하는데요 최근 5 버전으로 매이저 업데이트를 했습니다. 웹팩과 관련되 플러그인들도 호완성을 위해 업데이트 버전을 내 놓는데요, 그중에 수업에서 사용하는 terser-webpack-plugin도 4에서 5로 업데이트 되었습니다. 이로 인해 오류 메세지를 마주하신 분들이 계실텐데요, 아래 "쭁"님이 공유해 주신 방법을 참고해 주시기 바랍니다.

오류메세지

"TypeError: Cannot read property 'javascript' of undefined"

Hi you are using Webpack 4 and Terser ^5.0.0. This version of Terser is for Webpack 5, you need to set version "terser-webpack-plugin": "^4.2.3", in package.json file

해결 방법

package.json에서 terser-webpack-plugin버전을 5점대에서 ^4.2.3 로 바꿈

출처: https://www.inflearn.com/questions/86666
0

김정환

2020. 10. 12.

copy-webpack-plugin 문제가 발생하신 분은 꼭 읽어주세요.(copy-webpack-plugin 메이저 업데이트 2020-05)

copy-webpack-plugin 사용시 웹팩 빌드가 안되는 문제가 발생할 수 있습니다.

원인

copy-webpack-plugin 메이저 업데이트로 인한 하위 호완성 안됨

기존 생성자 함수의 시그니처가 변경되었습니다.

- 기존: CopyPlugin(patterns, options)

- 변경: CopyPlugin({ patterns, options })

해결방법

// 기존: 
new CopyPlugin([
      {
        from: "./node_modules/axios/dist/axios.min.js",
        to: "./axios.min.js", // 목적지 파일에 들어간다
      },
    ]),

// 변경 (이렇게 변경하세요)
new CopyPlugin({
  patterns: [ // patterns 키를 추가합니다.
      {
        from: "./node_modules/axios/dist/axios.min.js",
        to: "./axios.min.js", // 목적지 파일에 들어간다
      },
    ]
}),

김정환
2020. 07. 20.
[글소개] "웹팩 개발 서버로 부족하다면 webpack-dev-middleware를 사용해 보자"
웹팩 개발 서버에 이어 webpack-dev-middleware를 소개한 글입니다.

"웹팩 개발 서버로 부족하다면 webpack-dev-middleware를 사용해 보자" - 김정환블로그

웹팩 개발 서버에서도 내부적으로 이 미들웨어를 사용하고 있는데요, 개발 서버를 좀 더 커스터마이징 할 때 사용하는 패키지 입니다.
1
김정환
2020. 04. 07.
수업에서 사용하는 에디터 VSCode에 대한 영상을 만들었어요

https://youtu.be/_QCNqV_EfzE

VSCode 사용하시는 분들께 소소한 팁을 공유해 드립니다.
1
김정환
2020. 04. 02.
[질문가이드] 이렇게 질문해 보세요
공부하시다가 막히는 부분이 생기면 "질문"을 많이 활용해 주세요.

1. 강의 설명이 부족해서 이해하기 어려운 부분이 있다면 주저말고 질문해주세요.

2. 실습하다가 모르는 오류나 환경문제가 있다면 코드 전체를 질문과 함께 올려주세요.
깃헙에 실습코드를 올린 뒤 그 링크를 질문에 남겨주시면 훨씬 빠르게 답변 드릴수 있습니다.

실습코드를 깃헙에 올릴 때는 아래 설정도 추가해 주시면 좋습니다.

1. 깃헙 공개 저장소에 올려주세요.
Settings > Options > Danger Zone > Make this repository public 설정

2. Collaborator로 저를 추가해 주세요. 상황에 따라서 제가 코드를 수정해서 깃헙에 올려드려야 하는 경우도 있습니다.
Settings > Manage Access > Invite a collaborator > 제 이메일(ej88ej@gmail.com)을 초대

0