개발새발

test.tsx를 JavaScript로 트랜스파일하기아래 예시는 동일한 소스 test.tsx를 tsconfig.json 의 "jsx" 옵션만 바꿔가며 npx tsc 로 컴파일했을 때 어떤 JS 결과물이 생성되는지를 비교‧분석한 것이다. 모든 예시는 TypeScript 4.5 이상을 전제로 설명한다. 1. 기본 세팅$ tree -L 1.├── tsconfig.json└── test.tsx test.tsx 안에는 일반적인 함수 컴포넌트가 들어 있다고 가정한다.// test.tsximport { useState, useCallback, useRef, useEffect } from 'react';const Form = ({ children, onSubmit }) => ( {children});const Wor..

1. 프로젝트 구조와 준비src/ ├─ zeact.tsx ← 우리가 직접 작성할 타입 선언 파일 └─ WordRelay.tsx zeact.tsx : declare namespace Zeact { … } 블록 안에 모든 타입·함수를 선언한다.WordRelay.tsx : 원래 React 예제를 그대로 두되, React. 대신 Zeact. 접두어를 붙여 사용한다.타입스크립트 컴파일러는 같은 루트(혹은 tsconfig.json의 "include")에 있는 .ts·.tsx 파일을 모두 스캔하므로, 따로 types 경로를 지정할 필요는 없다. 2. 훅(Hooks) 선언하기2-1. 가장 단순한 형태declare namespace Zeact { const useState: () => void; const use..

JSX 타입 이해하기JSX 문법은 HTML처럼 보이지만, 실제로는 순수 JavaScript 값과 TypeScript 타입으로 환원되는 구조이다. 타입 체계를 정확히 이해하면 strict 모드에서 흔히 마주치는 “속성이 존재하지 않는다” 오류를 미리 피할 수 있다.이번 글에서는 전역 JSX 네임스페이스에서 사용자 컴포넌트까지, 타입이 어떻게 연결되는지를 단계적으로 살펴보려고 한다. 1. 전역 JSX 네임스페이스@types/react에는 다음과 같은 선언이 존재한다.declare global { namespace JSX { interface Element extends React.ReactElement {} interface IntrinsicElements { form: React.D..

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