본문 바로가기
카테고리 없음

TypeScript 프로젝트로 실전 연습 – 간단한 CRUD 앱 만들기 (20강)

by mystory55776 2025. 5. 20.

TypeScript 프로젝트로 실전 연습 – 간단한 CRUD 앱 만들기 (20강)

**TypeScript**는 정적 타입을 제공하여 코드의 안정성을 높이고, 개발 중 오류를 미리 잡을 수 있는 강력한 도구입니다. 이번 강에서는 **TypeScript**를 사용하여 **간단한 CRUD 앱**을 만드는 방법을 배워보겠습니다. CRUD는 **Create**, **Read**, **Update**, **Delete**의 약자로, 데이터베이스나 애플리케이션에서 가장 기본적이고 중요한 작업들입니다. 이 글에서는 **간단한 CRUD 앱**을 만들어가면서 **TypeScript**의 핵심 개념을 실전에서 적용하는 방법을 다루겠습니다.

1. CRUD 앱이란?

**CRUD 앱**은 데이터 관리에서 자주 사용되는 네 가지 기본적인 작업인 **Create**, **Read**, **Update**, **Delete**를 수행할 수 있는 애플리케이션입니다. 이 네 가지 작업은 **웹 애플리케이션**에서 데이터를 처리하는 기본적인 방식이므로, 이들을 효율적으로 구현하는 방법을 익히는 것은 매우 중요합니다.

  • Create: 새로운 데이터를 생성하는 작업
  • Read: 저장된 데이터를 조회하는 작업
  • Update: 기존 데이터를 수정하는 작업
  • Delete: 기존 데이터를 삭제하는 작업

이제 **TypeScript**를 사용하여 **간단한 CRUD 앱**을 만들면서 각 기능을 어떻게 구현할 수 있는지 살펴보겠습니다.

2. 프로젝트 설정

**TypeScript**로 간단한 CRUD 앱을 만들기 위해서는 먼저 **TypeScript 개발 환경**을 설정해야 합니다. **Visual Studio Code (VSCode)**와 **Node.js**가 설치되어 있다면, 아래의 단계대로 진행할 수 있습니다.

2.1. 프로젝트 초기화

npm init -y

**npm init -y** 명령어를 통해 새로운 **Node.js 프로젝트**를 초기화합니다.

2.2. TypeScript 설치

npm install typescript --save-dev

**TypeScript**를 설치하려면 **npm**을 사용하여 **typescript** 패키지를 개발 의존성으로 설치합니다.

2.3. tsconfig.json 설정

**tsconfig.json** 파일을 생성하여 TypeScript의 컴파일러 옵션을 설정합니다. 이 파일은 TypeScript 컴파일러가 프로젝트를 어떻게 처리할지 알려주는 역할을 합니다. 

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

3. TypeScript로 CRUD 기능 구현하기

이제 **간단한 CRUD 앱**의 기본적인 기능들을 **TypeScript**로 구현해보겠습니다. CRUD 앱의 각 작업을 **함수**로 구현하고, 이를 **터미널**에서 실행할 수 있도록 할 것입니다.

3.1. 데이터 구조 정의

CRUD 작업을 처리할 데이터를 정의하기 위해 **인터페이스**를 사용하여 **데이터 타입**을 지정합니다. 여기서는 간단히 **User** 데이터를 예시로 사용할 것입니다. 

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

위와 같이 **User**라는 인터페이스를 정의하고, 각 사용자에 대해 **id**, **name**, **email** 속성을 가집니다.

3.2. Create (새로운 사용자 생성)

**Create**는 새로운 데이터를 생성하는 작업입니다. 새로운 사용자를 추가하는 함수를 작성합니다. 

let users: User[] = [];

function createUser(id: number, name: string, email: string): void {
  const newUser: User = { id, name, email };
  users.push(newUser);
  console.log("User created:", newUser);
}

**createUser** 함수는 **id**, **name**, **email**을 매개변수로 받아 **User** 객체를 생성하고 이를 **users** 배열에 추가합니다.

3.3. Read (사용자 조회)

**Read**는 저장된 데이터를 조회하는 작업입니다. 사용자의 목록을 조회하는 함수를 작성합니다. 

function getUsers(): void {
  console.log("All users:", users);
}

**getUsers** 함수는 **users** 배열에 저장된 모든 사용자 데이터를 콘솔에 출력합니다.

3.4. Update (사용자 수정)

**Update**는 기존 데이터를 수정하는 작업입니다. 특정 사용자의 정보를 업데이트하는 함수를 작성합니다. 

function updateUser(id: number, name: string, email: string): void {
  const user = users.find((user) => user.id === id);
  if (user) {
    user.name = name;
    user.email = email;
    console.log("User updated:", user);
  } else {
    console.log("User not found");
  }
}

**updateUser** 함수는 **id**를 기준으로 사용자 정보를 찾아서 **name**과 **email**을 업데이트합니다. 만약 사용자가 존재하지 않으면 "User not found"를 출력합니다.

3.5. Delete (사용자 삭제)

**Delete**는 데이터를 삭제하는 작업입니다. 특정 사용자를 삭제하는 함수를 작성합니다. 

function deleteUser(id: number): void {
  const userIndex = users.findIndex((user) => user.id === id);
  if (userIndex !== -1) {
    users.splice(userIndex, 1);
    console.log("User deleted");
  } else {
    console.log("User not found");
  }
}

**deleteUser** 함수는 **id**를 기준으로 사용자를 찾은 후 삭제합니다. 사용자가 존재하지 않으면 "User not found"를 출력합니다.

4. CRUD 앱 실행하기

이제, 위에서 만든 **CRUD 함수**들을 호출하여 실제로 앱을 실행해봅니다. 

createUser(1, "John Doe", "john@example.com");
createUser(2, "Jane Smith", "jane@example.com");

getUsers();

updateUser(1, "John Updated", "johnupdated@example.com");

getUsers();

deleteUser(2);

getUsers();

위 코드에서는 **createUser**로 사용자를 추가하고, **getUsers**로 사용자 목록을 조회한 후, **updateUser**로 사용자를 수정하고, **deleteUser**로 사용자를 삭제하는 과정을 보여줍니다. 이를 통해 간단한 CRUD 앱이 작동하는 모습을 확인할 수 있습니다.

5. 결론

이번 강의를 통해 **TypeScript**를 사용하여 **간단한 CRUD 앱**을 만드는 방법을 배웠습니다. CRUD 기능은 **애플리케이션 개발**에서 매우 기본적이고 중요한 기능이므로, 이를 구현하는 과정에서 **TypeScript의 타입 시스템**을 활용하여 코드의 **안전성**과 **유지보수성**을 높일 수 있었습니다. 이와 같은 **실전 연습**은 **TypeScript**를 더 잘 이해하고 **웹 개발**에서 **타입 안전**을 지키는 데 큰 도움이 될 것입니다.

티스토리툴바