웹팩 개발 서버 배경 지금까지는 브라우져에 파일을 직접 로딩해서 결과물을 확인했다. 인터넷에 웹사이트를 게시하려면 실제 서버를 기동하여 이 파일을 읽고 요청한 클라이언트에게 제공해야 한다. 개발환경에서도 이와 유사한 환경을 갖추는 것이 좋다. 운영환경과 맞춤으로써 배포시 잠재적 문제를 미리 확인할 수 있다. 게다가 ajax 방식의 api 연동은 c...

API 연동 프론트엔드에서는 서버와 데이터 주고 받기 위해 ajax를 사용한다. 보통은 api 서버를 어딘가에 띄우고(혹은 로컬 호스트에 띄우고) 프론트 서버와 함께 개발한다. 개발 환경에서 이러한 api 서버 구성을 어떻게 하는지 알아 보자. 목업 API 1: devServer.before 웹팩 개발 서버 설정 중 before 속성은 웹팩 서버에 ...

eslint 자동화 린트는 코딩할 때마다 수시로 실행해야하는데 이러한 일은 자동화 하는 것이 좋다. "깃 훅을 사용하는 방법"과 "에디터 확장 도구"를 사용하는 방법이 있다. 깃 훅을 사용하는 방법 소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용하는 것이 좋다. 커밋 전, 푸시 전 등 깃 커맨드 실행 시점에 끼여들수 있는 훅을 제공한다. husky...

Prettier 프리티어는 코드를 "더" 예쁘게 만든다. ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 프리티터는 좀 더 일관적인 스타일로 코드를 다듬는다. 반면 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다른 점이다. 설치 및 사용법 프리티어 패키지를 다운로드 하고 npm i -D prettier 코드를 아래 처럼 작성...

babel이 es6이상의 자바스크립트 코드를 es5로 변경해주는 것과 같이 sass 또한 sass 문법으로된 코드를 css로 바꿔준다. sass에는 두 가지 sass, scss 가 있다. 만약 sass(문법) + css 코드까지 사용할거면 scss 를 사용한다. sass-loader 관련해서는 여기 를 참고하자. 아래 명령어로 설치를 하면 된다...

1) 린트 1) 배경 오래된 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다. 보푸라기가 많으면 옷이 보기 좋지 않은데 코드에서도 이런 보프라기가 있다. 들여쓰기를 맞추지 않은 경우, 선언한 변수를 사용하지 않은 경우…… 보프라기 있는 옷을 입을 수는 있듯이 이러한 코드로 만든 어플리케이션도 동작은 한다. 그러나 코드의 가독성이 떨어지고 점...

1) 배경 크로스 브라우징 브라우져마다 사용하는 언어가 달라서 프론트엔트 코드는 일관적이지 못할 때가 많다. 스팩과 브라우져가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못한다. 작년까지만 해도 사파리 최신 브라우져는 Promise.prototype.finally 메소드를 사용할 수 없었다. 프론트엔드 개발에서 크로스브라우징 이...

바벨 사용법과 웹팩 통합 프리셋 사용하기 바벨은 목적에 따라 몇 가지 프리셋을 제공한다. preset-env preset-flow preset-react preset-typescript preset-env는 ECMAScript2015+를 변환할 때 사용한다. 바벨 7 이전 버전에는 연도별로 각 프리셋을 제공했지만(babel-re...

자주 사용하는 웹팩 플러그인 개발하면서 플러그인을 직접 작성할 일은 거의 없었다. 웹팩에서 직접 제공하는 플러그인을 사용하거나 써드파티 라이브러리를 찾아 사용하는데 자주 사용하는 플러그인에 대해 알아보자. BannerPlugin 번들 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다. webpack.config.js const web...

플러그인 웹팩에서 알아야 할 마지막 기본 개념이 플러그인이다. 1) 플러그인의 역할 로더가 파일 단위로 처리하는 반면, 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화한다거나 특정 텍스트를 추출하는 용도로 사용한다. 2) 커스텀 플러그인 만들기 웹팩 문서의 Writing a plugin을 보면 클래스로 플러그인을 정의 하도록 한다...