ayeongjin 님의 블로그

1. Redux의 핵심 구조 ✅ Store 내부 (Redux의 핵심 요소)애플리케이션 상태(state)를 저장하고 관리하는 역할입니다.state: 애플리케이션의 현재 상태 (객체 형태)reducer: 상태(state)를 변경하는 순수 함수getState(): 현재 상태를 반환하는 함수dispatch(action): 액션을 전달하여 상태 변경 요청subscribe(): 상태 변경을 감지하고 실행할 함수를 등록 ✅ Store 외부 (Redux를 사용하는 요소)Redux는 단독으로 동작하는 게 아니라 UI와 함께 사용됩니다.UI → Action → Store → Render UIAdmin (Redux DevTools): 상태 변화를 추적하고 디버깅하는 도구Render (React/Next.js UI..

유틸리티 타입타입스크립트가 자체적으로 제공하는 특수한 타입 (제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 유용한 타입들을 모아 놓은 것을 의미) 타입스크립트가 제공하는 다양한 유틸리티 타입들Documentation - Utility TypesTypes which are globally included in TypeScripthttps://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility TypesTypes which are globally included in TypeScriptwww.typescriptlang.org  가장 많이 사용되는 유틸리티 타입들  1. Part..

조건부 타입extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법 type A = number extends string ? number : string;조건부 타입은 위 코드 처럼 number extends string ? 과 같은 조건식이 있을 때이 조건이 참이라면 ? 우측의 타입인 Number 타입이 결과가 되고이 조건이 거짓이라면 라면 : 우측의 타입인 String 타입이 결과가 된다.위 조건부 타입의 조건식 number extends string은 number 타입이 string 타입의 서브타입이 아니기 때문에 거짓이 되고 그 결과 타입 A는 string 타입이 된다. ex. 조건식에 객체 타입 사용type ObjA = { a: number;};type Obj..

인덱스드 엑세스 타입인덱스를 이용해 다른 타입내의 특정 프로퍼티의 타입을 추출하는 타입 인덱스드 엑세스 타입은 객체, 배열, 튜플에 사용할 수 있다. 1. 객체 프로퍼티의 타입 추출하기 사용 전interface Post { title: string; content: string; author: { id: number; name: string; };}const post: Post = { title: "게시글 제목", content: "게시글 본문", author: { id: 1, name: "이정환", },};function printAuthorInfo(author: { id: number; name: string }) { console.log(`${author.id}..

제네릭 인터페이스인터페이스에 타입 변수를 선언해 사용 interface KeyPair { key: K; value: V;}키페어를 저장하는 객체의 타입을 제네릭 인터페이스로 정의다음과 같이 변수의 타입으로 정의하여 사용let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};변수 keyPair의 타입으로 KeyPair를 정의그 결과 K에는 string, V에는 number 타입이 각각 할당되어 key 프로퍼티는 string 타입이고 value 프로퍼티는 number 타입인 객체 타입이 된다.따라서 값으로 해당 타입의 객체를 저장변수 keyPair2의 타입으로 KeyPair를..

제네릭이란함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 타입스크립트의 놀라운 기능 중 하나 1. 제네릭이 필요한 상황 1) 제네릭 사용 전다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수가 하나 필요하다고 가정다양한 타입의 매개변수를 제공받아야 하기 때문에 매개변수 value의 타입을 일단 any 타입으로 입력func 함수에 number 또는 string 타입을 인수로 전달해도 any타입으로 추론하는 문제점 발생// 제네릭 사용 전function func(value: any) { return value;}let num = func(10);// any 타입let str = func("string");// any 타입❗️원하는 것인수로 Number..

자바스크립트의 클래스란?2025.01.27 - [Frontend/JavaScript] - [JavaScript] 클래스 [JavaScript] 클래스자바스크립트의 클래스클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법 // 사용 전 : 코드 중복let studentA = { name: "이정환", grade: "A+", age: 27, study() { console.log("열심히 공부 함");ayeongjin.tistory.com  타입스크립트의 클래스타입스크립트에서는 클래스의 필드를 선언할 때 타입 주석으로 타입을 함께 정의해주어야 한다.타입 주석으로 타입을 정의해주지 않으면 함수 매개변수와 동일하게 암시적 any 타입으로 추론 (엄격한 타입 검사 모드(strict 옵션이 true로 ..

인터페이스타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법interface Person { name: string; age: number;}이렇게 정의한 인터페이스를 타입 주석과 함께 사용해 변수의 타입을 정의할 수 있다.const person: Person = { name: "이정환", age : 27};이렇듯 인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 거의 같다고 볼 수 있다. 1. 선택적 프로퍼티인터페이스에서도 동일한 방법으로 선택적 프로퍼티 설정이 가능하다.interface Person { name: string; age?: number;}const person: Person = { name: "이정환", // age: 27,}; 2. 읽기 전용 프로퍼티..

함수의 타입을 정의하는 방법자바스크립트 : 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명 타입스크립트 : 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는지 설명// 함수를 설명하는 가장 좋은 방법// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 설명function func(a: number, b: number): number { return a + b;}함수의 반환값 타입은 자동으로 추론되기 때문에 다음과 같이 생략 가능function func(a: number, b: number) { return a + b;}1. 화살표 함수 타입 정의하기화살표 함수의 타입 정의 방식은 함수 선언식과 동일const add = (a: number, b: number): number => a + b..

타입 추론타입스크립트는 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론한다.ex. 타입 추론 가능한 경우let a = 10;// number 타입으로 추론ex. 타입 추론 불가능한 경우function func(param){ // 오류}타입 추론이 불가능한 변수(ex 매개변수)에는 암시적으로 any 타입이 추론된다.그러나 엄격한 타입 검사 모드 (tsconfig.json의 strict 옵션을 true로 설정)에서는 이런 암시적 any 타입의 추론을 오류로 판단1. 타입 추론이 가능한 상황들1) 변수 선언let a = 10;// number 타입으로 추론let b = "hello";// string 타입으로 추론let c = { id: 1, name: "이정환", profile: { nic..