programming study/Front-end (28) 썸네일형 리스트형 Webpack - 핫로딩 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 핫 모듈 리플레이스먼트(HMR) 변경된 모듈만 새로고침 하는 것 나머지 모듈은 유지됨 화면 개발시 효율적으로 빠르게 할 수 있다. 설정 webpack.config.js의 devServer 객체에 hot 추가 ... // node의 모듈 시스템 module.exports = { ... devServer: { overlay: true, stats: "errors-only", // 개발 서버 객체를 받음 before: (app) => { // express에 미들웨어 추가 // urlRoot: api로 요청 오는 것은 모커가 처리, pathUrl app.use(ap.. Webpack - 웹팩 개발 서버, API 서버 연동 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 웹팩 개발 서버 인터넷에 웹 사이트를 게시하려면 서버 프로그램으로 이 파일을 읽고 요청한 클라이언트에게 제공해야 함 개발환경에서도 이와 유사한 환경을 갖추는 것이 좋다. 배포시 잠재적 문제를 미리 확인할 수 있다. ajax 방식의 api연동은 cors 정책 때문에 반드시 서버가 필요하다. webpack-dev-server 패키지로 개발용 서버를 사용 가능 2. webpack-dev-server 기능 소스코드를 개발용 서버에서 실행시킬 수 있다. 코드 변화를 실시간으로 감지하여 적용한다. 설치 npm i -D webapck-dev-server를 입력하여 설치 사.. ESLint & Prettier - 자동화 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. VSCode Extention ESLInt Extention 작성중인 코드를 실시간으로 ESLint 규칙에 위배되지 않는지 검사한다. 설정 -> 작업영역에서 프로젝트별로 에디터를 세팅 저장할 때마다 ESLint를 실행하여 코드를 자동으로 검사 후 수정한다. settings.json { "editor.codeActionsOnSave": { "source.fixAll.esLint": true } } Reference [인프런]프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) Prettier - 역할, 설치 및 사용법 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 역할 코드를 더 예쁘게 만든다. ESLint의 포매팅과 겹치지만 더 일관적인 스타일로 다듬는다. 코드 품질 관련 기능은 하지 않음 ESLint가 고칠 수 없는 코드도 고쳐준다. 긴 문장 자동 수정 2. 설치 및 사용법 설치 npm i -D prettier 사용법 # CLI에서 prettier의 결과 출력 npx prettier [파일명] # 파일에 prettier 적용 npx prettier [파일명] --write ESLint와 통합 방법 eslint-config-prettier: Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 함 npm i -D.. ESLint 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 등장 배경 lint: 보푸라기 코드의 작은 보푸라기를 제거하는 것 가독성을 높이는 것 예상하지 못한 런타임 버그를 예방 검사하는 항목 포맷팅: 코드의 일관성(들여쓰기, 줄길이) 코드품질: 코드의 오류 유발 가능성 줄이기 2. 설치 및 사용법 설치 npm i -D eslint 사용법 .eslintrc.js: ESLint의 설정 파일 Rules를 입력하여 규칙 설정 npx eslint 파일명을 입력하여 규칙에 위배되는지 체크 --fix:규칙에 어긋나는 것을 바로 수정하는 옵션 --init: 어떻게 사용할 것인지를 CLI로 체크하여 .eslintrc.js 설정 //.. Babel - 바벨 사용법과 웹팩 통합 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 프리셋 사용하기 preset-env: ECMAScript2015+를 변환할 때 사용 npm i @babel-env를 입력하여 설치 preset-flow preset-react preset-typescript: TypeScript 코드를 ES5로 변환 2. 타겟 브라우저 프리셋을 사용할 때 특정 브라우저를 지정하여 지원하도록 할 수 있다. babel.config.js module.exports = { presets: [ ['@babel/preset-env', { targets: { chrome: '79', ie: '11' } }] ] } 이제 바벨이 코드를 크롬.. Babel - 기본개념(등장 배경, 설치, 기본 동작, 플러그인) 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 등장 배경 크로스 브라우징 브라우져마다 사용하는 JavaScript 언어가 조금씩 다르다. IE는 프로미스를 이해하지 못한다. 크로스 브라우징 이슈 바벨이 크로스 브라우징 이슈를 해결 ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 보장 TypeScript, JSX 포함 2. 설치 및 기본 동작 설치 npm install @babel/core @babel/cli 실행 npx babel app.js 기본 동작 세 단계로 빌드 진행 파싱(Parsing): 코드를 각 토큰별로 분해 const, alert, 등호 등등으로 분해 변환(.. Webpack - 플러그인(Plugin) 본 내용은 인프런 김정환님의 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 강의를 토대로 작성하였습니다. 1. 플러그인의 역할 번들된 결과물 하나를 처리한다. 로더는 모듈로 연결된 각 파일을 처리 플러그인은 output으로 만들어질 번들링에 후처리 JavaScript를 난독화 또는 특정 텍스트를 추출하는 용도로 사용 2. 커스텀 플러그인 만들기 플러그인 클래스 정의 // my-webpack-plugin.js class MyWebpackPlugin { // 플러그인 메소드 // compiler라는 객체를 주입 apply(compiler) { // 플러그인이 완료되었을 때 콜백함수를 실행 compiler.hooks.done.tap('My Plugin', stats => {.. 이전 1 2 3 4 다음