Why ? spa 등에서 지원할 수 있는 라이브러리를 만들기 위해 ts파일로 코드를 짜던 중 js에서 테스트해보기 위해 트랜스파일링해서 html에 import했지만 exports를 찾을 수 없다는 에러를 직면함; 전역에 없는 exports에다가 내보내려했기에 문제가 있었음. 트랜스파일링을 하는데 tsc명령어가 참조하는 json이 일단 nextjs앱꺼를 참조하고 있어서 commonjs방식으로 바꿔주고 있었음. tsconfig옵션 중 esModuleInterop이라는게 commonjs로 가져올 수 있게 해주는 거라 문제가 되었음. 변환시 변환하는녀석이 참조하는 config파일을 잘 확인해야함 ! 모듈방식에 대해 더 깊이 알고 있어야함 ! 당장 문제없다고 설정파일에 이것저것 껴넣는건 반드시 지양해야함 ! ht..

모듈 스크립트 기능과 양이 복잡해지자 모듈단위로 분리하는 방법이 필요해짐. 그 중하나로 CommonJS가 있음. 모듈은 단지 파일 하나에 불과함. 1스크립트 === 1모듈 js에서 모듈은 표준이 없어서 AMD니 commonjs니 등등 있었는데 ESM이 표준이 되었다. commonjs (CJS) Node.js용 js코드를 패키징하는 original 방식. 모듈을 동기적으로 로드, 내보내기 위해 require, module.exports 키워드 제공 동기방식이므로 모듈이 완전로드되기 전까지 코드실행이 차단됨 초기부터 사용되었기에 esm방식대신 대부분 node기반 라이브러리는 이 방식을 사용하고 있다. (ESM의 확대로 앞으로 점차 줄어갈듯) 모듈은 module-wrapper이라는 함수로 감싸져서 실행되는데,..

실행컨텍스트 실행컨텍스트는 코드가 실행되기 위해 필요한 환경 이미지출처, 내용참고사이트 자바스크립트가 call Stack으로 코드를 처리하는 것은 알고있다. 이 Call Stack에 쌓이는 것은 함수다. 쌓인다고 해서 내부 로직이 실행되는 것이 아니다. 이 함수가 실행되려면 필요한 것들이 있다. 함수 내부에서 사용되는 변수나 전달받은 arguments, 내부 함수, 해당 함수의 스코프가 어떻게 되어있는지 등에 대한 관련 정보들이 어딘가에 선언되어있어야 작성된 함수가 올바르게 수행될 수 있다. 이 정보들을 담는 환경(공간)이 "실행컨텍스트"이다. 실행컨텍스트란, 코드가 실행되기 위해 필요한 환경이다. 실행컨텍스트 스택 Global EC는 브라우저 종료시까지 사라지지 않는다. call stack과 같다보면 ..

호이스팅 먼저 염두에 둘 것들. 여기서 한가지 염두에 두고 글을 읽어야할 것이 있는데, JS엔진이 행하는 컴파일과정, 실행과정을 나누어서 생각을 해야한다. 컴파일은 말 그대로 실행전, 인터프리터가 코드를 실행할 수 있도록 준비해놓 단계이고 실행은 바이트코드로 이루어진 기계어를 실행하는 것이다. 호이스팅 ? 코드 실행 전, 컴파일 단계에서 메모리에 함수, 변수가 메모리에 저장되어(var한정, var는 선언과 동시에 초기화가 이루어짐으로서 메모리가 할당된다.) 선언문이 끌어올려지는 것처럼 표현되는 것. 선언과 할당을 분리해서 생각해야함. 선언부터 처리됨을 기억. Hoisting은 아래에 있는 것을 들어올린다라는 뜻이다. JS에서는 선언된 변수 및 함수를 코드의 상단으로 끌어올리는 것으로 얘기한다. 그럼 정말..

디바운싱 디바운싱에 대한 예제를 구현한다 디바운싱의 적용 예는 검색인데 사용자가 검색어를 입력할 때 검색창 밑에 연관검색어를 나열해준다. 이 때 이벤트는 각 글자당 계속 발생하기 때문에 서버에 요청도 같은 숫자로 계속 전해진다. 사과하나를 치는데 이벤트가 ㅅ ㅏ ㄱ ㅗ ㅏ , 총 5번이 일어나므로 한 두명이 아닌 수천명이면 고작 두글자에 몇만번이상의 요청을 보내게 된다. 그래서 연이어 호출되는 이벤트중 마지막 이벤트만 호출하도록 하는 것이 디바운싱이다. $searchInput.addEventListener("keyup", (e) => { if (this.timer) { clearTimeout(this.timer); } this.timer = setTimeout(() => { if (e.keyCode ==..

쓰로틀링 쓰로틀링에 대해 예제를 구현한다. 쓰로틀링과 디바운싱기법이 있는데 사용하는 이유는 이벤트가 중복되서 호출되지 않도록 함이다. 쓰로틀링은 주로 스크롤 이벤트에서 적용되는데, 스크롤도 스크롤 내리면 딱 한번 이벤트가 들어가는 것이 아니라 수십 수천번까지 이벤트가 발생한다. 마지막 호출 이후에 특정 시간동안 다음 이벤트가 호출되지 않도록 하는 것이 쓰로틀링이다. 예제 var timer; document.querySelector('#input').addEventListener('input', function (e) { if (!timer) { timer = setTimeout(function() { timer = null; console.log('여기에 ajax 요청..

IntersectionObserver API 무한 스크롤, 레이지로드할 때 사용하는 API 뷰포트 또는 특정 요소사이에 교차를 감지하기 위해 사용한다. IntersectionObserver JS API docs 무한 스크롤을 구현할 때 많이 쓰는 것 같음. element가 viewport, 다른 엘리먼트와의 관계에서 보일지, 안보일지를 정하는 API callback : 관측 대상이 threshold 만큼 보일 때 호출되는 함수 관측대상을 ref로 정함 root : 대상이 보임을 확인하기 위한 뷰포트로 사용되는 요소. 관측대상의 조상이어야함 문서 내 스크롤이 가능한 요소 내에 관측대상이 있으면 root가 그 요소로 가게됨 => 관측대상이 스크롤가능한 조상에 있는지, 그 조상이 root인지 정함 rootMa..

LazyLoad, 디바운싱, 쓰로틀링 웹 페이지를 열 때 img태그의 src속성은 현재 뷰 포트가 어디있건간에 이미지소스를 다운로드받는다. 만약 몇천 몇만의 이미지태그가 있으면 이를 다 다운받을 때까지 엄청난 시간이 들 것이다.(사용자가 보고있지 않아도.) 따라서 이런 리소스낭비를 줄이기 위해 사용되는 것이다. 예시로는 ~~유투브에서 스크롤링할 때 썸네일에 해당하는 부분이 회색으로 가려져있다. -> 스켈레톤 ui~~ 무한스크롤이 적용된 사이트에서 스크롤할 때 로딩창이 생기면서 이미지를 불러온다. 모든 리소스를 받지않고 또는 load하지 않고 필요에 따라 그때그때 받아오는 것 이 때 사용되는 것이 이 개념이다. 레이지로딩은 스크롤 이벤트를 통해 구현한다. 이 때 스크롤 이벤트는 모든 이미지가 로드되면 제거..

JavaScript slider 애니메이션 버튼 클릭시 내용을 접거나, 펼칠 수 있게 한다. 구현 버튼이벤트를 등록하고, classList에 애니매이션을 추가한다. height를 0px ~ 특정 px까지 늘렸다가 줄일 것이므로 요소를 감싸고있는 태그에서 0px로 줄였을 시 컨테이너 범위를 초과해 그리는 것을 방지하기 위해 overflow: hidden속성을 추가한다. Show / Hide Slide body{ background:grey; } #box{ width:400px; background:orange; margin:0 auto; margin-top:3%; overflow:hidden; } .slider { transition:all 2s ease-in-out; height:0px; } .slide..

바닐라 JS 모달 작성 모달창 생성구현 모달은 팝업이랑 다르게 현재 페이지 위에 새로운 레이어이다. 흔히 보듯 어떤 이미지 클릭하면 뒤로 흐리게 표시되고 그 이미지가 페이지 이동없이 확대되는 그런 창을 뜻한다. 구현에는 여러 방법이 있겠지만 나는 display none block으로 생겼다 없어졌다하는 방법과 z-index로 구현해보았다. display none block 모달창을 미리 화면에 그려넣고 해당 속성을 none으로 주게되면 해당 요소가 랜더트리에 포함되지 않는다. 따라서 none에서 다른 속성으로 바꾸게 되면 (또는 그 반대의 경우에도) 요소의 위치 및 크기를 계산하는 리 플로우, 요소를 화면에 그리는 리페인트과정이 수행된다. 트랜지션 적용 불가 transition은 어떤 속성값이 변경될 때..