Monkeykim's blog

Record는 TypeScript에서 제공하는 유틸리티 타입으로, 객체의 키와 값의 타입을 명시적으로 지정할 때 사용됩니다. 이를 통해 객체의 구조를 더 명확히 정의할 수 있습니다.기본 문법Record Keys: 객체의 키 타입 (일반적으로 문자열, 숫자, 또는 유니온 타입).Type: 키에 해당하는 값의 타입.사용 예시1. 간단한 객체 정의type User = Record;const users: User = { id: '123', name: 'Alice',};  string 키: 객체의 모든 키가 문자열이어야 함.string 값: 모든 값이 문자열이어야 함.2. 키와 값의 타입을 명시적으로 정의 type Settings = Record;const appSettings: Settings = { th..

TypeScript를 사용하다보면 유니온 타입(|) 을 자주 만나게 됩니다. 유니온 타입은 여러 타입이 혼합된 경우를 의미하는데, 코드의 안전성을 높여주지만, 다양한 타입이 섞여 있으면 원하는 기능을 작성하기 어려울 수 있습니다. 이때 타입 가드(type guard)를 사용하면 특정 타입을 확인하고 좁힐 수 있어, 더 안전한 코드를 작성할 수 있습니다.타입 가드(Type Guard)란?타입 가드(type guard)는 특정 조건을 통해 유니온 타입을 특정 타입으로 좁히는 방법입니다. 이를 통해 TypeScript는 조건문 내부에서 해당 타입을 안전하게 사용할 수 있게 도와줍니다. in 연산자를 활용한 타입가드 예시type Dog = { bark: () => void };type Cat = { meow: ..

JavaScript에서 배열이나 객체의 값을 비교할 때 every 메소드는 아주 유용하다. 이 메소드는 배열의 모든 요소가 주어진 조건을 만족하는지 확인해주는데, true나 false를 반환하는 게 특징이다. 객체의 속성값을 비교할 때도 이를 잘 활용하면 깔끔하게 비교 작업을 처리할 수 있다.every 메소드 every 메소드는 배열의 모든 요소가 특정 조건을 만족하는지 확인할 때 사용된다. 모든 요소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환한다.const numbers = [2, 4, 6, 8];const allEven = numbers.every(num => num % 2 === 0);console.log(allEven); // true위 코드에서는 배열 numbers의..

TypeScript를 사용하다 보면 객체의 구조를 정의할 때 가장 자주 사용하는 것이 바로 interface와 type입니다. 이 둘은 매우 유사하지만, 용도와 사용 방식에서 미묘한 차이가 있습니다. 이번 글에서는 interface와 type의 차이를 살펴보고, 어떻게 상속받거나 확장할 수 있는지 알아보겠습니다. 또한, Omit과 Pick 같은 유틸리티 타입을 통해 좀 더 유연하게 타입을 관리하는 방법을 배워보겠습니다.1. interface와 type의 차이interface란?interface는 주로 객체의 구조를 정의할 때 사용합니다. 특히 객체 지향 프로그래밍 스타일에 익숙하다면, 상속을 통해 인터페이스를 확장하는 방식이 매우 자연스러울 것입니다.interface Person { name: stri..

JavaScript를 사용하면서 한 번쯤 들어봤을 프로토타입(prototype)과 __proto__. 이 둘은 JavaScript의 객체지향 프로그래밍에서 매우 중요한 개념이지만, 처음 접할 때는 다소 혼란스러울 수 있다. 이번 글에서는 ES6 문법을 바탕으로 이 개념들을 쉽게 이해할 수 있도록 설명하려고 한다.1. Prototype의 역할JavaScript는 프로토타입 기반 상속을 사용한다. 즉, 각 객체는 다른 객체로부터 속성이나 메서드를 상속받을 수 있는데, 이때 사용되는 것이 바로 prototype이다. 모든 함수(클래스 포함)는 생성될 때 prototype 객체를 가지고 있으며, 이 객체에 있는 메서드와 속성을 다른 객체들이 공유하게 된다.class A { constructor() { t..

Undo & Redo 단축키 작업 중 이벤트 처리 방지event.preventDefault()와 event.stopPropagation()은 이벤트가 발생했을 때, 그 이벤트의 기본 동작과 전파를 제어하기 위해 사용된다.이를 통해 단축키로 Ctrl + z 또는 Ctrl + shift + z 를 사용할 때, 다른 기본 동작이나 불필요한 이벤트 처리를 방지할 수 있다. event.preventDefault()이 메서드는 이벤트의 기본 동작을 막는 역할을 한다.예를 들어, 브라우저에서 Ctrl + z는 기본적으로 "마지막 작업 되돌리기" 기능을 수행한다. 그러나, 이 경우에 애플리케이션에서 커스텀한 undo 로직을 처리해야 하므로, 브라우저의 기본 undo 동작을 막아야 한다.즉, 이 메소드로 인해 브라우저가..

History 관리 (Undo, Redo)회사에서 History 관리에 대한 요구사항을 받았고, 이를 수행하기 위해 디자인 패턴 중 Command 패턴을 이용하기로 하였다. Command 패턴은 소프트웨어 디자인 패턴 중 하나로, 주로 실행 취소(Undo)와 다시 실행(Redo) 기능을 구현할 때 많이 사용된다. 이 패턴에서는 각 작업을 커맨드 객체로 캡슐화하여, 작업에 대한 정보를 독립적으로 관리하고 실행할 수 있게 한다. 예를 들어, 사용자가 텍스트를 입력하거나 객체를 추가하는 등의 작업을 할 때, 각각의 작업을 커맨드 객체로 만들어 저장한다. 이렇게 하면 언제든지 실행 취소(Undo)나 다시 실행(Redo)할 수 있어, 복잡한 작업도 쉽게 관리할 수 있다. command-manager.tsimpor..