m2ndy 개발 블로그

✅ Webpack 이란?Javascript로 만든 어플리케이션을 위한 정적 모듈 번들러. 즉, 웹 어플리케이션을 구성하는 css, javascript, image 등의 웹 자원을 각각의 모듈로 간주한 뒤, 이들의 의존성 관계를 결합하여 하나의 결과물을 만들어주는 도구이다. Webpack은 프로젝트에서 필요한 모든 모듈을 매핑하고, 하나 또는 여러 개의 번들 파일로 결합하여 의존성 그래프를 생성한다. 이를 통해 웹 어플리케이션의 성능을 최적화하고, 모듈화를 통해 코드의 유지보수성을 높일 수 있다. 또한, 어플리케이션의 로드 시간을 줄이며, 사용하지 않는 코드를 제거하는 tree shaking을 통해 최종 번들 크기를 줄일 수 있다. webpack.config.js 파일을 통해 설정을 할 수 있으며, 진입점..

바닐라JS로 프로그램을 만들던 중 export에 대한 궁금증이 생겼다. (named) export vs export default export 한 모듈에 여러 개체들, 혹은 특정 개체만을 각각 가져올 수 있음 반드시 지정된 이름으로만 import 해야함import { hello } from './hello.js' export default 해당 모듈에 하나의 개체 (변수, 클래스, 함수 등)만 있다는 의미 ⇒ 해당 모듈의 전체를 export 하는 느낌 원하는 이름으로 import 가능import helloTest from './hello.js' 무엇을 사용해야 될까? airbnb convention에 의하면 내보내기 할 것이 한 가지이면 export default 사용하는 것..

먼저 아래 영상을 보면 이해를 쉽고 빠르게 할 수 있다! 실행 컨텍스트 코드가 실행되는 공간 실행 컨텍스트의 Call stack에는, 환경 레코드, 첫 번째로 실행될 함수, 첫 번째 함수가 종료되기 전 실행할 함수 .. 순서로 stack으로 쌓이게 된다. 후입선출 방식을 사용한다 => 나중에 실행되는 함수가 종료되어야만, 그 앞에 실행된 함수가 종료된다. 따라서 나중에 실행되는 함수에서 변수를 먼저 찾고, 바깥으로 나가며 찾는 방식으로 진행이 된다. 환경 레코드 : 실행 컨텍스트에 있는 변수들을 저장하는 공간 function greeting() { sayHi(); } function sayHi() { return "Hi!"; } greeting(); 시작 상태 call stack : [] 위 코드에서, ..

먼저, Javascript와 Typescript의 가장 큰 차이점은 Typescript에는 Type을 지정한다는 것입니다. Javascript에서는 a + b 코드를 작성할 때, const a = 1; const b = 1; const c = a + b; // 2 위와 같이 작성하지만 Typescript의 경우 타입을 지정하게 됩니다. const a :number = 1; const b :number = 1; const c :number = a + b; // 2 Type의 경우 number string boolean 등이 있으며, const와 let 등으로 선언하는 변수 이외에도 props로 전달받는 인자까지 타입을 지정하게 됩니다. const a :number = 1; const name :string..

Passive Event Listener?Chrome 51 부터 등장한 스크롤 동작 최적화를 위한 옵션.터치 이벤트나 마우스 휠 이벤트 동작 시 사용됩니다. 먼저 어떤 느낌인지 비교를 하자면, 다음 영상을 참고해 주세요.터치 또는 휠 이벤트 시 퍼포먼스를 대폭 향상시킬 수 있는 옵션이며, 모바일 환경에서 경험할 수 있습니다.따라서 스크롤의 성능을 최적화하고 싶을 때 사용하는데, preventDefault의 동작이 실행되는 것을 막을 수 있습니다.addEventListener로 등록된 이벤트는 Compositor thread에서 처리됩니다.원래대로라면, 이벤트를 Main thread에 넘긴 뒤 자신은 Render tree를 다시 넘겨받을 때까지 대기상태가 됩니다.그런데 passive 옵션이 활성화(true..

Web Storage : Local Storage, Session Storage 1. Local Storage - 로컬에 저장됨 - 시간제한이 없고, 브라우저가 꺼져도 사라지지 않는다. => 데이터를 지우기 위해서는 직접 지워주어야 함! - 데이터가 문자열이어야 하고, 다른 자료형 입력 시 문자열로 자동 변환됨. 2. Session Storage - 세션이 종료될 때까지 유지됨 - 세션이 종료된다? => 브라우저, 프로세스, 탭이 종료된다 - 세션이 종료되면 데이터가 사라짐 - 브라우저마다, 탭마다 다른 session 3. Cookie - 용량, 시간, 개수 제한이 있음 - 특정 기간 동안 저장 가능. - 만료 날짜가 지나거나 브라우저 종료 시 자동으로 사라짐. - 자동로그인, 다시 보지 않기, 장바구니..