sol의 개발로그

🔎 Mouse & Pointer Events 웹 애플리케이션에서 마우스, 터치 스크린, 트릭패드 등과 같은 입력 장치와 상호 작용하기 위한 이벤트를 다루는데 사용이 된다. 사용자가 웹 페이지와 상호 작용하고 동적인 기능을 제공하는데 중요하다. 📌 주요 마우스, 포인터 이벤트 1. click: 요소를 클릭할 때 발생하는 이벤트로 마우스 버튼을 클릭하거나, 터치 스크린을 터치하거나, 트랙패드를 탭할 때 발생 const parentEl = document.querySelector(".parent"); const childEl = document.querySelector(".child"); childEl.addEventListener("click", () => { childEl.classList.toggle("..

🔎 tsconfig.json 파일은 뭘까? Typescript프로젝트의 설정파일로 해당 파일을 사용하여 Typescript 컴파일러에 프로젝트 설정을 제공하고 컴파일 시 동작을 구성할 할 수 있으며 tsconfig.json 파일은 프로젝트 루트 디렉터리에 위치해야 한다. 🔎 주요 설정옵션과 파일 구조 알아보기 { "compilerOptions": { /* 컴파일러 옵션 설정 */ }, "include": [ /* 포함할 파일과 디렉터리 패턴 설정 */ ], "exclude": [ /* 제외할 파일과 디렉터리 패턴 설정 */ ] } 📍compilerOptions : 만들어진 TS환경의 Code를 JS로 변환하기 위해서 어떤 옵션이 세부적으로 필요한지 결정 세부 내용 알아보기 // 따로 설정하지않으면 아래와..

🔎 패키지 타입선언이란? Typescript환경에서 Javascript 패키지를 사용할 때 해당 패키지의 타입 정보를 정의하고 타입 안정성을 확보하는 방법이다. 이러한 타입 선언은 `d.ts` 확장자를 가진 파일로 작성되며 패키지가 제공하는 함수, 클래스, 객체 및 모듈의 타입정보를 설명한다 import _ from "lodash"; const str = "the brown fox jumps over the laz dog."; console.log(_.camelCase(str)); console.log(_.snakCase(str)); console.log(_.kebabCase(str)); 위와 같은 코드로 작성 시 왼쪽과 같은 Error가 발생한다. 이유는? 1. 패키지가 설치가 안되어있다 (packag..

🔎 제네릭이란? TypeScript와 같은 프로그래밍 언어에서 사용되는 강력한 기능 중 하나로 타입을 파라미터 화하여 코드의 재사용성을 높이고, 타입 안정성을 확보하는 데 사용한다. 제네릭은 크게 함수, 클래스, 인터페이스에서 사용할 수 있는 데 사용하면 함수, 클래스, 인터페이스에서 여러 다양한 타입을 다룰 수 있다. ❓ 제네릭을 왜 사용하는가? 위와 같은 코드에서 함수의 매개변수 타입을 위해 오버로딩을 하여 작성하였지만 toArray함수를 사용하는 방식은 여러 개가 있을 수 있는데 함수를 사용할 때마다 오버로딩 개념을 계속해서 추가해 나가기는 어려울 것으로 판단이 된다. 이때 제네릭문법을 통해 위와 같은 코드를 개선할 수 있다. 🔎 제네릭 함수 사용예시 interface Obj { x: number;..

🔎 예시코드 class UserA { constructor(first: string, last: string, age: number) { this.first = first; this.last = last; this.age = age; } getAge() { return `${this.first} ${this.last} is ${this.age}`; } } class UserB extends UserA { getAge() { return `${this.first} ${this.last} is ${this.age}`; } } class UserC extends UserB { getAge() { return `${this.first} ${this.last} is ${this.age}`; } } 위와 같은 코드..

🔎 명시적 this interface Cat { name: string; age: number; } const cat: Cat = { name: "Lucy", age: 3, }; //this의 경우 호출 될 때 그 대상에 따라 정의 function hello(message: string) { console.log(`Hello ${this.name}, ${message}`); } //call 메소드의 경우 함수나 메서드 뒤에서 바로 사용해서 함수나 메서드가 어떤 대상에서 실행될 것인지 결정 hello.call(cat, "You are pretty awesome!"); //Hello Lucy, You are pretty awesome! call 매개변수로 cat 객체를 받고 있기 때문에 hello함수를 ca..

🔎 타입 별칭(Alias) 이란? 새로운 타입 이름을 정의하는데 사용되는 기능으로 타입 별칭을 사용하면 긴 형식을 간결하게 표현할 수 있으며, 가독성을 향상할 수 있다. 주로 Union 타입, Intersection 타입, 복잡한 객체 타입, 함수 타입 등을 더 명확하게 표현해 주기 위해서 사용된다. 간단 요약 : 타입의 별도이름 또는 별명이라고도한다. 🔎 예시코드 1. string 타입에 TypeA라는 별칭(별명)을 붙여주기! type TypeA = string; 2. Union 타입에 TypeB라는 별칭을 붙여주기! type TypeB = string | number | boolean; 3. 객체 또는 Tuple 타입을가지고 있는 User 타입을 만들어볼까? type User = | { name: s..