Front-end/개발환경
-
Babel과 Webpack을 이용한 ES6 환경 구축 | PoiemaWebFront-end/개발환경 2021. 3. 5. 15:22
Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다. Babel CLI 설치 # package.json 생성 $ npm init -y # babel-core, babel-cli, babel-preset 설치 $ npm install --save-dev @babel/core @babel/cli @babel/preset-env Babel을 사용하려면 Babel 프리셋을 설치해야 한다. @babel/preset-env은 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로, Babel이 제공하는 공식 Babel 프리셋(Official Preset)은 아래와 같다. @babel/preset-env @babel/preset-fl..
-
마무리 - 프론트엔드 개발환경의 이해 | 김정환Front-end/개발환경 2020. 6. 18. 00:19
Node.js / NPM 프로젝트를 생성하고 오작동을 해결하는 등, 프로젝트를 관리하는 법에 대해 알아봤다. Webpack 기초 웹팩은 모듈을 사용하기 위한 도구이며 모듈로 작성한 프론트엔드 코드를 하나의 결과, 즉 번들이라고 하는 번들 결과물을 만들어내는 도구 Babel 최신 ECMA Script를 사용하기 위한 도구, 바벨은 폴리필까지 지원하는 코드도 만들어준다. SASS/SCSS 바벨과 비슷한 방식의 SASS 개발 방식에 대해 알아봤다. ESLint 협업을 위한 필수 도구, 코드의 품질과 포멧팅을 검사하는 방식을 알아봤다. Prettier 비교적 최근에 나온 도구로써, ESLint와 통합해서 사용하는 방법에 대해 알아봤고, *린트를 자동화하고 강제화하는 부분은 실무에서도 유용하게 사용된다. Webp..
-
최적화 - 웹팩 심화편 | 김정환Front-end/개발환경 2020. 6. 17. 22:37
[출처 : https://jeonghwan-kim.github.io] 4. 최적화 코드가 많아지면 번들링된 결과물도 커지기 마련이다. 거의 메가바이트 단위로 커질수도 있는데 브라우져 성능에 영향을 줄 수 있다. 파일을 다운로드하는데 시간이 많이 걸리기 때문이다. 이번 섹션에서는 번들링한 결과물을 어떻게 최적화 할수 있는지 몇가지 방법에 대해 알아보겠다. 4-1. production 모드 웹팩에 내장되어 있는 최적화 방법중 mode 값을 설정하는 방식이 가장 기본이다. 세 가지 값이 올 수 있는데 지금까지 설정한 “development”는 디버깅 편의를 위해 아래 두 개 플러그인을 사용한다. · NamedChunksPlugin · NamedModulesPlugin DefinePlugin을 사용한다면 pro..
-
핫 로딩 - 웹팩 심화편 | 김정환Front-end/개발환경 2020. 6. 17. 18:57
[출처 : https://jeonghwan-kim.github.io] 3. 핫 모듈 리플레이스먼트 3-1. 배경 웹팩 개발서버는 코드의 변화를 감지해서 전체 화면을 갱신하기 때문에 개발 속도를 높일 수 있다. 하지만 어떤 상황에서는 전체 화면을 갱신하는 것이 좀 불편한 경우도 있다. 싱글페이지어플리케이션은 브라우져에서 데이터를 들고 있기 때문에 리프레시 후에 모든 데이터가 초기화 되어 버리기 때문이다. 다른 부분을 수정했는데 입력한 폼 데이터가 날아가 버리는 경우도 있고 말이다. 전체 화면 갱신 하지 않고 변경한 모듈만 바꿔치기 한다면 어떨까? 핫 모듈 리플레이스먼트는 이러한 목적으로 제공되는 웹팩 개발서버의 한 기능이다. 3.2 설정 설정은 간단하다. devServer.hot 속성을 켠다. webpac..
-
API 서버 연동 - 웹팩 심화편 | 김정환Front-end/개발환경 2020. 6. 16. 19:11
2. API 연동 프론트엔드에서는 서버와 데이터 주고 받기 위해 ajax를 사용한다. 보통은 api 서버를 어딘가에 띄우고(혹은 로컬호스트에 띄우고) 프론트 서버와 함께 개발한다. 개발 환경에서 이러한 api 서버 구성을 어떻게 하는지 알아 보자. 2-1. 목업 API : devServer.before 웹팩 개발 서버 설정 중 before 속성은 웹팩 서버에 기능을 추가할 수 있는 여지를 제공한다. 이것을 이해하려면 노드 Express.js에 사전지식이 있으면 유리한데, 간단히 말하면 익스프레스는 미들웨어 형태로 서버 기능을 확장할 수 있는 웹프레임웍이다. devServer.before에 추가하는 것이 바로 미들웨어인 셈이다. 아래 코드를 보자. webpack.config.js : module.expor..
-
웹팩 개발 서버 - 웹팩 심화편 | 김정환Front-end/개발환경 2020. 6. 15. 22:34
웹팩은 프론트엔드 개발 서버를 제공하고, 몇 가지 방법으로 빌드 결과를 최적화 할 수 있는데 이번 글에서 자세히 살펴 보겠다. 1. 웹팩 개발 서버 1-1. 배경 지금까지는 브라우져에 파일을 직접 로딩해서 결과물을 확인했다. 인터넷에 웹사이트를 게시하려면 서버 프로그램으로 이 파일을 읽고 요청한 클라이언트에게 제공해야 한다. 개발환경에서도 이와 유사한 환경을 갖추는 것이 좋다. 운영환경과 맞춤으로써 배포시 잠재적 문제를 미리 확인할 수 있다. 게다가 ajax 방식의 api 연동은 cors 정책 때문에 반드시 서버가 필요하다. 프론트엔드 개발환경에서 이러한 개발용 서버를 제공해 주는 것이 webpack-dev-server다 1-2. 설치 및 사용 먼저 webpack-dev-server 패키지를 설치한다. ..
-
자동화 - 린트(Lint) | 김정환Front-end/개발환경 2020. 6. 15. 21:43
4. 자동화 린트는 코딩할 때마다 수시로 실행해야하는데 이러한 일은 자동화하는 것이 좋다. “깃 훅을 사용하는 방법”과 “에디터 확장 도구”를 사용하는 방법을 각각 소개한다. 4-1. 변경한 내용만 검사 소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용하는 것이 좋다. 커밋 전, 푸시 전 등 깃 커맨드 실행 시점에 끼여들수 있는 훅을 제공한다. husky는 깃 훅을 쉽게 사용할 수 있는 도구다. (Git 2.13.0 이상 버전을 지원) 커밋 메세지 작성전에 끼어들어 린트로 코드 검사 작업을 추가하면 좋겠다. 먼저 패키지를 다운로드 한다. $ npm i -D husky 허스키는 패키지 파일에 설정을 추가한다. package.json : { "husky": { "hooks": { "pre-commit": "..
-
프리티어 - 린트(Lint) | 김정환Front-end/개발환경 2020. 6. 14. 20:31
3.Prettier 프리티어는 코드를 “더” 예쁘게 만든다. ESLint의 역할 중 포매팅과 겹치는 부분이 있지만 프리티터는 좀 더 일관적인 스타일로 코드를 다듬는다. 반면 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다른 점이다. 3-1. 설치 및 사용법 프리티어 패키지를 다운로드 하고 $ npm i -D prettier 코드를 아래 처럼 작성한다. app.js : console.log('hello world') Prettier로 검사해 보자. $ npx prettier app.js --write --write 옵션을 추가하면 파일을 재작성한다. 그렇지 않을 경우 결과를 터미널에 출력한다. 변경된 모습을 보면, app.js : console.log("Hello world"); 작은 따옴표를..