웹팩 4 [개발환경] 프론트엔드 개발환경의 이해와 실습 강좌 후기 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., 웹팩, 바벨, 린트 같은 프론트엔드 기술을 이해하고 실무에 적용해 보세요! [사진] “웹팩은 팀에 www.inflearn.com 인프런에 올라온 프론트엔드 개발환경의 이해와 실습 강조 후기입니다. 대부분의 주니어 개발자는 다음과 같은 이유로 개발환경 세팅은 접해보지 못했으리라 생각합니다. 이미 다른 사람에 의해 되어있다. (프로젝트 중간에 합류) 프론트 엔드도 모르는데 개발환경 세팅까지 할 여유는 없다. 그냥 되어있는대로 써도 동작하기에 상관없다. 위의 3가지는 솔직히 제 얘기입니다. 새로운 프로젝트를 시작했.. 2021. 7. 23. [리액트] 프로젝트에 웹팩을 적용해보자 #3 (feat.타입스크립트) 2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트) 2021.07.06 - [개발/리액트] - [리액트] 프로젝트에 웹팩을 적용해보자 #2 (feat.타입스크립트) 이전 포스트에 이어서 이번 포스트에서는 리액트를 개발하기 위한 webpack-dev-server의 새로운 모습인 webpack serve를 적용하고 핫로딩을 적용해보도록 하겠다. Webpack 4에서는 webpack-dev-server를 설치하여 사용했었다. 하지만 Webpack 5부터는 별도의 라이브러리를 설치하지 않고 Webpack에서 바로 사용한다.(하지만 아직 공식문서에는 webpack-dev-server를 설치하라고 나와있다. 굳이 필요없다) npx webpack serve.. 2021. 7. 6. [리액트] 프로젝트에 웹팩을 적용해보자 #2 (feat.타입스크립트) [리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트) 이번 시리즈 "프로젝트에 웹팩을 적용해보자"는 webpack5를 통해 타입스크립트, 리액트로 만들어진 프로젝트를 빌드하고 개발환경에서 사용할 수 있도록 세팅하는 방법에 대한 시리즈이다. 때는 2 all-dev-kang.tistory.com 이전 포스트에 이어서 계속 진행해보겠다. 일단 로그를 보자 webpack mode에 대한 WARNING과 React에 대한 ERROR 있다. 첫번째 WARNING은 webpack.config.js 안에 mode: "development" 값을 넣어서 처리하면 된다. mode를 통해서 development 또는 production 으로 셋팅할 수 있다. 이 값을 통해 API 서버나 테스트 UI 또는 빌.. 2021. 7. 6. [리액트] 프로젝트에 웹팩을 적용해보자 #1 (feat.타입스크립트) 이번 시리즈 "프로젝트에 웹팩을 적용해보자"는 webpack5를 통해 타입스크립트, 리액트로 만들어진 프로젝트를 빌드하고 개발환경에서 사용할 수 있도록 세팅하는 방법에 대한 시리즈이다. 때는 2020년 6월, 내 업무는 기존 레거시코드를 리액트, 타입스크립트로 전환하는 것이었다. 전환과 동시에 개발환경의 셋팅도 기본적인 것만 되어있어서 주업무가 아님에도 설정환경을 건드려 작업하고 또 공부를 해야만 했었다. 그때 Webpack에 대해 기본적인 공부와 수정을 했었기에 개인 프로젝트에 Webpack를 도입하는건 아주 간단한 일이라고 생각해왔다. 그리고 이제 1년이 지나 사이드 프로젝트를 Webpack으로 빌드할 시기가 되었고 기존의 방식으로 설정을 하고 빌드했더니만 아래와 같은 에러를 내뱉으면 동작을 안한다... 2021. 7. 6. 이전 1 다음
