Front-end/개발환경
-
ESLint - 린트(Lint) | 김정환Front-end/개발환경 2020. 6. 14. 16:22
1. 배경 오래된 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다. 보푸라기가 많으면 옷이 보기 좋지 않은데 코드에서도 이런 보푸라기가 있다. 들여쓰기를 맞추지 않은 경우, 선언한 변수를 사용하지 않은 경우 등, 보푸라기 있는 옷을 입을 수는 있듯이 이러한 코드로 만든 어플리케이션도 동작은 한다. 그러나 코드의 가독성이 떨어지고 점점 유지보수하기 어려운 애물단지가 되어버리기 일쑤다. 보푸라기를 제거하는 린트 롤러(Lint roller)처럼 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다. 1-1. 린트가 필요한 상황 아래 코드 유심히 보자. console.log() 함수를 실행하고 다음 줄에서 즉시 실행함수를 실행하려는 코드다. console...
-
SASS(실습) - 웹팩(Webpack) | 김정환Front-end/개발환경 2020. 6. 12. 00:00
TODO.1 SASS 코드를 사용할수 있겠끔 sass-loader를 구성하세요. 빌드 후 어떤 오류가 있는 지 체크하자. $ npm run build ERROR in ./src/views/FormView.scss 1:0 Module parse failed: Unexpected character '@' (1:0) 에러 번역) 모듈을 파싱할 때 @ 문자를 반환할 수 없다. → 엔트리 포인트부터 시작해서 FormView.js를 가져오고 해당 js 파일에서 FormView.scss 파일을 가져오는데 이를 처리할 수 있는 sass-loader가 필요하다. sass 코드를 css로 컴파일 해준다. $ npm i node-sass 웹팩에서 sass 파일을 만나면 node-sass를 내부적으로 돌려준다. $ npm i..
-
외부 패키지를 관리하는 방법 - NPM | 김정환Front-end/개발환경 2020. 6. 10. 21:11
5. 패키지 설치 5-1. CDN을 이용한 방법 외부 라이브러리를 가져다 쓰는 것은 무척 자연스러운 일이다. 간단한 방법은 CDN(컨텐츠 전송 네트워크)으로 제공하는 라이브러리를 직접 가져 오는 방식이다. 리액트의 주소를 html에서 로딩한다. index.html : CDN 서버 장애로 인해 외부 라이브러리를 사용할 수 없다면 어떻게 될까? 아무리 우리 어플리케이션 서버가 정상이더라도 필수 라이브러리를 가져오지 못한다면 웹 어플리케이션은 정상적으로 동작하지 않을 것이다. 5-2. 직접 다운로드하는 방법 라이브러리 코드를 우리 프로젝트 폴더에 다운받아 놓는건 어떨까? CDN을 사용하지 않기 때문에 장애와 독립적으로 웹 어플리케이션을 제공할 수 있을 것같다. 하지만 이런 상황도 있다. 라이브러리는 계속해서 ..
-
바벨 사용법과 웹팩 통합 - 바벨(Babel) | 김정환Front-end/개발환경 2020. 6. 10. 20:38
4-2. 프리셋 사용하기 이처럼 바벨은 목적에 따라 몇 가지 프리셋을 제공한다. · preset-env · preset-flow · preset-react · preset-typescript preset-env는 ECMAScript2015+를 변환할 때 사용한다. 바벨 7 이전 버전에는 연도별로 각 프리셋을 제공했지만(babel-reset-es2015, babel-reset-es2016, babel-reset-es2017, babel-reset-latest) 지금은 env 하나로 합쳐졌다. 무척 맘에 드는 부분이다. preset-flow, preset-react, preset-typescript는 flow, 리액트, 타입스크립트를 변환하기 위한 프리셋이다. 인터넷 익스플로러 지원을 위해 env 프리셋을 ..
-
바벨의 기본 개념 - 바벨(Babel) | 김정환Front-end/개발환경 2020. 6. 9. 22:47
1. 배경 1-1. 크로스 브라우징 사용하는 말이 달라서 바벨탑이 실패했듯이, 브라우저마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다. 스팩과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못한다. 작년까지만 해도 사파리 최신 브라우저는 Promise.prototype.finally 메소드를 사용할 수 없었다. 프론트엔드 개발에서 크로스브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만든다. 히브리어로 바벨이 ‘혼돈’이란 뜻인 것처럼 말이다. 크로스브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도..
-
자주 사용하는 플러그인 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 7. 20:23
1. BannerPlugin MyPlugin와 비슷한 것이 BannerPlugin이다. 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다. webpack.config.js : const webpack = require('webpack'); module.exports = { plugins: [ new webpack.BannerPlugin({ banner: '이것은 배너 입니다', }) ] } 생성자 함수에 전달하는 옵션 객체의 banner 속성의 값으로 문자열을 전달한다. 웹팩 컴파일 타임에 얻을 수 있는 정보, 가령 빌드 시간이나 커밋정보를 전달하기위해 함수로 전달할 수도 있다. webpack.config.js : new webpack.BannerPlugin({ banner: () => `빌드 날짜..
-
플러그인 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 7. 17:59
1. 플러그인의 역할 웹팩에서 알아야 할 마지막 기본 개념이 플러그인이다. 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다. 이것도 사용하기에 앞서 동작 원리를 이해하기 위해 플러그인을 직접 만들어 보자. 2. 커스텀 플러그인 만들기 웹팩 문서의 Writing a plugin을 보면 클래스로 플러그인을 정의 하도록 한다. 헬로월드 코드를 가져다 그대로 실행 붙여보자. my-webpack-plugin.js : class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap('My Plugin', stats => { console.log('MyPlugin:..
-
자주 사용하는 로더 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 5. 22:16
1. css-loader 스타일시트도 import 구문으로 불러 올 수 있다. app.js : import './style.css' ES6의 import 구문으로 가져오려면 'app.css' 파일이 모듈이 되어야 하는데, 웹팩의 로더가 css 파일을 모듈로 바꾸는 역할을 한다. style.css : body { background-color: gray; } CSS 파일을 자바스크립트에서 불러와 사용하려면 CSS를 모듈로 변환하는 작업이 필요하다. css-loader가 그러한 역할을 하는데 우리 코드에서 CSS 파일을 모듈처럼 불러와 사용할 수 있겠끔 해준다. > npm install css-loader css-loader 설치 webpack.config.js : module.exports = { modu..