연습장

webpack (babel + sass + img + html)  + eslint + preitter  // package json 생성npm init -y // webpack 설치npm install --save-dev webpack webpack-cli// babel 관련 설치npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime babel-loadernpm install core-js@3 @babel/runtime-corejs3// scss 관련 설치npm install --save-dev sass css-loader sass-loadernpm install --save-dev min..

정리 1. package.json 생성npm init -y 2. airbnb 스타일 관련 설치npx install-peerdeps --dev eslint-config-airbnb 3. prettier 설치 npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier 4. .eslintrc.js 생성// .eslintrc.jsmodule.exports = {  extends: [    'airbnb-base',    'plugin:prettier/recommended', // Prettier 관련 규칙 추가  ],  env: {    browser: true,    node: true,    es2021: true,  },  r..

https://poiemaweb.com/babel-polyfill 폐지된 @babel/polyfill 대신 @babel/plugin-transform-runtime을 사용해 폴리필 추가하기 | PoiemaWeb폐지된 @babel/polyfill 대신 @babel/plugin-transform-runtime을 사용해 폴리필 추가하기poiemaweb.com  polyfill 은 ES6에서 추가된 Promise, Object.assign, Array.from 등은 ES5 이하로 트랜스파일링하여도 대체할 ES5 기능이 없기 때문에 그대로 남아 있기 때문에 사용했는데...  Babel 7.4.0부터 @babel/polyfill은 deprecated 되었다. 즉 권장되지 않음. 이유로는 gpt 가 말하길.. @ba..

https://poiemaweb.com/es6-babel-webpack-2 Webpack | PoiemaWeb앞에서 테스트해 본 바와 같이 ES6 모듈을 현재의 브라우저에서 사용하려면 [RequireJS](http://requirejs.org/) 또는 [SystemJS](https://github.com/systemjs/systemjs)와 같은 모듈 로더가 필요하다. [Webpack](https://webpacpoiemaweb.com 이전내용babel + webpack 세팅 -> Scss 를 css 로 바꿔야 되는데, 이를 webpack 에서 같이 진행 할 수 있는것 같다.  2.6 Sass 컴파일Webpack을 통해 Sass를 컴파일하는 방법으로 2가지가 있다. (1) bundle.js 파일에 포함시키..

https://poiemaweb.com/es6-babel-webpack-2 Webpack | PoiemaWeb앞에서 테스트해 본 바와 같이 ES6 모듈을 현재의 브라우저에서 사용하려면 [RequireJS](http://requirejs.org/) 또는 [SystemJS](https://github.com/systemjs/systemjs)와 같은 모듈 로더가 필요하다. [Webpack](https://webpacpoiemaweb.com 이전내용main.js와 lib.js 모듈을 babel로 트랜스파일링하여 ES5로 변환된 main.js을 node 에서 실행할 수 있지만, 브라우저에서 실행 시 에러가 발생한다. 이에 대한 해결 방법으로 webpack 이 있다.. ? 2.1 Webpack이란? Webpack..

https://epiphany0421.tistory.com/186 Babel, Webpack이란? 쓰는 이유 요약 정리📌 Babel이란? 바벨(Babel)이란, 입력과 출력이 모두 자바스크립트 코드인 컴파일러입니다. 바벨은 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서도 정상적으로 실행되도록epiphany0421.tistory.com babel을 쓰는 이유크로스 브라우징JavaScript (ES6) -> JavaScript(ES5)로 변환해줍니다. (브라우저 하위 호환성을 생각)각 브라우저마다 JavaScript 엔진이 다르지만, 모든 브라우저에서 동작하도록 호환성을 지켜줍니다.폴리필(polyfill)폴리필은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 ..

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_2-state-setstate-render Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝open in new window에서 진행하는 블랙커피 스터디open in new window에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트junilhwang.github.io 이전글에 이어서 4. 컴포넌트 분할하기이제 컴포넌트 단위로 구분하는 코드를 작성해보자.(1) 기능 추가현재 까지의 코드에서는 컴포넌트를 분리할 이유가 없는 상태이다.그래서 Items 컴포넌..

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_2-state-setstate-render Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝open in new window에서 진행하는 블랙커피 스터디open in new window에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트junilhwang.github.io ssr 에서 csr 로 넘어오면서 브라우저에서 렌더링하며 서버에서는 필요한 정보만 전달해주는 형태로 변화DOM 을 직접 다루기 보다는 state 의 변화에 따라서 DOM 을 리렌더링한다. ..