Monkeykim's blog

[2024.10.21]TypeScript에서 interface와 type 비교 및 상속, 그리고 Omit과 Pick 활용하기

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

Angular는 컴포넌트 간의 상호작용을 효과적으로 관리하기 위해 다양한 생명주기 훅(Lifecycle Hook)을 제공한다. 그 중 하나가 바로 ngOnChanges()인데, 이 훅은 @Input() 속성 값이 변경될 때마다 호출되며, 컴포넌트가 부모로부터 전달받은 데이터가 변했을 때 적절한 처리를 할 수 있도록 도와준다.ngOnChanges()란?ngOnChanges()는 Angular 컴포넌트의 생명주기 훅 중 가장 먼저 실행되는 메서드이다. 이 훅은 @Input() 데코레이터로 부모 컴포넌트로부터 전달받은 값이 변경될 때마다 호출된다. 변경된 값뿐만 아니라 이전 값도 확인할 수 있어, 값이 변할 때마다 원하는 로직을 수행할 수 있다.ngOnChanges()가 호출될 때ngOnChanges()는 다..

Angular를 사용하다 보면 부모 컴포넌트와 자식 컴포넌트 간의 데이터 통신이 필수적이다. 이때 중요한 두 가지 데코레이터가 바로 @Input()과 @Output()이다. 이 글에서 각각의 역할과 사용법을 예시를 통해 쉽게 설명하려고 한다.@Input() – 부모에서 자식으로 데이터 전달@Input()은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트에 텍스트 메시지나 객체와 같은 데이터를 보내고 싶을 때 유용하다.@Input() 사용 예시1. 부모 컴포넌트 (ParentComponent)부모 컴포넌트에서 자식 컴포넌트에 메시지를 전달하고자 한다.부모 컴포넌트// parent.component.tsimport { Component } from..

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

Angular에서는 컴포넌트 간에 데이터를 주고받을 때, 주로 부모-자식 관계를 활용한다. 그중에서 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달할 때 사용하는 것이 바로 @Output() 데코레이터와 EventEmitter이다.1. 자식 컴포넌트에서 EventEmitter 선언먼저, 자식 컴포넌트에서 @Output() 데코레이터로 이벤트를 선언한다. 이 이벤트는 부모 컴포넌트에 전달되어 특정 작업을 실행하게 만든다. 예를 들어, 자식 컴포넌트에서 버튼을 클릭했을 때 부모에게 그 정보를 전달하고 싶을 때 사용할 수 있다.import { Component, Output, EventEmitter } from '@angular/core';@Component({ selector: 'app-child', t..

Java - do while 문do { 코드 1} while (조건문)코드 2Do while 문은 반드시 1번 이상 실행된다.Do 블럭의 코드 1을 실행한다.While 조건문에 맞지 않는다면, 아래 코드 2를 실행한다.Do 블럭의 코드 1을 실행한다. While 조건문에 맞는다면, 다시 Do 블럭의 코드 1을 실행한다.While 조건에 맞지 않게 된다면 코드 2를 실행한다.C언어 - | 연산 (or 비트연산) 4 = 2진수 -> 0 1 0 07 = 2진수 -> 0 1 1 1or 비트연산 -> 0 1 1 1 -> 10진수 = 7or(|)는 둘 다 참이어야 한다.xor(^)는 둘 다 달라야 참이다. 화이트 박스 테스트 (구 결 조 조 변 다 기 제 데 루)구문 커버리지(= 문장 커버리지)명령문을 적어도 한 ..

문제 설명한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다.각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 조각으로 만들 수 있는 소수가 몇 개인지 return 하도록 solution 함수를 완성해주세요.제한사항numbers는 길이 1 이상 7 이하인 문자열입니다.numbers는 0~9까지 숫자만으로 이루어져 있습니다."013"은 0, 1, 3 숫자가 적힌 종이 조각이 흩어져있다는 의미입니다.입출력 예numbers return"17"3"011"2입출력 예 설명예제 #1[1, 7]으로는 소수 [7, 17, 71]를 만들 수 있습니다.예제 #2[0, 1, 1]으로는 소수 [11, 101]를 만들 수 있습니다.1..

문제 설명수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ...2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ...3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해주세요..

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..