TypeScript 타입 미 선언시 발생하는 문제

아래 예제 코드에서 타입스크립트 프로젝트에서 타입을 선언하지 않거나,

타입을 무시하고 any 타입을 남발하게 된다면

다음과 같은 4가지 주요 문제가 발생할 수 있습니다.

---

ex)

'use client';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import Link from 'next/link';
import dataTexts from './data/dataText';

interface DataText {
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

export default function Home() {
  return (
    <main>
      <h4>{dataTexts[0].main}</h4>
      <Post />
      <Pagenation />
    </main>
  );
}

function Post() {
  return (
    <div className="">
      <div className="card m-3">
        <img
          src={`https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/girls/1.PNG`}
          className="card-img-top"
          alt="..."
        />
        <div className="card-body">
          <h5 className="card-title">elegance</h5>
          <p className="card-text">
            It is a long established fact that a reader will be distracted
          </p>
          <p className="card-text">
            <small>20250228</small>
          </p>
          <p className="card-text">Like it 25</p>
          <Link href="/detail" className="btn btn-outline-secondary">
            Detail
          </Link>
        </div>
      </div>
    </div>
  );
}

function Pagenation() {
  return (
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item disabled">
          <a class="page-link">Previous</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            1
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            2
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            3
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            Next
          </a>
        </li>
      </ul>
    </nav>
  );
}

page.tsx

---

---

1. 런타임 에러 발생 (브라우저에서 흰 화면이 뜨는 현상)

가장 치명적인 문제입니다. 타입을 선언하지 않으면 dataTexts[0].main을 호출할 때, 만약 main이라는 키값이 없거나 오타(mainn 등)가 있어도 에러를 잡아주지 않습니다.

• 문제 발생: 브라우저가 실행된 후에야 Cannot read property 'main' of undefined 같은 에러를 뱉으며 앱이 멈춰버립니다.
• 타입 선언 시: 코드를 저장하기도 전에 VS Code가 빨간 줄을 그어 "해당 속성이 없다"고 미리 알려줍니다.

2. 자동 완성(IntelliSense) 기능 상실

타입을 선언하면 IDE(VS Code 등)가 데이터의 구조를 완벽히 이해합니다.

• 타입 선언 시: dataTexts[0].까지만 쳐도 main, subCaps1, footer 등의 목록이 자동으로 뜹니다.
• 타입 미선언 시: 개발자가 매번 데이터 파일(dataText.ts)을 열어서 키 이름이 뭐였는지 직접 확인하고 수동으로 타이핑해야 합니다. 이 과정에서 오타가 발생할 확률이 매우 높습니다.

3. 유지보수의 어려움 (Refactoring)

나중에 프로젝트 규모가 커져서 데이터 구조가 바뀔 때 큰 문제가 됩니다.

• 예시: main이라는 속성 이름을 title로 변경해야 한다고 가정해 봅시다.
• 타입 선언 시: 인터페이스의 이름만 바꾸면, 해당 데이터를 사용하는 모든 파일에 에러 표시가 떠서 어디를 고쳐야 할지 즉시 알 수 있습니다.
• 타입 미선언 시: 프로젝트 전체를 뒤져서 main이 쓰인 곳을 일일이 찾아 바꿔야 하며, 하나라도 놓치면 서비스 장애로 이어집니다.

4. 협업 효율 저하

다른 개발자(혹은 미래의 나)가 코드를 볼 때, dataTexts가 어떤 형태의 데이터인지 알 방법이 없습니다.

• 타입 선언 시: 인터페이스만 슬쩍 봐도 "아, 이 데이터는 메인 텍스트와 서브 캡션 3개로 이루어져 있구나"라고 즉시 파악이 가능합니다. 타입 자체가 살아있는 문서(Documentation) 역할을 합니다.

---