연습장

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 을 리렌더링한다. ..

https://chatgpt.com/  gpt 님이 말씀하시길... 필요한 기능라우팅: URL 변경 없이도 다양한 "페이지"를 표현하고, 사용자가 네비게이션을 통해 이동할 수 있어야 합니다.뷰 렌더링: 각 "페이지"에 해당하는 콘텐츠를 동적으로 로드하고 화면에 표시할 수 있어야 합니다.이벤트 처리: 사용자 상호작용(예: 링크 클릭)에 반응하여 적절한 페이지를 로드하고 화면을 업데이트할 수 있어야 합니다.상태 관리: 필요한 경우 애플리케이션 상태를 관리하고, 페이지 간에 상태를 공유하거나 전달할 수 있는 방법이 필요합니다.히스토리 관리: 브라우저의 뒤로가기, 앞으로가기 버튼을 지원하고, URL의 해시(#)를 이용해 브라우저 히스토리를 관리할 수 있어야 합니다. 구현 단계기본 HTML 및 CSS 설정:HTM..

https://velog.io/@hjoo3355/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%A0%95%EB%A6%AC 프론트엔드 +클론코딩 정리프론트엔드 구현해보고 싶은 것들:필수제한 - 하나씩 일주일이라는 시간을 둘 것1\. TODO List제한사항순수 자바스크립트로만 구현SPA 로 구현하기SCSS 전처리기 사용Babel 과 Webpack 으로 환경 세팅Pretvelog.io  필수제한 - 하나씩 일주일이라는 시간을 둘 것...? 1. TODO List제한사항1. 순수 자바스크립트로만 구현-> 리액트는 순수 자바스크립트일까? -> 리액트는 자바스크립트 라이브러리로 jsx 문법을 사용하기 때문..