Muscardinus

Linting? Linting이란 code에 대해서 분석을 하고, 혹시나 있을 에러를 알려주는 것이다. Node와 브라우저에서는 runtime에 code에서 error가 있는지를 분석한다. 또한, 정해진 규칙을 지키지 않았을때 알려준다. 여러 명의 개발자가 협업할 때는 공통된 규칙이 필요하다. 쉽게 말해서 코드 품질을 review해주는 역할을 한다. 그 중 하나가 ESLint이다. 설치 npm install -g eslint eslint에서 세팅을 할때는 여러 가지 방법이 있다. https://eslint.org/docs/user-guide/configuring/ Configuring ESLint eslint.org .eslintrc.json으로 해보자 { // preset 설정 "extends": "e..

PostCSS는 SASS와 Webpack과 함께 자주 사용된다. PostCSS는 CSS의 전처리기이다. CSS를 compile해서 객체로 만든다. 이 객체는 js를 활용하여 변화를 일으킬 수 있다. 변화를 일으키고 다시 css 파일로 변환시킨다. https://github.com/postcss/postcss GitHub - postcss/postcss: Transforming styles with JS plugins Transforming styles with JS plugins. Contribute to postcss/postcss development by creating an account on GitHub. github.com 설치 npm install postcss-loader --save-de..

https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS는 css와 같은 stylesheet 언어이다. 하지만, browser에서는 인식 할 수 없는 언어이기 때문에 css 로compile해서 사용해야한다. 이를 위해서 Webpack을 사용한다. 설치 npm install node-sass sass-loader css-loader --save-dev node-sass -> SASS 코드를 css 코드로 compile 한다. sass-l..

Babel은 js compiler로 일부 browser에서 사용이 불가한 js 일부 언어를 변형(DownGrade라고 생각하면 쉽다)하여 사용할 수 있게 도와주는 것이다. 우리가 Babel을 사용하기 위해서는 대체로 아래 3가지를 설치한다. Babel Core - Babel의 코어한 부분을 가지고 있다. code를 읽고 compile하는 역할을 한다. Babel Loader - Webpack에 Babel을 사용하기 위해서 필요하다. Babel Preset - Babel이 compile을 하면서 어떤 부분에서 변형을 할 것인지를 결정한다. 설치 npm install --save-dev @babel/core @babel/preset-env babel-loader module.exports = { // 어디에..

webpack 설치 // 필요조건: package.json npm install webpack webpack-cli webpack -> webpack 그 자체 webpack -> 우리가 조금 더 webpack을 쉽게 다루기 위해서 필요하다. 우리가 wbpack을 사용하기 위해서는 2가지의 세팅이 항상 필요하다. 어디서 파일을 찾을 수 있는지와 어디에 결과물(bundle)를 놓을 것인가 이러한 세팅을 webpack.config.js에 작성한다. module.exports = { mode: 'development', // 어디에서 부터 시작할것인지 -> entry // default -> src/index.js // 여러개의 entry point도 가능하다. entry: './index.js', output..

추후에 웹팩에 대해서는 더 심도있게 다루는 글을 쓸 예정이다. Webpack은 asset bundler이다. 보통, 하나의 애플리케이션을 개발하기 위해서는 많은 js, img, css 등 여러 파일들을 사용한다. 코드를 여러 파일로 나눠서 관리하는 것이 큰 애플리케이션 관리에도 이롭다. 그러나, production의 관점에서는 결코 좋지 않다. 더 많은 파일들을 다운로드 해야하고, 애플리케이션이 로딩하는 더 많은 시간을 요구하게 된다. 적은 파일로 압축되는 것이 좋을 것 같다. 이러한 최적화 해주는 것이 Webpack이다. Webpack은 다양한 종류의 파일들을 다뤄서, 애플리케이션을 배포할 수 있고 혹은, 개발 서버를 제공해 줄 수 있다. 또한, 3rd party library를 설치하여 webpack..