프론트엔드
[React] SOLID 원칙을 컴포넌트에 적용하기
좋은 컴포넌트 설계는 정답이 없습니다. 그래서 어렵죠. 저 또한 많은 시행착오를 겪으면서 여러 개념들을 찾아 공부하게 되었습니다. 그러다 객체지향에서 좋은 해결책을 얻게 되어 이를 정리해보고자 합니다. 가장 먼저 SOLID 원칙을 알아보며 이를 컴포넌트에 적용해보도록 하겠습니다. 아래 자료들을 참고했습니다. Eduardo Moniz의 Applying SOLID To React July 2020 React Lunch & Learn: SOLID Principles in React 로버트 C. 마틴의 Clean Architecture Applying SOLID principles in React 1️⃣ 단일 책임 원칙 (SRP, Single Responsibility Principle) 개념 하나의 모듈은 하..
[TypeScript] 유틸리티 타입 구현하기 (Utility Types)
TypeScript이 제공하는 다양한 유틸리티 타입에 대해 정리하고자 합니다. 내부 로직 크게 어렵지 않기 때문에 자주 쓰이는 유틸들은 직접 구현해보는 것을 추천합니다. (면접 때 물어봐서 당황했던 기억이 나네요 😅) 💡 용어 정리 T : 타입 U : 또 다른 타입 K : 속성(key) Partial T의 모든 프로퍼티를 선택적 프로퍼티로 변경한 새로운 타입을 반환합니다. 구현 type Partial = { [P in keyof T]?: T[P]; }; keyof T는 T의 모든 키 값을 가지는 유니온 타입을 의미합니다. 인덱스 시그니처 문법이 아직 익숙지 않으면 이 글을 참고하면 좋습니다. 예시 interface User { name: string; age: number; } interface Part..
[TypeScript] 제네릭 (Generic)
제네릭은 타입을 일반화하여 재사용성을 높이는 프로그래밍 기법입니다. 이를 통해 함수, 클래스 등을 다양한 타입에 대해 범용적으로 사용할 수 있게 됩니다. 제네릭 (Generics) 제네릭은 타입을 선언 시점이 아닌 생성 시점에 결정하는 프로그래밍 기법입니다. 이를 통해 함수, 클래스, 인터페이스 등을 다양한 타입에 대해 재사용할 수 있습니다. 제네릭의 기본 구조와 호출 방식은 다음과 같습니다. T는 Type의 약자로써 주로 관용적으로 사용하는 타입 변수입니다. function getValue(value: T): T { return value; } getValue('hello'); getValue(10); getValue(true); 둘 이상의 타입 변수는 주로 T 다음의 알파벳 순서대로 표현합니다. fu..
[TypeScript] Interface와 Type Alias의 차이점
인터페이스와 타입 앨리어스는 직접 타입을 정의할 수 있다는 점에서 유사합니다. 하지만 각각의 특징과 차이점이 존재하기 때문에 제대로 알고 사용하는 것이 좋습니다. 이 글을 통해 인터페이스와 타입 앨리어스, 그리고 둘의 차이점에 대해 알아보겠습니다. 인터페이스 (Interface) 객체는 넓게 묶으면 Object 타입이 되지만 사실 객체의 내부 구조는 제각각 다릅니다. 인터페이스는 객체가 가질 수 있는 다양한 구조들을 직접 타입으로 만들 수 있는 방법입니다. 이를 통해 객체 타입을 구체화할 수 있고, 인터페이스를 재사용할 수 있다는 장점이 있습니다. 기본 구조 interface 키워드를 통해 인터페이스를 정의할 수 있습니다. 인터페이스 내부는 단지 프로퍼티와 메서드의 타입에 대해서 정의만 합니다. (구현 ..
[TypeScript] 타입 가드 (Type Guard)
타입 가드는 조건문 안에서 타입 범위를 한정시켜줄 수 있는 방법입니다. 이 글을 통해 타입 가드의 등장 배경, 개념, 사용 방법에 대해 알아보겠습니다. 등장 배경 interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } const introduce = (): Developer | Person => { return { name: 'Kim', age: 20, skill: 'React' }; }; let kim = introduce(); console.log(kim.skill); // Error 유니온 타입은 공통된 속성(name 프로퍼티)에만 접근할 수 있습니다. 그래서 skill 속성..
[TypeScript] 타입 단언 (Type Assertion)
종종 실제 타입이 컴파일러가 추론한 타입보다 구체적인 상황이 발생합니다. 이러한 상황에서 타입 단언을 쓰면 컴파일러에게 특정 타입을 단언할 수 있습니다. 타입 단언 (Type Assertion) 종종 컴파일러보다 개발자가 타입을 더 잘 알 때가 있습니다. 주로 데이터의 실제 타입이 컴파일러가 추론한 타입보다 구체적인 상황이 됩니다. 타입 단언은 컴파일러에게 특정 타입을 명시적으로 단언하는 개념입니다. 타입 단언은 런타임에 영향을 미치지 않습니다. 즉 특별한 검사나 데이터의 재구성이 발생하지 않습니다. 그저 타입 체커의 에러를 없애기 위해 컴파일 과정에서 사용하는 문법입니다. let a; a = 20; a = 'hello'; let b = a; // b: any let b = a as string; // ..
[TypeScript] 타입 종류
TypeScript에 대해 본격적인 포스팅을 남기고자 합니다. 이 글을 통해 먼저 TypeScript의 기본 타입의 종류에 대해 알아보겠습니다. Boolean Boolean 타입은 참(true)과 거짓(false) 값을 가질 수 있습니다. let isBoolean: boolean; let isDone: boolean = false; Number Number 타입은 모든 부동 소수점 값을 가질 수 있습니다. ES6의 2진수 및 8진수 리터럴 값 또한 지원합니다. let num: number; let integer: number = 6; let float: number = 3.14; let hex: number = 0xf00d; // 61453 let binary: number = 0b1010; // 10 ..
[JavaScript] innerHTML, innerText, textContent 차이점
innerHTML, innerText, textContent는 노드의 특정 값을 읽어오고 설정할 수 있다는 점에서 비슷합니다. 하지만 각자 차이점이 존재하므로 이 글을 통해 정리하고자 합니다. 예제 다음 예제를 실행하여 각각의 차이점을 알아보겠습니다. 안녕하세요. 테스트 입니다. 숨겨진 글 const test = document.getElementById("test"); console.log(test.innerHTML) console.log(test.innerText) console.log(test.textContent) innerHTML 안녕하세요. 테스트 입니다. 숨겨진 글 innerHTML는 해당 노드 안에 있는 모든 HTML 마크업을 문자열로 반환하거나 직접 변경합니다. innerHTML을 사용하..
[React] useEffect의 철학과 Lifecycle
useEffect는 클래스 컴포넌트에서 Lifecycle 메서드를 통해 복잡하게 다뤘던 Side Effect 로직을 개선합니다. 컴포넌트의 마운트, 업데이트, 언마운트 등의 Lifecycle을 하나의 useEffect hook으로 처리하기 때문입니다. 이를 통해 함수형 컴포넌트에서도 쉽게 Side Effect를 다룰 수 있습니다. 하지만 useEffect의 철학은 단순히 Lifecycle을 대체하는 것이 전부가 아닙니다. "thinking in effects." useEffect의 철학은 Side Effect를 Lifecycle이 아닌, 관심사에 따라 관리할 수 있게 하는 것입니다. (Dan Abramov의 A Complete Guide to useEffect 내용이 많은 도움 되었습니다.) 등장 배경..