Javascript (5) 썸네일형 리스트형 Babel을 활용해 별칭 경로 설정하기 들어가며 회사에서 소속팀이 변경되어 지금까지 봐오던 코드와 다른 코드를 보게 되었다. 그러다 눈에 띈 상단의 경로들. 대부분의 경로가 보다 짤막하고 '@디렉토리/디렉토리..' 의 형태로 이루어져있었다. 팀원분께 여쭈어보니 별칭 경로라는 걸 알게되었고, 보다 편리하게 개발할 수 있는 수단이라 생각되어 조금 더 배워보고 정리해본다. 별칭 경로를 사용하는 이유 Javascript/Typescript 환경에서 import 구문을 사용할 땐 보통 상대 경로를 사용한다. 이 때 각 모듈의 디렉토리 depth가 깊어진다면, 아래와 같이 '../'가 반복되는.. 보기만 해도 아찔한 경로를 사용해야한다. import component from "../../../../../../../../../../../../../dir.. Vanilla JS로 구현한 debounce로 성능 최적화하기 debounce란? 주어진 시간 내에 동일한 이벤트가 반복적으로 시행되는 경우, 마지막 이벤트 발생 후 새로운 이벤트가 발생하지않고 제한 시간이 모두 지나면 해당 이벤트가 실행되도록 하는 이벤트 핸들링 기술. 연이은 이벤트를 하나의 그룹으로 묶어주는 역할을 한다. Vanilla JS로 debounce 구현하기 debounce는 lodash 등의 라이브러리를 사용하면 상대적으로 편리하게 구현할 수 있다. 하지만 그 원리를 알기 위해선 한 번쯤 Vanilla JS로 구현해보는 것이 최고의 방법 🔥 Vanilla JS로 구현한 debounce코드는 아래와 같다. const handleDebounce = (callback, limit) => { let timeout; return function (...args.. 실행 컨텍스트와 클로저(Closure) 들어가며 클로저는 자바스크립트의 주요 특징으로 뽑히는 개념이지만, 그만큼 애매하고 헷갈리는 개념이기도 하다. 검색하면 수십 수백가지의 자료가 나오긴 하지만, 열 번 읽는 것보다 한 번 정리해서 써보는게 더 빠르게 내 것으로 만들 수 있다고 생각하기에 내 언어로 다시 정리해보는 글. MDN에 클로저를 검색하면 나오는 문장은 아래와 같다. 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합이다. 이 문장을 통해 클로저를 알기 위해선 Lexical Environment에 대한 이해가 필요하다는 것을 알 수 있다. Lexical Environment의 토대가 되는 실행 컨텍스트부터 차근차근 알아가며 클로저와 가까워보자. 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경.. var, let, const의 차이 1. 중복 선언 가능 여부 var 는 중복 선언이 가능한 반면, let 과 const 는 중복 선언이 불가하다 var a = 1; var a = 3; console.log(a); // 3 let b = 1; let b = 3; console.log(b); // Error : Identifier 'b' has already been declared. const c = 1; const c = 3; console.log(c); // Error : Identifier 'c' has already been declared. 2. 재할당 가능 여부 var 와 let 은 변수를 선언하는 키워드로, 변수 선언 및 초기화 이후 재할당이 가능하다. const 는 상수를 선언하는 키워드로, 선언/초기화 이후 재할당이 불가하.. HTML과 Javascript 연결하기 HTML에 Javascript를 연결하는 방법 HTML에 Javascript를 연결하기 위해선 기본적으로 아래 코드를 해당 HTML에 입력한다. 다만 이 때 코드의 위치와 옵션에 따라 각기 다른 특징을 가진다. 그렇다면 각 방법의 특징과, 어느 방법이 가장 최선일지도 함께 알아보자. 각 방법은 위치, 옵션에 따라 총 4가지로 나뉘어진다. 용어 정리 우선 각 방법의 실행 순서 이해를 위해 알아둘 용어들이 있어 정리해본다. ( * Parsing(파싱)과 fetching(패칭)은 영문과 국문을 번갈아 쓸 예정 😅 ) Parsing (파싱) 처음 들어본 개념인 Parsing(파싱)은 Parser(파서)에 대한 이해에서부터 시작된다. Parser(파서)는 컴파일의 일부로서 [원시 프로그램의 명령문이나 온라인 명령.. 이전 1 다음