프론트엔드 개발환경6 autoprefixer autoprefixer 란? https://www.caniuse.com/ 에서 확인할 수 있는 CSS 속성의 벤더 프리픽스(vendor prefix)를 사용자의 브라우저에 따라 자동으로 붙여주는 플러그인 이다. 그럼 벤더 프리픽스는 무엇일까? 벤더 프리픽스는 주요 웹 브라우저가의 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다. 아직 CSS 권고안에 포함되지 못하거나, 포함은 되었으나 완전히 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용한다. 설치 postcss가 설치되어 있지 않다면 같이 설치해주자. npm i -D postcss autoprefixer 설정 //package.json ... 생략 "browsersli.. 2021. 5. 10. Prettier Prettier는 코드를 더 이쁘게 만든다. ESLint와 가장 큰 차이점은 코드 품질에 관련된 것은 다루지 않는 다는 점이다. Prettier는 단지 일관적인 스타일로 코드를 다듬을 뿐이다. 설치 및 사용법 npm install prettier 로 설치한다. 사용방법은 npx prettier app.js --write 로 사용할 수 있다. --write 옵션은 파일을 재 작성하고 만약 --write 옵션을 주지 않으면 터미널에 출력만 한다. ESLint와의 통합 포매팅은 Prettier가 하지만 코드 품질과 관련된 검사는 ESLint가 하기 때문에 둘을 같이 사용하는 것이 좋다. 패키지 중에 eslint-config-prettier 가 있는데 이는 Prettier와 충돌하는 ESLint 규칙을 끄는 역.. 2021. 1. 12. ESLint 개념 ESLint는 ECMAScript 코드에서 문법적 오류나 더 나은 코드로 정정하는 린트 도구 이다. 즉, 코드의 가독성을 높이고 오류와 버그를 제거하여 단단한 코드를 만드는 것이 목적이다. 사용법 npm install eslint 로 설치한다. ESLint또한 별도의 설정파일이 필요하므로 .eslintrc.js 파일을 만들어 준다. 설정파일에 규칙(Rules)를 추가해야만 코드를 검사할 수 있다. 해당 규칙은 eslint.org/docs/rules/ List of available rules no-unreachabledisallow unreachable code after `return`, `throw`, `continue`, and `break` statements eslint.org 여기서 확인.. 2021. 1. 12. 바벨을 웹팩과 통합하기 웹팩으로 통합 보통 실무에서는 바벨을 직접 사용하기 보다는 웹팩으로 통합해서 사용하는 것이 일반적이다. 로더 형태로 제공하는데 babel-loader 이다. github.com/babel/babel-loader babel/babel-loader 📦 Babel loader for webpack. Contribute to babel/babel-loader development by creating an account on GitHub. github.com 사용하기 위해서 먼저 npm install babel-loader 로 babel-loader를 설치한다. 그 후 webpack.config.js 로 가서 babel-loader를 추가해 준다. // webpack.config.js module.exports.. 2021. 1. 7. 이전 1 2 다음
