타입스크립트는JS로 변환해주는 컴파일러 언어이기 때문에, tsconfig.json 파일을 통해 컴파일 옵션을 설정한다.흔히, 지금까지 컴파일 옵션을 설정할 때 gpt를 통해 나오는 결과를 아무 생각 없이 사용하였다. 이번 글에서는 각 컴파일 옵션이 어떠한 동작을 뜻하는지 예시를 통해 자세하게 알아보겠다.옵션을 설정했을 때와 하지 않았을 때의 동작 차이를 통해, 각 옵션을 정확히 이해해보자.물론, 컴파일 옵션은 너무나도 많아 전부 확인하는 것은 불가능하기에 자주 사용되는 몇몇 옵션 위주로 알아보겠다.1️⃣ outDir이 옵션은 컴파일 된 결과를 어느 곳에 저장할지 설정하는 옵션이다.예시를 보자// tsconfig.json{ "compilerOptions": { "outDir": "./dist", ..

아마 타입스크립트를 입문할 때, 첫 번째 고비가 제네릭일 것이다.그럴 것이 문법도 무언가 괴상하게 생겼다. 하지만, 제네릭을 완벽하게 이해하지 못하면 타입스크립트를 유연하게 사용하기 어려워진다.이번 글에서는 제네릭의 두려움을 벗어나는 것을 목표로 제네릭을 낱낱이 알아보겠다. 1️⃣ 제네릭의 사전적 의미우선 제네릭이 한국어로 무슨 뜻인지 살펴보자. 우리는 여기서 '포괄적인', '이름이 붙지 않은' 키워드에 초점을 두어야 한다.타입스크립트에서 제네릭 문법은 위의 키워드를 내포하고 있다.실제로, 제네릭 문법을 사용하면 타입을 어느 한 가지로 확정 짓는 것이 아니라, 개발자의 마음대로 유연하게 사용할 수 있게 해준다. 즉, 제네릭 문법은 타입의 이름을 붙이지 않고 다양한 타입에 대해 동작할 수 있는 포괄적인 코..

타입스크립트에서 인터페이스는 흔히, 객체 타입을 정의할 때 사용된다.하지만, 실제로 인터페이스는 단순한 객체 타입의 정의를 넘어 다양한 기능을 제공한다.이번 글에서는 타입스크립트에서 인터페이스의 다양한 기능들을 알아보겠다. 1️⃣ 인터페이스(interface)의 사전적 의미 인터페이스의 사전적 의미는 다음과 같다. 전기 신호의 변환으로 중앙 처리 장치와 그 주변 장치를 서로 잇는 부분.키보드나 디스플레이 등처럼 사람과 컴퓨터를 연결하는 장치출처 : Oxford Languages 위 두 정의에서 '잇는' , '연결' 이라는 키워드가 보인다.두 키워드를 통해 추론한다면, 인터페이스란 일종의 매개체라고 할 수 있다.서로 다른 무언가를 이어주는 매개체가 바로 인터페이스란 것이다. 우리가 흔히, 웹사이트에서 보는..

이전 글에서, Promise 가 무엇이고 Promise를 이용한 비동기 처리에 대해 알아보았다. [JavaScript] Promise와 비동기(Asnycronous) 처리앞서, JS의 비동기 처리 및 콜백 함수에 대해서 알아보았다. [JavaScript] 싱글 쓰레드와 비동기(Asyncronous)JavaScript에서 매우 중요한 비동기 처리 방식을 공부하다 보면 JavaScript는 싱글 쓰레드 언어junhee1203.tistory.com 이번 글에서는 Promise의 정적 메소드에 대해 알아보겠다.참고로 Promise의 기본 개념을 알지 못한다면 이 글을 이해할 수 없다. 또한, class의 인스턴스와 정적 메소드의 차이에 대해서 기본적으로 알아야 한다. 1️⃣ Promise의 정적 메소드알다시피 ..

앞서, JS의 비동기 처리 및 콜백 함수에 대해서 알아보았다. [JavaScript] 싱글 쓰레드와 비동기(Asyncronous)JavaScript에서 매우 중요한 비동기 처리 방식을 공부하다 보면 JavaScript는 싱글 쓰레드 언어라는 말을 한 번쯤은 접했을 것이다.실제로, JavaScript의 비동기 처리는 싱글 쓰레드와 아주 밀접한 관련junhee1203.tistory.com  [JavaScript] 콜백 함수와(Callback) 비동기(Asyncronous) 처리흔히 JavaScript의 비동기를 처리하는 방법은 크게 세 가지가 있다. 1. 콜백 함수(Callback)2. Promise3. async awiat 이 중에서 가장 기본이 되는 콜백 함수에 대해서 알아보자. 먼저, 비동기를 어떻게 ..

드래그는 피그마 같은 디자인 툴 사이트에 매우 많이 사용된다.또한, 웹 사이트에 파일을 업로드 할 때, 드래그 앤 드랍으로 파일을 업로드 한 경험이대부분 있을 것이다.하지만, 단순하게 보였던 드래그는 생각보다 다루기 어려운 이벤트이다.DOM에서 제공하는 드래그 관련 이벤트도 다양하며,제대로 활용하기 위해서는 뷰포트 내 좌표에 대한 개념도 알아야 한다.어려운 것은 사실이지만, 드래그 기능은 현대 웹 애플리케이션에서 중요한 역할을 하며,사용자 경험을 크게 향상시킬 수 있다.이번 글에서는 drag 관련 이벤트를 정리해보겠다. 1️⃣ drag 이벤트 종류드래그 이벤트는 총 7종류가 있지만, 크게 두 분류로 나눌 수 있다.드래그 되는 요소에서 발생하는 이벤트dragstartdragdragend드롭 대상(또는 잠재..

이전 포스팅에서 이벤트의 전반적인 흐름에 대해 알아보았다. [JavaScript] 이벤트 버블링(Bubbling), 이벤트 위임(Delegation)프로젝트 진행 중 DOM API 를 활용하여 이벤트를 다룰 일이 생겼다.모든 컴포넌트에 이벤트 등록을 하던 중, 해당 방식이 매우 비효율적인 것을 알게 되었다.이 글을 통해 이벤트의 전반적인 흐름junhee1203.tistory.com 위 글의 마지막에서 이벤트 위임을 사용할 때,Element.closest 메소드가 유용하다고 언급하였다.이번 글에서 해당 메소드의 정의가 무엇인지, 왜 이벤트 위임에서 유용한지 알아보겠다. 1️⃣ Element.closest 정의closest 는 Element 객체의 메소드이다. 이때, Element는 HTML 의 요소이다.따..

프로젝트 진행 중 DOM API 를 활용하여 이벤트를 다룰 일이 생겼다.모든 컴포넌트에 이벤트 등록을 하던 중, 해당 방식이 매우 비효율적인 것을 알게 되었다.이 글을 통해 이벤트의 전반적인 흐름에 대해 정리해보겠다. 1️⃣ DOM 이란 ?이벤트에 대해 알아보기 전에, DOM(Document Object Model)에 대해 알아볼 필요가 있다.우리가 웹사이트에 접속하면 브라우저 화면에 웹사이트의 내용이 보여지기 전까지어떠한 일이 발생할까 ? 1. 브라우저가 서버에게 요청2. 서버는 응답으로 브라우저에게  HTML, CSS, JS 파일 전송3. 브라우저가 HTML 파일을 읽고 화면에 렌더링위의 과정을 통해 우리 눈에 웹페이지가 보이게 된다.DOM을 이해하기 위해 3번의 과정을 자세히 알아보자. 브라우저는 ..

JavaScript 의 대표적인 모듈 시스템은 크게 두 가지가 있다. 1. CommonJS2. ES6 CommonJS 는 초창기 Node.js 의 등장과 함께 나왔다면 , ES6 는 2015년에 등장하였다.위 두 방식 모두 모듈을 다루는 방식이지만, 문법적 차이가 있다.현재는 ES6 방식이 많이 이용되지만, Node.js 를 다루다 보면 CommonJS 방식도 심심치 않게 보인다.따라서, 두 방식 모두 이해할 필요가 있고 이 글을 통해 정리해보겠다. 1️⃣ CommonJS CommonJS 는 모듈로 내보낼 때 exports와 module.exports 를 사용한다. 그리고 내보낸 모듈을 받아올 때는 require 함수를 사용한다.그렇다면, 각각 언제 사용하는지 알아보자. ✅ module.exportsmo..