프론트엔드 개발에 Node.js가 필요한 이유 > 최신 스펙으로 개발할 수 있다 자바스크립트 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다. 무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는
패키지 설치 - CDN을 이용한 방법 CDN 서버 장애로 인해 외부 라이브러리를 사용할 수 없다면 우리 애플리케이션 서버가 정상이더라도 동작하지 않을 것이다. - 직접 다운로드하는 방법 라이브러리 코드를 우리 프로젝트 폴더에 다운받아 놓을 수 있다. 하지만 라이브러리가 계속 업데이트 될 때 마다 매번 직접 다운로드 하는 것은 매우 귀찮은 일이다. - ...
배경 import/export 구분이 없었던 모듈 이전 상황 math.js app.js 두 자바스크립트 코드를 하나의 HTML파일에 로드해야 실행할 수 있다. index.html 단점 : 전역스코프가 오염된다 IIFE 방식의 모듈 IIFE는 즉시 실행 함
로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다.뿐만 아니라 CSS 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.로더를 테스트 해보기 위해 my-webpack-loader.js 파일을
플러그인 로더는 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다. 커스텀 플러그인 만들기 my-webpack-plugin.js 플러그인이 동작하면 MyPlugin: don
바벨의 배경 크로스 브라우징 브라우져마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많음 크로스브라우징의 혼란을 해결해 줄 수 있는 것이 바벨 ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜줌 타입스크립트, J
프리셋 사용하기 바벨은 목적에 따라 몇 가지 프리셋을 제공한다 preset-env preset-flow preset-react preset-typescript preset-env는 ECMAScript2015+를 변환할 때 사용한다 preset-flow preset-
ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나다.ESLint의 목적은 코드 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것.ESLint가 하는 역할은 크게 두가지로 나눌 수 있다
프리티어는 ESLint보다 코드를 더 예쁘게 만들어준다 ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 프리티어는 좀 더 일관적인 스타일로 코드를 다듬는다 하지만 ESLint와는 다르게 코드 품질과 관련된 기능은 하지 않는다 프리티어 설치
린트는 코딩할 때마다 수시로 실행해야 하는데 이러한 일은 자동화 하는 것이 좋다 깃 훅을 사용하는 방법과 에디터 확장 도구를 사용하는 방법을 각각 알아보자 깃 훅을 사용한 자동화 소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용하는 것이 좋다 커밋 전, 푸시 전 등
지금까지는 HTML, CSS, JavaScript 등 파일을 브라우저에 직접 로딩해서 결과물을 확인했다.인터넷에 웹사이트를 게시하려면 서버 프로그램으로 이 파일을 읽고 요청한 클라이언트에게 제공해야 한다.개발환경에서도 이와 유사한 환경을 갖추는 것이 좋다.운영환경과 맞
프론트엔드 개발 시 백엔드 API 없이 개발해야 할 때 Mockup data를 제공해주는 Mockup API를 만들어서 개발하면 수월하다. 웹팩 개발 서버는 Mockup API를 제공하는 기능도 있다. Mockup API 우선 웹팩 개발 서버 공식문서를 확인하면서
웹팩 개발 서버는 코드의 변화를 감지해서 전체 화면이 갱신되기 때문에 화면에 있는 데이터들이 초기화가 된다.웹팩 개발 서버에서는 전체 화면을 갱신하지 않고 변경한 모듈만 바꿔치기 해줄 수 있는 Hot Module Replacement를 제공한다.webpack.confi
코드가 많아지면 번들링한 결과물도 커진다. 이는 파일을 다운로드 하는데 시간이 많이 걸리기 때문에 브라우저 성능에 영향을 줄 수 있다. 어떻게 하면 번들링한 결과물을 최적화 할 수 있는지 알아보자. production 모드 가장 쉬운 방법은 웹팩에 내장되어 있는 방법