TypeScript 프로젝트로 실전 연습 – 간단한 CRUD 앱 만들기 (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**를 더 잘 이해하고 **웹 개발**에서 **타입 안전**을 지키는 데 큰 도움이 될 것입니다.