타입스크립트를 이용해서 Vite 프로젝트 코드를 수정해보자

이번 글에서는 아주 기초적인 Vite 프로젝트를 만든 뒤, 타입스크립트를 도입하면서 기존 코드를 어떻게 더 안전하게 바꿔갈 수 있는지 흐름 중심으로 정리해볼게요.

처음에는 단순한 HTML 기반 프로젝트로 시작하고, 이후 타입스크립트를 붙일 수 있는 기반을 만드는 식으로 이해하면 좋아요.

1. 프로젝트 생성

먼저 새 폴더를 만들어요.

mkdir myboard

그리고 해당 폴더로 이동해요.

cd myboard

이제 npm 프로젝트를 초기화해요.

npm init -y

이 명령을 실행하면 package.json 파일이 생성돼요.

2. Vite 설치

다음으로 Vite를 개발 의존성으로 설치해요.

npm install --save-dev vite

이 과정을 거치면:

package.json 내용이 수정되고
node_modules 폴더가 생성되고
package-lock.json 파일도 함께 생성돼요.

3. package.json 수정

이제 package.json의 scripts 부분에 Vite 실행 명령을 추가해요.

{
  "name": "myboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "vite": "^8.0.2"
  }
}

이제 아래 명령으로 개발 서버를 실행할 수 있어요.

npm run dev
npm run build
npm run preview

4. index.html 파일 작성

프로젝트 루트에 index.html 파일을 만들고 아래처럼 작성해요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록보기</title>
</head>
<body>
    <h1>목록보기</h1>

</body>
</html>

아직은 아주 단순한 HTML만 있는 상태예요.
그래도 Vite를 통해 빠르게 실행하고, 이후 여기에 자바스크립트나 타입스크립트 파일을 붙여가며 확장할 수 있어요.

5. 현재 폴더 구조

이 시점의 구조는 대략 이렇게 돼요.

index.html
node_modules
package-lock.json
package.json

6. 실행

개발 서버를 실행해요.

npm run dev

실행하면 아래와 비슷한 메시지가 나와요.

VITE v8.0.2  ready in 388 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

7. 브라우저에서 확인

이제 브라우저에서 아래 주소로 접속해요.

http://localhost:5173/

그러면 목록보기라는 제목이 보이는 아주 단순한 페이지를 확인할 수 있어요.

8. 종료

개발 서버를 종료할 때는 터미널에서 아래처럼 해요.

Ctrl + C

9. 그런데, 여기서 타입스크립트는 어디에 쓰일까?

지금까지는 사실 타입스크립트를 아직 직접 적용한 상태는 아니에요.
지금 만든 건 타입스크립트를 도입하기 전의 기초 Vite 환경이라고 보면 돼요.

여기서 많은 초보자가 헷갈려요.

“제목은 타입스크립트인데, 왜 아직 .ts 파일이 안 나오지?”

이 질문이 아주 자연스러워요.

왜냐하면 타입스크립트는 단순히 프로젝트를 실행하는 도구가 아니라, 기존 자바스크립트 코드를 더 안전하게 바꾸기 위한 언어적 확장이기 때문이에요.

즉, 순서는 보통 이래요.

먼저 프로젝트를 만든다
화면이 뜨는지 확인한다
자바스크립트 파일을 추가한다
그 파일을 타입스크립트 파일로 바꾼다
변수, 함수, 객체에 타입을 붙인다

10. 타입스크립트로 수정한다는 것은 무슨 뜻일까?

예를 들어, 나중에 게시판 목록 데이터를 다룬다고 해볼게요.

자바스크립트에서는 이런 코드가 있을 수 있어요.

const post = {
  id: 1,
  title: '안녕하세요',
  writer: 'K님'
}

function printPost(post) {
  console.log(post.title)
}

이 코드는 실행은 되지만, post 구조가 잘못 들어와도 실행 전까지는 문제가 잘 드러나지 않아요.

타입스크립트로 바꾸면 이렇게 작성할 수 있어요.

type Post = {
  id: number
  title: string
  writer: string
}

const post: Post = {
  id: 1,
  title: '안녕하세요',
  writer: 'K님'
}

function printPost(post: Post): void {
  console.log(post.title)
}

이렇게 바꾸면 얻는 장점이 있어요.

id는 숫자여야 한다는 걸 알 수 있고
title, writer는 문자열이어야 한다는 걸 알 수 있고
함수에 잘못된 데이터가 들어오면 미리 확인할 수 있어요.

즉, 타입스크립트를 이용해 코드를 수정한다는 건, 코드가 다루는 데이터의 형태를 더 명확하게 만드는 과정이에요.

11. 다음 단계로 해볼 만한 것

지금 단계 다음으로는 이런 흐름을 추천해요.

1) 타입스크립트 설치

npm install --save-dev typescript

2) tsconfig.json 생성

npx tsc --init

3) main.ts 파일 작성

예를 들면:

const appTitle: string = '목록보기'
console.log(appTitle)

4) 데이터 구조를 타입으로 정의

게시판 프로젝트라면 이런 식으로 시작할 수 있어요.

type BoardItem = {
  id: number
  title: string
  content: string
  writer: string
}

이렇게 해두면 나중에 목록 보기, 상세 보기, 글쓰기 기능을 만들 때 코드가 훨씬 안정적이 돼요.

마무리

이번 글에서는:

myboard 프로젝트를 만들고
Vite를 설치하고
index.html을 작성하고
개발 서버를 실행해보는 과정
그리고 이후 타입스크립트로 코드를 어떻게 발전시킬 수 있는지

를 같이 정리해봤어요.

핵심은 이거예요.

타입스크립트는 처음부터 거창하게 시작하는 게 아니라, 이미 동작하는 코드를 더 안전하고 읽기 좋게 바꾸는 과정에서 빛을 발한다.

게시판 프로젝트처럼 데이터 구조가 점점 복잡해지는 예제에서는 특히 더 큰 도움이 돼요.

다음 글에서는 실제로 main.ts를 만들고, 게시판 목록 데이터를 타입으로 정의해서 화면에 출력하는 과정까지 이어가보면 좋아요.