개발새발

React에서 제공하는 Hook들은 모두 타입스크립트와 함께 사용할 수 있도록 정교하게 정의되어 있다. 본 글에서는 useState, useEffect, useRef, useMemo, useCallback 등 대표적인 Hook의 타입 정의를 공식 타입 정의 파일을 기준으로 하나씩 분석하고, 이를 실제 코드와 연결해 살펴보려고 한다. 1. useState 타입 분석useState는 상태와 해당 상태를 업데이트하는 함수를 반환한다. 다음과 같이 정의되어 있다:function useState(initialState: S | (() => S)): [S, Dispatch>];function useState(): [S | undefined, Dispatch>]; 핵심 개념Dispatch는 (value: A) => ..

React는 자바스크립트로 UI를 구성할 수 있도록 도와주는 라이브러리이다. 이때 사용하는 문법인 JSX는 HTML과 유사하게 생겼지만 자바스크립트 안에서 실행되며, 타입스크립트와 함께 사용할 경우 특별한 설정이 필요하다.이 글에서는 React 프로젝트에서 타입스크립트를 제대로 작동시키기 위한 설정과 함께, React 내부의 타입 시스템을 설명하려고 한다. 1. React는 타입스크립트를 지원하는가?React는 자체적으로 타입 선언을 제공하지 않는다. 대신 DefinitelyTyped 커뮤니티에서 관리하는 @types/react 패키지를 통해 타입 정의를 제공한다. 설치 명령어npm i react@18.2.0 @types/react@18.0.28npx tsc --init 설치 후 node_modules..

TypeScript를 사용할 때 가장 매끄럽게 작동하는 기능 중 하나는 타입 자동 추론이다. axios와 같은 외부 라이브러리를 import할 때, 별도의 타입 선언 없이도 .ts 파일에서 자동으로 타입 정보를 인식하고 에러를 잡아준다. 그렇다면 TypeScript는 어떻게 axios의 타입 선언 파일(index.d.ts)을 정확히 찾아낼 수 있을까?이번 글에서는 TypeScript의 모듈 해석 시스템(Module Resolution)에 따라, axios의 타입을 어떻게 찾는지를 내부 동작 흐름과 실제 예제를 통해 설명해보려고 한다. 타입 선언의 두 가지 방식TypeScript에서 타입 선언 파일을 찾는 경로는 두 가지로 나뉜다:자체적으로 타입을 제공하는 패키지예: axios, react, lodashn..

TypeScript를 사용하면 .ts 파일로 작성한 코드를 다양한 모듈 형식의 JavaScript 파일로 컴파일할 수 있다. 기본적으로 tsconfig.json을 설정하지 않으면 CommonJS 형식으로 변환되며, 이 설정을 수정하면 ECMAScript, UMD 등의 다른 형식으로도 출력할 수 있다.본 글에서는 동일한 test.ts 파일을 CommonJS, ECMAScript, UMD 형식으로 각각 변환하면서 어떤 차이가 발생하는지 자세히 살펴보려고 한다. 기본 설정: CommonJS1. test.ts 코드 예시import axios from "axios";(async () => { try { const res = await axios.get('https://jsonplaceholder.typi..

이번에는 axios 라이브러리를 직접 타이핑(Type Declaration) 해보는 연습을 해보겠다. 이미 만들어진 타입 선언 파일을 사용하는 것이 일반적이지만, 직접 타입을 선언하면서 구조를 이해하고 타입 시스템에 대한 감각을 기르는 것이 핵심 목표이다. 백지에서 직접 타이핑해보는 이와 같은 연습은 TypeScript 실력을 빠르게 향상시키는 데 많은 도움이 된다.1. zaxios.ts 파일 생성우선 axios의 역할을 흉내 내기 위한 파일을 만든다. zaxios.ts라는 파일을 생성하고 다음과 같은 코드를 입력한다.interface Zaxios {}declare const zaxios: Zaxios;interface Post { userid: number; id: number; title: st..

1. Axios는 TypeScript를 지원하는가?npmjs.com/axios에서 확인 가능.TS 마크가 있으므로 별도의 @types/axios 설치 불필요.2. Axios 설치 및 테스트 코드 작성cd (tsbook 경로)mkdir axioscd axiosnpm i axios@1.3.3npx tsc --init test.ts 코드 예시:import axios from 'axios';interface Post { userid: number; id: number; title: string; body: string;}(async () => { try { const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1'); ..

TypeScript에서 스크립트 파일과 모듈 파일은 구분 기준에 따라 동작 방식이 달라진다. 이는 타입 정의의 범위와 import/export 문법 사용에 영향을 주기 때문에 명확하게 이해하는 것이 중요하다.$ 함수를 import하지 않았는데도 사용할 수 있는 이유TypeScript에서 test.ts 파일 내에서 $ 함수를 import하지 않았음에도 사용할 수 있는 경우가 있다. 이는 TypeScript가 misc.d.ts 파일을 스크립트 파일로 인식했기 때문이다.TypeScript에서는 최상위 스코프에 import나 export 문이 존재하지 않으면 스크립트 파일, 존재하면 모듈 파일로 판단한다. 스크립트 파일 vs 모듈 파일 예시스크립트 파일declare namespace Example { cons..

배포하기 전까지는 로컬에서 npm run dev해서 확인했기 때문에 처음에는 모든 프론트엔드 코드를 PC 버전으로 작업했다. 그리고 vercel로 배포한 다음 휴대폰에서 작동하는지 확인해봤는데, 휴대폰에서는 글자도 작고 가로로 스크롤이 생겨서 보기가 불편했다. 그래서 기존 컴포넌트를 깨지 않고 반응형으로 확장하기로 결정했다. 반응형을 위한 핵심 전략Tailwind CSS의 반응형 prefix (sm, md, lg, xl)햄버거 메뉴를 위한 useState + motion.divflex-col / flex-row 전환을 통한 레이아웃 대응리팩토링 포인트기존 PC 기준 컴포넌트를 최대한 재사용하면서 스타일만 분기Image 컴포넌트에서 sizes를 사용해 디바이스별 최적 이미지 로딩 1. 반응형 디자인의 ..