xu의 성장일지

RTK QueryRedux Toolkit의 강력한 데이터 패칭 및 캐싱 라이브러리1. 데이터 패칭 및 캐싱2. 자동 상태 관리- API 요청의 상태(isLoading, isSuccess, isError, isFetching 등)를 자동으로 관리- 수동으로 로딩 상태를 설정하거나 에러를 처리할 필요 X3. 데이터 변조 지원- POST, PUT, DELETE 요청과 같은 데이터 변조 작업도 간단히 구현 가능4. React Hooks 자동 생성- API 엔드포인트 정의만 하면 React Hooks가 자동으로 생성됨.- 이를 통해 컴포넌트에서 쉽게 API를 호출할 수 있음. RTK Query의 주요 구성 요소1. createApiAPI 서비스 로직을 정의하는 데 사용import { createApi, fetch..

전에 회원가입, 로그인 페이지를 만들 때는 직접 유효성 검사 코드를 작성했었는데,이번에는 react-hook-form과 zod를 활용해서 진행했다. react-hook-formReact에서 폼을 효율적으로 관리하기 위한 라이브러리. 1. 폼 상태 관리- useState 없이 폼 상태를 관리하여 성능 최적화2. 간편한 유효성 검사- zod, Yup 등의 스키마를 통해 유효성 검사 가능3. 최소한의 리렌더링- 입력 필드마다 독립적으로 상태를 관리하여 불필요한 리렌더링 방지!4. 타입스크립트 지원 react-hook-form 핵심 개념// register// 입력 필드를 react-hook-form에 등록!// handleSubmit// 폼 제출 시 데이터를 검증!// 제출 시 실행할 콜백 함수 호출// fo..

처음에는 select 태그를 활용해서 만들었는데, hover 될 때 파란 배경이 싫어서 바꾸려니까select 태그는 스타일 적용이 제한적이라고 해서...직접 드롭다운 컴포넌트를 만든 후에이걸로 생년월일 드롭다운을 만들었다.// SelectDropdown Props 타입 정의export type SelectDropdownProps = { options: T[]; selectedValue: T | string | null; placeholder: string; onSelect: (value: T) => void;};우선 드롭다운 컴포넌트의 props 타입을 정해주었다.options에는 배열이 들어가고(연, 월, 일),selectedValue는 현재 선택되는 값이 들어간다.placeholder는 말 그..

cva (Class Variance Authority)Tailwind CSS 클래스의 동적 관리를 하는 라이브러리. 기본 스타일과 다양한 변형을 정의하고 조합하여 효율적으로 관리가 가능하다!→ 재사용성이 높음cva('base-class', { variants: { // 변형에 따라 추가될 클래스 정의 (size) size: { sm: 'w-4 h-4', lg: 'w-8 h-8', }, }, defaultVariants: { // 기본으로 적용되는 값 size: 'sm', },}); clsx조건부로 클래스를 조합하는 라이브러리clsx('base-class', condition && 'conditional-class')condition이 true일 때 conditio..

TypeScript에서 모듈화는 코드를 여러 파일로 나누고 필요한 부분만 불러와 사용하는 방법이다.이는 코드를 더 구조화되고 유지보수하기 쉽게 만들어준다.TypeScript는 JavaScript의 ES6 모듈 시스템을 기반으로 하며,  import 와  export 를 사용해 모듈을 관리한다. 모듈(Module)이란?TypeScript에서 파일 하나가 하나의 모듈!파일 내부의 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내거나, 다른 파일에서 가져올 수 있다. export 키워드Named Export (이름 내보내기)// math.tsexport const add = (a: number, b: number): number => a + b;export const subtract = (a:..

TypeScript의 비동기 함수는 JavaScript의 비동기 처리를 기반으로 동작하며,async, await 키워드를 사용해 비동기 작업을 더 직관적이고 읽기 쉽게 작성할 수 있게 해준다. 비동기 함수란? Promise 를 반환하는 함수.함수의 실행이 끝난 후에도 처리 결과가 곧바로 반환되지 않고, 작업이 완료된 시점에 값을 반환한다.async function Func(): Promise { // 비동기 작업 수행} async 키워드async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환한다.함수 내부에서 반환하는 값은 자동으로 Promise로 감싸진다.async function sayHello(): Promise { return "Hello, TypeScript!"; // 자..

상수 단언은 값을 리터럴 타입으로 고정하여 변수의 타입을 더욱 엄격하게 제어할 수 있는 기능이다.이를 통해 컴파일러가 해당 값이 변경하지 않는 것을 보장하고, 정확한 타입 추론을 도와준다.변수 값이 고정되어야 하는 상황에서 특히 유용하다! 특징1. 확장할 수 없는 리터럴 타입변수의 타입을 리터럴 값으로 고정하여, 확장할 수 없게 만듦.2. 애플리케이션 전역에서 일관된 값 사용값을 상수로 고정하여 전역에서 올바른 값을 일관되게 사용할 수 있게 한다.3. 컴파일러의 정확한 타입 추론TypeScript 컴파일러가 값의 타입을 정확히 추론할 수 있게 돕는다. let greeting = "Hello, World!";// TypeScript는 greeting의 타입을 string으로 추론const greetingC..

유틸리티 타입은 타입스크립트에서 제공하는 내장 타입으로, 기존 타입을 변환하거나 새로운 타입을 생성하는 데 사용된다.이러한 유틸리티 타입은 코드를 간결하게 작성하고 재사용성을 높이는 데 도움이 된다. Partial기존 타입의 모든 속성을 선택적으로 만드는 데 사용된다.즉, 해당 타입의 모든 속성이 필수가 아니라 선택적이 된다.interface User { name: string; age: number;}// 모든 속성이 선택적인 UserPartial 타입type UserPartial = Partial;// UserPartial 타입 사용const partialUser: UserPartial = {}; Readonly기존 타입의 모든 속성을 읽기 전용으로 만드는 데 사용된다.즉, 해당 타입의 모든 속성..

TypeScript는 기본 타입 외에도 복잡한 타입 관계와 구조를 표현할 수 있는 다양한 고급 타입 기능을 제공한다. 교차 타입 (Intersection Type)여러 타입을 결합하여 단일 타입으로 만드는 방법(저번 블로그에도 작성했지만 한 번 더 씀)- 이는 두 개 이상의 타입을 모두 만족해야 하는 타입을 의미.-  &  연산자를 사용하여 정의.type Person = { name: string; age: number;};type Employee = { employeeId: number;};type EmployeeDetails = Person & Employee;const employee: EmployeeDetails = { // name, age, employeeId 모두 포함 name: "J..

타입스크립트 (TypeScript)마이크로소프트가 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합.타입스크립트는 자바스크립트를 확장하여 정적 타입 검사와 고급 기능을 제공!■  정적 타입 시스템: 코드를 작성하는 동안 타입을 명시하거나 자동으로 추론하여, 런타임 전에 타입 관련 오류를 잡을 수 있게 함. ■  ES6+ 문법 지원 및 트랜스파일링: 최신 ECMAScript의 문법 사용 가능, 브라우저 호환성을 위해 ES5로 트랜스파일 됨. ■  객체지향 프로그래밍 지원 강화: 클래스, 인터페이스, 모듈 등 객체지향 개념을 자바스크립트에서 더 자연스럽게 사용할 수 있도록 도움 타입스크립트의 등장 배경자바스크립트의 단점을 보완하기 위해 등장!1. 자바스크립트의 동적 타입 문제- 자바스크립트는 런..