왜 JavaScript에서 TypeScript로 전환했는가?

KUKJIN LEE • 2개월 전 작성

타입 안전성

JavaScript 런타임 오류를 방지 할 수 있었습니다. TypeScript는 코드 작성 시점에 오류를 검출하여, 더 안정적이고 오류가 적은 애플리케이션을 만들 수 있습니다.

JavaScript도 Prototype을 통해 타입을 설정할 수 있지만, 타입을 명시하지 않아도 동작한다는 특징이 있습니다. 이 특성이 JavaScript의 장점이긴 하지만, 동시에 오류를 방지하기가 어렵습니다. 그럼에도 불구하고 TypeScript를 선호하는 이유는 타입을 강제함으로써 오류를 더 효과적으로 잡아낼 수 있기 때문입니다.

개발자 경험 향상

TypeScript는 타입 힌트를 통해 개발 속도와 효율을 크게 향상시킵니다. 이는 코드를 이해하는 시간을 단축시키는 데 중요한 역할을 합니다.

(단, TypeScript 사용 시 단점도 존재합니다. 예를 들어, 모든 데이터에 타입을 설정해야 하는 번거로움이 있을 수 있습니다. 많은 양의 데이터를 다룰 때 타입을 설정하는 데 시간이 소모될 수 있으며, 레거시 코드를 전환할 때 Number 값이 와야 하는 자리에 String 값이 입력된 경우, 이를 TypeScript로 처리하기 위해 변환 작업이 필요해질 수 있습니다.)

더 나은 확장성과 유지보수성

TypeScript는 대규모 코드베이스를 효율적으로 관리할 수 있게 해줍니다. 특히 팀 작업 시 명확한 인터페이스 덕분에 협업이 원활해지고, 프로젝트가 커질수록 이러한 이점이 두드러집니다.

타입을 확인하고 설정할 수 있다는 것은 프로젝트 관리에 있어 매우 중요합니다. TypeScript는 이러한 타입 관리를 통해 대규모 프로젝트에서의 오류를 예방하고, 직관적인 코드 관리를 가능하게 합니다.

초기 설정

TypeScript로 전환하기 위한 기본 설정 방법입니다.

TypeScript 및 관련 의존성 설치

npm install --save-dev typescript @types/react @types/node

tsconfig.json 파일 생성 또는 수정

tsconfig.json은 TypeScript의 컴파일러 옵션을 정의하는 파일입니다. 아래와 같은 기본 설정으로 시작할 수 있습니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [{ "name": "next" }]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

점진적 마이그레이션 전략

1. 파일 확장자 변경

JavaScript 파일(.js, .jsx)을 TypeScript 파일(.ts, .tsx)로 변환합니다. 모든 파일을 한 번에 변환하는 대신, 중요한 컴포넌트부터 점진적으로 변환하는 것이 좋습니다.

2. allowJs: true 설정

초기에는 기존 JavaScript 파일과 TypeScript 파일을 함께 사용할 수 있도록 설정합니다. 이를 통해 점진적인 마이그레이션이 가능합니다.

주요 컴포넌트 및 페이지 변환 예시

페이지 컴포넌트 변환

import React from 'react';

interface PageProps {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

export default function Page({ params, searchParams }: PageProps) {
  return <h1>Page {params.id}</h1>;
}

레이아웃 컴포넌트 변환

import React from 'react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

타입 정의 및 인터페이스

export interface User {
  id: number;
  name: string;
  email: string;
}

결론

TypeScript는 오류를 직관적으로 파악하고, 문제를 더 빠르게 해결할 수 있게 해줍니다. 물론 JavaScript로도 문제를 해결할 수 있지만, TypeScript는 더 쉽게 오류를 찾아내는 도구를 제공합니다. 다만, 타입을 설정하는 데 추가 시간이 소요될 수 있습니다. 그럼에도 불구하고, 이점이 많다고 판단해 TypeScript로 마이그레이션 진행 중입니다..