프론트엔드 개발환경의 이해와 실습

npm with node jswebpack 핵심 개념 (loader, plugin 만들기)babel 핵심 개념, 웹팩과 통합하는 방법eslint with prettierwebpack 심화 (api server 연결, 번들 최적화)패키지들을 최신 스펙으로 개발 (버전을

로더의 역할 웹팩은 모든 파일(JS, CSS, 이미지, 폰트 등)을 모듈로서 바라보기 때문에, import 키워드를 통해 자바스크립트 코드 안으로 가져올 수 있게 해준다 타입스크립트같은 다른 언어를 자바스크립트 문법으로 변환해준다 이미지를 data URL 형식의 str

플러그인 로더 : 파일 단위로 처리, 함수로 정의 플러그인 : 번들된 결과물을 처리, 클래스로 정의 실제 플러그인을 새로 만들 일은 거의 없고, 웹팩에서 직접 제공하는 플러그인을 사용하거나 라이브러리를 찾아 사용하는 등 있는 것을 활용하는 방식을 주로 채택한다.

바벨(Babel)은 최신 JavaScript 문법을 이전 버전의 JavaScript로 트랜스파일 해주는 도구이다. 바벨을 통해 크로스 브라우징이 가능하다. 빌드와 트랜스파일 빌드 : 코드를 실행 가능한 형태로 변환하는 것 (컴파일, 패키징, 배포 등의 단계를 거침)

Create React App(CRA)은 React 애플리케이션을 빠르게 구성할 수 있는 도구입니다. CRA를 사용하면 자동으로 바벨(Babel) 설정이 적용되며, 최신 자바스크립트 문법(ES6+)을 사용할 수 있습니다. 하지만 모든 브라우저에서 ES6+ 문법이 지원되

코드의 가독성, 유지보수를 포함해서 품질을 유지하기 위해서는 자동화된 도구를 사용하여 코드 스타일을 관리하고 오류를 검출해야 한다.이를 위해 ESLint와 같은 린트 도구를 사용할 수 있다.린트 도구가 검사해주는 항목은 크게 두 가지이다.포맷팅 : 일관성과 관련 (프리

우리는 이전에 웹팩(Webpack)이란 모듈 번들러(module bundler)를 사용하여 프로젝트를 빌드하는 방법을 배웠습니다. 그러나 이번에는 좀 더 나아가, 웹팩의 다양한 기능과 설정을 알아보겠습니다.개발 중인 애플리케이션을 브라우저에서 실시간으로 확인할 수 있다