연습장

https://www.youtube.com/watch?v=Y3kjHM7d3Zo&t=97s 장점코드 포매팅 : 일관된 코딩 컨벤션을 유지하는 기능코드 품질 : 잠재적인 오류를 찾아주는 기능 eslint 설치  // 해당 영상 기준 버전npm install --save-dev eslint@6.8.0  옛날 버전이라고 경고하는 모습 .eslintrc.js 파일 생성빈 객체를 만들어서 노드 형식의 모듈을 생성-> v9.0.0 부터는 eslint.config.js 로 생성module.exports = {    } npm 스크립트에 'lint' 명령어 등록  "scripts": {    "lint": "eslint src"  },  [폴더 구조] app.js 생성// ./src/app.jsconsole.log()(..

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

JavaScript 모듈에서 항목을 내보내는 방법. export default한 모듈에서 오직 하나의 기본 항목만 내보낼 수 있습니다.임포트할 때 중괄호 없이, 이름 변경가능  // 모듈 파일 (example.js)export default function greet() { console.log('Hello'); }// 임포트 파일import greet from './example.js';  export모듈에서 여러 항목을 내보낼 수 있습니다.각 항목에 대해 이름을 지정하여 내보냅니다.임포트할 때 중괄호를 사용, 이름 고정 // 모듈 파일 (example.js)export function greet() { console.log('Hello'); }export const number = 42;// 임포트 ..

// f(n) = f(n-1) + f(n-2) // 피보나치 수열 점화식function solution(n) {    let answer = 0;    let temp = [1,2]        if(n == 1){        return temp[0]    }    else if(n == 2){        return temp[1]    }    else {        for(let i = 3; i n ; i++ ){            answer = (temp[0] + temp[1]) % 1234567            temp[0] = temp[1]            temp[1] = answer        }        }    return answer}  특이한점 숫자가 너무 커..

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