๐ญ ํ์ ๋ณ์นญ(Type Alias)์ ๋ง๋ฒ: TypeScript์ ๊ฐ๋ ฅํ ๋๊ตฌ ๐งโโ๏ธ

์๋ ํ์ธ์, ํ์ ์คํฌ๋ฆฝํธ ๋ง๋ฒ์ฌ ์ฌ๋ฌ๋ถ! ์ค๋์ TypeScript์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ ์ค ํ๋์ธ 'ํ์ ๋ณ์นญ(Type Alias)'์ ๋ํด ๊น์ด ์๊ฒ ํ๊ตฌํด๋ณด๋ ค๊ณ ํฉ๋๋ค. ์ด ์ฌ์ ์ ํตํด ์ฌ๋ฌ๋ถ์ ์ฝ๋์ ๊ฐ๋ ์ฑ์ ๋์ด๊ณ , ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ๋ฉฐ, ๋ ์์ ํ๊ณ ํจ์จ์ ์ธ ํ๋ก๊ทธ๋๋ฐ์ ํ ์ ์๊ฒ ๋ ๊ฑฐ์์. ๋ง์น ์ฌ๋ฅ๋ท์์ ๋ค์ํ ์ฌ๋ฅ์ ๊ฑฐ๋ํ๋ฏ์ด, ์ฐ๋ฆฌ๋ ํ์ ๋ณ์นญ์ด๋ผ๋ ์ฌ๋ฅ์ ์ต๋ํด TypeScript ์ธ๊ณ์์ ๋ ํฐ ๊ฐ์น๋ฅผ ์ฐฝ์ถํด๋ด ์๋ค! ๐
๐ก ์๊ณ ๊ณ์ จ๋์? ํ์ ๋ณ์นญ์ ๋จ์ํ ํ์ ์ ์๋ก์ด ์ด๋ฆ์ ๋ถ์ด๋ ๊ฒ ์ด์์ ์๋ฏธ๋ฅผ ๊ฐ์ง๋๋ค. ์ด๋ ์ฝ๋์ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ ํ๊ณ , ๋ณต์กํ ํ์ ์ ๊ฐ๋จํ๊ฒ ํํํ ์ ์๊ฒ ํด์ฃผ๋ TypeScript์ ํต์ฌ ๊ธฐ๋ฅ ์ค ํ๋์ ๋๋ค.
์, ์ด์ ํ์ ๋ณ์นญ์ ์ธ๊ณ๋ก ๋น ์ ธ๋ค์ด ๋ด ์๋ค. ์ฐ๋ฆฌ์ ์ฌ์ ์ ๊ธฐ๋ณธ ๊ฐ๋ ๋ถํฐ ์์ํด ๊ณ ๊ธ ๊ธฐ์ ๊น์ง ์ด์ด์ง ๊ฑฐ์์. ๋ง์น ์ฌ๋ฅ๋ท์์ ์ด๋ณด์๋ถํฐ ์ ๋ฌธ๊ฐ๊น์ง ๋ค์ํ ์์ค์ ์ฌ๋ฅ์ ๋ง๋ ์ ์๋ฏ์ด, ์ฐ๋ฆฌ๋ ํ์ ๋ณ์นญ์ ๋ชจ๋ ์ธก๋ฉด์ ํํํด๋ณผ ๊ฑฐ์์. ์ค๋น๋์ จ๋์? ๊ทธ๋ผ ์์ํด๋ณผ๊น์! ๐ฌ
๐ ํ์ ๋ณ์นญ์ ๊ธฐ๋ณธ: ์ฒซ ๊ฑธ์ ๋ผ๊ธฐ
ํ์ ๋ณ์นญ(Type Alias)์ TypeScript์์ ์ ๊ณตํ๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ก, ํน์ ํ์ ์ ์๋ก์ด ์ด๋ฆ์ ๋ถ์ฌํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ๋ง์น ์ฐ๋ฆฌ๊ฐ ์น๊ตฌ์๊ฒ ๋ณ๋ช ์ ์ง์ด์ฃผ๋ ๊ฒ๊ณผ ๋น์ทํ์ฃ . ํ์ง๋ง ๋จ์ํ ์ด๋ฆ์ ๋ฐ๊พธ๋ ๊ฒ ์ด์์ ์๋ฏธ๊ฐ ์๋ต๋๋ค!
๐ ํ์ ๋ณ์นญ์ ์ ์: ํ์ ๋ณ์นญ์ 'type' ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ํ๋ฉฐ, ๊ธฐ์กด์ ํ์ ์ ์๋ก์ด ์ด๋ฆ์ ๋ถ์ฌํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ณต์กํ ํ์ ์ ๊ฐ๋จํ๊ฒ ํํํ๊ณ , ์ฝ๋์ ๊ฐ๋ ์ฑ์ ๋์ผ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ๋ค์๊ณผ ๊ฐ์ด ํ์ ๋ณ์นญ์ ์ ์ํ ์ ์์ต๋๋ค:
type UserID = string;
type UserName = string;
type UserAge = number;
type User = {
id: UserID;
name: UserName;
age: UserAge;
};
์ด๋ ๊ฒ ์ ์๋ ํ์ ๋ณ์นญ์ ์ฝ๋ ์ ์ฒด์์ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ํ ๋ฒ ๋ฑ๋กํ ์ฌ๋ฅ์ ์ฌ๋ฌ ๋ฒ ํ์ฉํ ์ ์๋ ๊ฒ์ฒ๋ผ ๋ง์ด์ฃ ! ๐
๐จ ํ์ ๋ณ์นญ์ ์ฅ์ :
- ์ฝ๋์ ๊ฐ๋ ์ฑ ํฅ์
- ํ์ ์ ์์ ์ค๋ณต ์ ๊ฑฐ
- ๋ณต์กํ ํ์ ์ ๊ฐ๋จํ๊ฒ ํํ
- ํ์ ๋ณ๊ฒฝ ์ ํ ๊ณณ๋ง ์์ ํ๋ฉด ๋๋ ํธ๋ฆฌํจ
์ด์ ์ฐ๋ฆฌ๋ ํ์ ๋ณ์นญ์ ๊ธฐ๋ณธ ๊ฐ๋ ์ ์ดํดํ์ต๋๋ค. ํ์ง๋ง ์ด๊ฒ์ ์์์ ๋ถ๊ณผํด์. ํ์ ๋ณ์นญ์ ๋จ์ํ ํ์ ๋ฟ๋ง ์๋๋ผ ๋ณต์กํ ๊ฐ์ฒด ํ์ , ์ ๋์จ ํ์ , ์ธํฐ์น์ ํ์ ๋ฑ ๋ค์ํ ์ํฉ์์ ํ์ฉ๋ ์ ์๋ต๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ๋ค์ํ ๋ถ์ผ์ ์ฌ๋ฅ์ ๋ง๋ ์ ์๋ฏ์ด, ํ์ ๋ณ์นญ๋ ๋ค์ํ ํํ๋ก ์ฐ๋ฆฌ๋ฅผ ๋์์ค ๊ฑฐ์์.
๋ค์ ์น์ ์์๋ ํ์ ๋ณ์นญ์ ์ข ๋ ์ฌ๋ ์๊ฒ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค. ์ฌ๋ฌ๋ถ์ TypeScript ์ฌ์ ์ด ์ ์ ๋ ํฅ๋ฏธ์ง์งํด์ง ๊ฑฐ์์! ๐
๐ญ ํ์ ๋ณ์นญ์ ๋ค์ํ ์ผ๊ตด: ๋ณต์กํ ํ์ ๋ค๋ฃจ๊ธฐ
ํ์ ๋ณ์นญ์ ์ง์ ํ ํ์ ๋ณต์กํ ํ์ ์ ๋ค๋ฃฐ ๋ ๋ฐํ๋ฉ๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ๋ค์ํ ์ฌ๋ฅ์ ์กฐํฉํด ์๋ก์ด ๊ฐ์น๋ฅผ ์ฐฝ์ถํ๋ฏ, ํ์ ๋ณ์นญ์ ํตํด ๋ณต์กํ ํ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด๋ผ ์ ์์ฃ . ์ด์ ๊ทธ ๋ค์ํ ์ผ๊ตด๋ค์ ํ๋์ฉ ์ดํด๋ณผ๊น์? ๐ญ
1. ๊ฐ์ฒด ํ์ ๋ณ์นญ ๐
๊ฐ์ฒด ํ์ ์ ๋ณ์นญ์ ์ง์ ํ๋ฉด, ๋ณต์กํ ๊ฐ์ฒด ๊ตฌ์กฐ๋ฅผ ๊ฐ๋จํ๊ฒ ํํํ ์ ์์ต๋๋ค.
type Address = {
street: string;
city: string;
country: string;
postalCode: string;
};
type Person = {
name: string;
age: number;
address: Address;
};
์ด๋ ๊ฒ ์ ์ํ๋ฉด 'Person' ํ์ ์ ์ฌ์ฉํ ๋๋ง๋ค ์ฃผ์ ์ ๋ณด๋ฅผ ํฌํจํ ์์ ํ ๊ตฌ์กฐ๋ฅผ ์ฝ๊ฒ ์ฐธ์กฐํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ํ๋กํ์ ์์ฑํ ๋ ์ฃผ์ ์ ๋ณด๋ฅผ ํ ๋ฒ๋ง ์ ๋ ฅํ๊ณ ์ฌ๋ฌ ๊ณณ์์ ํ์ฉํ๋ ๊ฒ๊ณผ ๋น์ทํ์ฃ !
2. ์ ๋์จ ํ์ ๋ณ์นญ ๐
์ฌ๋ฌ ํ์ ์ค ํ๋๋ฅผ ์ ํํ ์ ์๋ ์ ๋์จ ํ์ ์๋ ๋ณ์นญ์ ์ง์ ํ ์ ์์ต๋๋ค.
type StringOrNumber = string | number;
type PaymentMethod = "cash" | "credit" | "debit";
function processPayment(amount: StringOrNumber, method: PaymentMethod) {
// ๊ฒฐ์ ์ฒ๋ฆฌ ๋ก์ง
}
์ด๋ ๊ฒ ํ๋ฉด ์ฝ๋์ ์๋๋ฅผ ๋ ๋ช ํํ๊ฒ ํํํ ์ ์๊ณ , ์ฌ์ฌ์ฉ์ฑ๋ ๋์์ง๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ๋ค์ํ ๊ฒฐ์ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ ๊ฒ์ฒ๋ผ, ์ฐ๋ฆฌ์ ์ฝ๋๋ ์ ์ฐํด์ง๋ ๊ฑฐ์ฃ !
3. ์ธํฐ์น์ ํ์ ๋ณ์นญ ๐ค
์ฌ๋ฌ ํ์ ์ ๊ฒฐํฉํ๋ ์ธํฐ์น์ ํ์ ์๋ ๋ณ์นญ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
type Name = {
firstName: string;
lastName: string;
};
type Age = {
age: number;
};
type Person = Name & Age;
const john: Person = {
firstName: "John",
lastName: "Doe",
age: 30
};
์ด๋ ๊ฒ ํ๋ฉด ์ฌ๋ฌ ํ์ ์ ํน์ฑ์ ๊ฒฐํฉํ ์๋ก์ด ํ์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ์ฌ๋ฌ ์ฌ๋ฅ์ ์กฐํฉํด ์๋ก์ด ์๋น์ค๋ฅผ ๋ง๋๋ ๊ฒ๊ณผ ๋น์ทํ์ฃ !
4. ์ ๋ค๋ฆญ ํ์ ๋ณ์นญ ๐งฌ
ํ์ ๋ณ์นญ์ ์ ๋ค๋ฆญ๊ณผ ํจ๊ป ์ฌ์ฉ๋ ๋ ๋์ฑ ๊ฐ๋ ฅํด์ง๋๋ค.
type Container<t> = { value: T };
const numberContainer: Container<number> = { value: 42 };
const stringContainer: Container<string> = { value: "Hello, TypeScript!" };
</string></number></t>
์ ๋ค๋ฆญ์ ์ฌ์ฉํ๋ฉด ํ์ ๋ณ์นญ์ ๋์ฑ ์ ์ฐํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ ๋ง์น ์ฌ๋ฅ๋ท์์ ํ๋์ ์๋น์ค ํ ํ๋ฆฟ์ ๋ค์ํ ๋ถ์ผ์ ์ ์ฉํ๋ ๊ฒ๊ณผ ๊ฐ์ฃ !
๐ Pro Tip: ํ์ ๋ณ์นญ์ ์ฌ์ฉํ ๋๋ ์๋ฏธ ์๋ ์ด๋ฆ์ ์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ข์ ์ด๋ฆ์ ์ฝ๋์ ์์ฒด ๋ฌธ์ํ๋ฅผ ๋๊ณ , ๋ค๋ฅธ ๊ฐ๋ฐ์๋ค์ด ์ฝ๋๋ฅผ ์ดํดํ๋ ๋ฐ ํฐ ๋์์ด ๋ฉ๋๋ค.
์ด๋ ๊ฒ ํ์ ๋ณ์นญ์ ๋ค์ํ ์ผ๊ตด๋ค์ ์ดํด๋ณด์์ต๋๋ค. ๊ฐ๊ฐ์ ๋ฐฉ์์ ์๋ก ๋ค๋ฅธ ์ํฉ์์ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ ์ ์์ด์. ๋ง์น ์ฌ๋ฅ๋ท์์ ๋ค์ํ ์ฌ๋ฅ๋ค์ด ๊ฐ์์ ์๋ฆฌ์์ ๋น์ ๋ฐํ๋ ๊ฒ์ฒ๋ผ ๋ง์ด์ฃ . ๋ค์ ์น์ ์์๋ ์ด๋ฌํ ํ์ ๋ณ์นญ๋ค์ ์ค์ ํ๋ก์ ํธ์์ ์ด๋ป๊ฒ ํ์ฉํ ์ ์๋์ง ๋ ์์ธํ ์์๋ณด๊ฒ ์ต๋๋ค. ์ฌ๋ฌ๋ถ์ TypeScript ์คํฌ์ด ํ์ธต ๋ ์ ๊ทธ๋ ์ด๋๋ ์ค๋น๊ฐ ๋์๋์? Let's go! ๐
๐ ๏ธ ์ค์ ์์์ ํ์ ๋ณ์นญ ํ์ฉ: ์ฝ๋์ ํ๊ฒฉ์ ๋์ด๋ค
์ด์ ์ฐ๋ฆฌ๋ ํ์ ๋ณ์นญ์ ๊ธฐ๋ณธ ๊ฐ๋ ๊ณผ ๋ค์ํ ํํ์ ๋ํด ์์๋ณด์์ต๋๋ค. ํ์ง๋ง ์ง์ ํ ๋ง๋ฒ์ ์ด๋ฅผ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ ๋ ์ผ์ด๋์ฃ ! ๋ง์น ์ฌ๋ฅ๋ท์์ ๋ฐฐ์ด ๊ธฐ์ ์ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํ๋ ๊ฒ์ฒ๋ผ, ์ฐ๋ฆฌ๋ ํ์ ๋ณ์นญ์ ์ค์ ์์ ํ์ฉํด๋ด ์๋ค. ๐ฉโจ
1. API ์๋ต ํ์ ์ ์ํ๊ธฐ ๐ก
์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ๋, API ์๋ต์ ํ์ ์ ์ ์ํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ํ์ ๋ณ์นญ์ ์ฌ์ฉํ๋ฉด ์ด๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ ์ ์์ต๋๋ค.
type User = {
id: number;
name: string;
email: string;
isActive: boolean;
};
type ApiResponse<t> = {
data: T;
status: number;
message: string;
};
type UserResponse = ApiResponse<user>;
async function fetchUser(id: number): Promise<userresponse> {
// API ํธ์ถ ๋ก์ง
}
</userresponse></user></t>
์ด๋ ๊ฒ ์ ์ํ๋ฉด API ์๋ต์ ๊ตฌ์กฐ๋ฅผ ๋ช ํํ๊ฒ ํํํ ์ ์๊ณ , ํ์ ์์ ์ฑ๋ ํ๋ณดํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ์ฌ์ฉ์ ํ๋กํ์ ๊ฐ์ ธ์ค๋ ๊ฒ์ฒ๋ผ, ์ฐ๋ฆฌ์ ์ฝ๋๋ ์ ํํ๊ณ ์์ ํ๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ์ ์๊ฒ ๋๋ ๊ฑฐ์ฃ !
2. ์ํ ๊ด๋ฆฌ์์์ ํ์ฉ ๐
์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(์: Redux)๋ฅผ ์ฌ์ฉํ ๋ ํ์ ๋ณ์นญ์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
type UserState = {
currentUser: User | null;
isLoading: boolean;
error: string | null;
};
type AppState = {
user: UserState;
// ๋ค๋ฅธ ์ํ๋ค...
};
type Action =
| { type: 'FETCH_USER_REQUEST' }
| { type: 'FETCH_USER_SUCCESS', payload: User }
| { type: 'FETCH_USER_FAILURE', error: string };
function userReducer(state: UserState, action: Action): UserState {
// ๋ฆฌ๋์ ๋ก์ง
}
์ด๋ ๊ฒ ํ๋ฉด ์ํ์ ๊ตฌ์กฐ์ ์ก์ ์ ํ์ ์ ๋ช ํํ๊ฒ ์ ์ํ ์ ์์ด, ์ํ ๊ด๋ฆฌ๊ฐ ํจ์ฌ ์ฌ์์ง๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ํ๋ก์ ํธ์ ์งํ ์ํ๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ๊ฐ์ฃ !
3. ์ค์ ๊ฐ์ฒด ํ์ ํํ๊ธฐ โ๏ธ
๋ณต์กํ ์ค์ ๊ฐ์ฒด๋ฅผ ๋ค๋ฃฐ ๋ ํ์ ๋ณ์นญ์ ์ฌ์ฉํ๋ฉด ์ฝ๋์ ์์ ์ฑ๊ณผ ๊ฐ๋ ์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
type DatabaseConfig = {
host: string;
port: number;
username: string;
password: string;
database: string;
};
type ServerConfig = {
port: number;
cors: {
origin: string | string[];
methods: string[];
};
};
type AppConfig = {
env: 'development' | 'production' | 'test';
database: DatabaseConfig;
server: ServerConfig;
};
const config: AppConfig = {
env: 'development',
database: {
host: 'localhost',
port: 5432,
username: 'admin',
password: 'secret',
database: 'myapp'
},
server: {
port: 3000,
cors: {
origin: '*',
methods: ['GET', 'POST', 'PUT', 'DELETE']
}
}
};
์ด๋ ๊ฒ ์ค์ ๊ฐ์ฒด์ ๊ตฌ์กฐ๋ฅผ ํ์ ์ผ๋ก ์ ์ํ๋ฉด, ์ค์ ๊ฐ์ ์๋ชป ์ ๋ ฅํ๋ ์ค์๋ฅผ ๋ฐฉ์งํ ์ ์๊ณ , ์๋ ์์ฑ ๊ธฐ๋ฅ์ ๋์๋ ๋ฐ์ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ํ๋ก์ ํธ ์ค์ ์ ๊ผผ๊ผผํ ์ฒดํฌํ๋ ๊ฒ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ์ฝ๋์์๋ ์ป์ ์ ์๋ ๊ฑฐ์ฃ !
4. ์ ํธ๋ฆฌํฐ ํจ์์ ํ์ ์ ์ ๐ ๏ธ
์์ฃผ ์ฌ์ฉํ๋ ์ ํธ๋ฆฌํฐ ํจ์์ ํ์ ์ ์ ์ํ ๋๋ ํ์ ๋ณ์นญ์ด ์ ์ฉํฉ๋๋ค.
type Mapper<t u> = (item: T) => U;
type Filter<t> = (item: T) => boolean;
function map<t u>(array: T[], mapper: Mapper<t u>): U[] {
return array.map(mapper);
}
function filter<t>(array: T[], predicate: Filter<t>): T[] {
return array.filter(predicate);
}
// ์ฌ์ฉ ์
const numbers = [1, 2, 3, 4, 5];
const doubled = map(numbers, (n) => n * 2);
const evens = filter(numbers, (n) => n % 2 === 0);
</t></t></t></t></t></t>
์ด๋ ๊ฒ ํจ์์ ํ์ ์ ๋ณ์นญ์ผ๋ก ์ ์ํ๋ฉด, ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ๊ฐ๋ ์ฑ์ด ๋์์ง๋๋ค. ์ฌ๋ฅ๋ท์์ ์์ฃผ ์ฌ์ฉํ๋ ๊ธฐ๋ฅ์ ํ ํ๋ฆฟํํ์ฌ ํจ์จ์ ๋์ด๋ ๊ฒ๊ณผ ๊ฐ์ ์๋ฆฌ์ฃ !
๐ก ์ค์ ํ: ํ์ ๋ณ์นญ์ ์ฌ์ฉํ ๋๋ ํ๋ก์ ํธ์ ๊ตฌ์กฐ์ ๋ชฉ์ ์ ๋ง๊ฒ ์ ์ ํ ๋ชจ๋ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๊ด๋ จ๋ ํ์ ๋ค์ ํ๋์ ํ์ผ์ ๋ชจ์๋๊ณ , ํ์ํ ๊ณณ์์ ์ํฌํธํ์ฌ ์ฌ์ฉํ๋ฉด ์ฝ๋์ ๊ตฌ์กฐ๋ฅผ ๋์ฑ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
์ด๋ ๊ฒ ์ค์ ์์ ํ์ ๋ณ์นญ์ ํ์ฉํ๋ ๋ฐฉ๋ฒ๋ค์ ์ดํด๋ณด์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ๋ฒ๋ค์ ์ ์ ํ ํ์ฉํ๋ฉด, ์ฌ๋ฌ๋ถ์ ์ฝ๋๋ ๋์ฑ ์์ ์ ์ด๊ณ , ์ฝ๊ธฐ ์ฌ์ฐ๋ฉฐ, ์ ์ง๋ณด์๊ฐ ์ฉ์ดํด์ง ๊ฒ์ ๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ๋ค์ํ ์ฌ๋ฅ๋ค์ด ์กฐํ๋กญ๊ฒ ์ด์ฐ๋ฌ์ ธ ๋ฉ์ง ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ ๊ฒ์ฒ๋ผ, ์ฌ๋ฌ๋ถ์ ์ฝ๋๋ ํ์ ๋ณ์นญ๊ณผ ํจ๊ป ๋์ฑ ๋น๋๊ฒ ๋ ๊ฑฐ์์! ๐
๋ค์ ์น์ ์์๋ ํ์ ๋ณ์นญ์ ์ฌ์ฉํ ๋ ์ฃผ์ํด์ผ ํ ์ ๋ค๊ณผ ๊ณ ๊ธ ํ ํฌ๋์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค. ์ฌ๋ฌ๋ถ์ TypeScript ์ฌ์ ์ด ์ ์ ๋ ํฅ๋ฏธ์ง์งํด์ง๊ณ ์์ง ์๋์? ๊ณ์ํด์ ํํํด๋ด ์๋ค! ๐
๐ ํ์ ๋ณ์นญ์ ๊ณ ๊ธ ํ ํฌ๋: ๋ง์คํฐ์ ๊ธธ
์ฌ๋ฌ๋ถ์ ์ด์ ํ์ ๋ณ์นญ์ ๊ธฐ๋ณธ์ ๋์ด ๊ณ ๊ธ ์์ญ์ผ๋ก ๋ฐ์ ๋ค์ด๊ณ ์์ต๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ์ด๋ณด์์์ ์ ๋ฌธ๊ฐ๋ก ์ฑ์ฅํ๋ ๊ณผ์ ์ฒ๋ผ, ์ฐ๋ฆฌ๋ ํ์ ๋ณ์นญ์ ๋ ๊น์ ์ธ๊ณ๋ก ๋ค์ด๊ฐ ๋ด ์๋ค. ์ด ์น์ ์์๋ ํ์ ๋ณ์นญ์ ์ฌ์ฉํ ๋์ ์ฃผ์์ ๊ณผ ํจ๊ป ๊ณ ๊ธ ํ ํฌ๋๋ค์ ์ดํด๋ณผ ๊ฑฐ์์. ์ค๋น๋์ จ๋์? ๐
1. ์กฐ๊ฑด๋ถ ํ์ ๊ณผ ํ์ ๋ณ์นญ ๐
์กฐ๊ฑด๋ถ ํ์ ์ TypeScript์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ ์ค ํ๋์ ๋๋ค. ํ์ ๋ณ์นญ๊ณผ ํจ๊ป ์ฌ์ฉํ๋ฉด ๋์ฑ ์ ์ฐํ ํ์ ์ ์๊ฐ ๊ฐ๋ฅํด์ง๋๋ค.
type IsArray<t> = T extends any[] ? true : false;
type NumberArray = number[];
type StringOrNumber = string | number;
type CheckArray1 = IsArray<numberarray>; // true
type CheckArray2 = IsArray<stringornumber>; // false
type ElementType<t> = T extends (infer U)[] ? U : never;
type NumberArrayElement = ElementType<number>; // number
type StringArrayElement = ElementType<string>; // string
type NotArrayElement = ElementType<number>; // never
</number></string></number></t></stringornumber></numberarray></t>
์ด๋ ๊ฒ ์กฐ๊ฑด๋ถ ํ์ ์ ์ฌ์ฉํ๋ฉด, ์ ๋ ฅ๋ ํ์ ์ ๋ฐ๋ผ ๋ค๋ฅธ ํ์ ์ ๋ฐํํ๋ "ํ์ ์์ค์ ํจ์"๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ ๋ง์น ์ฌ๋ฅ๋ท์์ ์ฌ์ฉ์์ ์คํฌ ๋ ๋ฒจ์ ๋ฐ๋ผ ๋ค๋ฅธ ํ๋ก์ ํธ๋ฅผ ์ถ์ฒํด์ฃผ๋ ์์คํ ๊ณผ ๋น์ทํ์ฃ !
2. ๋งคํ๋ ํ์ ๊ณผ ํ์ ๋ณ์นญ ๐บ๏ธ
๋งคํ๋ ํ์ ์ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด ํ์ ์ ๊ธฐ๋ฐ์ผ๋ก ์๋ก์ด ํ์ ์ ์์ฑํ ์ ์์ต๋๋ค.
type Readonly<t> = {
readonly [P in keyof T]: T[P];
};
type Partial<t> = {
[P in keyof T]?: T[P];
};
type User = {
id: number;
name: string;
email: string;
};
type ReadonlyUser = Readonly<user>;
type PartialUser = Partial<user>;
// ReadonlyUser์ ์์ฑ์ ๋ชจ๋ ์ฝ๊ธฐ ์ ์ฉ
// PartialUser์ ๋ชจ๋ ์์ฑ์ ์ ํ์
</user></user></t></t>
๋งคํ๋ ํ์ ์ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด ํ์ ์ ์์ฑ์ ๋ณํํ์ฌ ์๋ก์ด ํ์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ ์ฌ๋ฅ๋ท์์ ๊ธฐ์กด ์๋น์ค๋ฅผ ์ฝ๊ฐ ์์ ํ์ฌ ์๋ก์ด ์๋น์ค๋ฅผ ๋ง๋๋ ๊ฒ๊ณผ ์ ์ฌํ์ฃ !
3. ์ฌ๊ท์ ํ์ ๋ณ์นญ ๐
ํ์ ๋ณ์นญ์ ์๊ธฐ ์์ ์ ์ฐธ์กฐํ ์ ์์ด, ๋ณต์กํ ์ค์ฒฉ ๊ตฌ์กฐ๋ฅผ ํํํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
type TreeNode<t> = {
value: T;
left?: TreeNode<t>;
right?: TreeNode<t>;
};
const tree: TreeNode<number> = {
value: 1,
left: {
value: 2,
left: { value: 4 },
right: { value: 5 }
},
right: {
value: 3,
left: { value: 6 },
right: { value: 7 }
}
};
</number></t></t></t>
์ฌ๊ท์ ํ์ ๋ณ์นญ์ ์ฌ์ฉํ๋ฉด ํธ๋ฆฌ ๊ตฌ์กฐ๋ ์ค์ฒฉ๋ ๊ฐ์ฒด ๊ตฌ์กฐ๋ฅผ ์ฝ๊ฒ ํํํ ์ ์์ต๋๋ค. ์ด๋ ์ฌ๋ฅ๋ท์์ ๋ณต์กํ ํ๋ก์ ํธ ๊ตฌ์กฐ๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ๋น์ทํ ๊ฐ๋ ์ด์์!
4. ์ ๋์จ ํ์ ๊ณผ ์ธํฐ์น์ ํ์ ์ ๊ณ ๊ธ ํ์ฉ ๐
์ ๋์จ ํ์ ๊ณผ ์ธํฐ์น์ ํ์ ์ ์กฐํฉํ์ฌ ๋ณต์กํ ํ์ ์ ํํํ ์ ์์ต๋๋ค.
type StringOrNumber = string | number;
type WithName = { name: string };
type WithAge = { age: number };
type Person = WithName & WithAge;
type Shape =
| { kind: "circle", radius: number }
| { kind: "rectangle", width: number, height: number }
| { kind: "triangle", base: number, height: number };
function getArea(shape: Shape): number {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2;
case "rectangle":
return shape.width * shape.height;
case "triangle":
return 0.5 * shape.base * shape.height;
}
}
์ด๋ฌํ ๊ณ ๊ธ ํ์ ์กฐํฉ์ ํตํด ๋ณต์กํ ๋น์ฆ๋์ค ๋ก์ง์ ํ์ ์์คํ ์ผ๋ก ํํํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ๋ค์ํ ์๋น์ค ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์กฐํฉํ์ฌ ์๋ก์ด ์๋น์ค๋ฅผ ๋ง๋๋ ๊ฒ๊ณผ ๋น์ทํ ๊ฐ๋ ์ด์ฃ !
โ ๏ธ ์ฃผ์์ฌํญ: ํ์ ๋ณ์นญ์ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ฝ๋์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํ ์ ์์ต๋๋ค. ํญ์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ๊ณ ๋ คํ์ฌ ์ ์ ํ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ๋ํ, ์ํ ์ฐธ์กฐ๋ฅผ ์กฐ์ฌํด์ผ ํ๋ฉฐ, ํ์ ์ด์์ผ๋ก ๋ณต์กํ ํ์ ์ ํผํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ด๋ฌํ ๊ณ ๊ธ ํ ํฌ๋๋ค์ ๋ง์คํฐํ๋ฉด , ์ฌ๋ฌ๋ถ์ TypeScript ์ฝ๋๋ ํ ์ฐจ์ ๋ ๋์ ์์ค์ผ๋ก ์ฌ๋ผ๊ฐ ๊ฒ์ ๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ๊ณ ๊ธ ๊ธฐ์ ์ ์ต๋ํ ์ ๋ฌธ๊ฐ๊ฐ ๋๋ ๊ฒ์ฒ๋ผ, ์ฌ๋ฌ๋ถ๋ TypeScript์ ์ง์ ํ ๋ง์คํฐ๋ก ๊ฑฐ๋ญ๋๊ฒ ๋ ๊ฑฐ์์! ๐
์ด์ ์ฐ๋ฆฌ๋ ํ์ ๋ณ์นญ์ ๊ณ ๊ธ ํ ํฌ๋๋ค์ ์ดํด๋ณด์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ๋ค์ ์ ์ฌ์ ์์ ํ์ฉํ๋ฉด, ๋์ฑ ๊ฐ๋ ฅํ๊ณ ์ ์ฐํ ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ํ์ง๋ง ๊ธฐ์ตํ์ธ์, ๋ชจ๋ ๋๊ตฌ๊ฐ ๊ทธ๋ ๋ฏ ํ์ ๋ณ์นญ๋ ์ ์ ํ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ๊ณผ๋ํ ์ฌ์ฉ์ ์คํ๋ ค ์ฝ๋๋ฅผ ๋ณต์กํ๊ฒ ๋ง๋ค ์ ์์ผ๋ ์ฃผ์๊ฐ ํ์ํด์.
๋ค์ ์น์ ์์๋ ์ค์ ํ๋ก์ ํธ์์ ํ์ ๋ณ์นญ์ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ฒ ์คํธ ํ๋ํฐ์ค์ ํ๋ค์ ๊ณต์ ํ๊ฒ ์ต๋๋ค. ์ฌ๋ฌ๋ถ์ TypeScript ์ฌ์ ์ด ์ ์ ๋ ํฅ๋ฏธ์ง์งํด์ง๊ณ ์์ง ์๋์? ๊ณ์ํด์ ํํํด๋ด ์๋ค! ๐
๐ ํ์ ๋ณ์นญ ๋ง์คํฐํ๊ธฐ: ๋ฒ ์คํธ ํ๋ํฐ์ค์ ํ
์ถํํฉ๋๋ค! ์ฌ๋ฌ๋ถ์ ์ด์ ํ์ ๋ณ์นญ์ ๊ธฐ๋ณธ๋ถํฐ ๊ณ ๊ธ ํ ํฌ๋๊น์ง ๋ชจ๋ ์ดํด๋ณด์์ต๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ์ด๋ณด์์์ ์ ๋ฌธ๊ฐ๋ก ์ฑ์ฅํ ๊ฒ์ฒ๋ผ, ์ฌ๋ฌ๋ถ๋ TypeScript์ ํ์ ๋ณ์นญ ์ ๋ฌธ๊ฐ๊ฐ ๋์ด๊ฐ๊ณ ์์ด์. ์ด์ ์ค์ ํ๋ก์ ํธ์์ ์ด ์ง์์ ์ด๋ป๊ฒ ๊ฐ์ฅ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ ์ ์์์ง ์์๋ด ์๋ค. ์ฌ๊ธฐ ๋ช ๊ฐ์ง ๋ฒ ์คํธ ํ๋ํฐ์ค์ ์ ์ฉํ ํ๋ค์ ์๊ฐํฉ๋๋ค. ๐
1. ๋ช ํํ๊ณ ์๋ฏธ ์๋ ์ด๋ฆ ์ฌ์ฉํ๊ธฐ ๐
ํ์ ๋ณ์นญ์ ์ด๋ฆ์ ๊ทธ ํ์ ์ ๋ชฉ์ ๊ณผ ์๋ฏธ๋ฅผ ๋ช ํํ๊ฒ ์ ๋ฌํด์ผ ํฉ๋๋ค.
// ์ข์ ์
type UserID = string;
type ApiResponse<t> = { data: T; status: number; message: string };
// ํผํด์ผ ํ ์
type Str = string;
type Resp<t> = { d: T; s: number; m: string };
</t></t>
์๋ฏธ ์๋ ์ด๋ฆ์ ์ฌ์ฉํ๋ฉด ์ฝ๋์ ๊ฐ๋ ์ฑ์ด ๋์์ง๊ณ , ๋ค๋ฅธ ๊ฐ๋ฐ์๋ค์ด ์ฝ๋๋ฅผ ์ดํดํ๊ธฐ ์ฌ์์ง๋๋ค. ์ฌ๋ฅ๋ท์์ ํ๋ก์ ํธ ์ ๋ชฉ์ ๋ช ํํ๊ฒ ์์ฑํ๋ ๊ฒ๊ณผ ๊ฐ์ ์๋ฆฌ์ฃ !
2. ๊ด๋ จ๋ ํ์ ๋ค์ ๊ทธ๋ฃนํํ๊ธฐ ๐๏ธ
๊ด๋ จ๋ ํ์ ๋ค์ ํ๋์ ๋ค์์คํ์ด์ค๋ ๋ชจ๋๋ก ๊ทธ๋ฃนํํ๋ฉด ์ฝ๋ ๊ตฌ์กฐ๊ฐ ๋ ๊น๋ํด์ง๋๋ค.
// user.types.ts
export namespace UserTypes {
export type ID = string;
export type Role = 'admin' | 'user' | 'guest';
export type User = {
id: ID;
name: string;
role: Role;
};
}
// ์ฌ์ฉ
import { UserTypes } from './user.types';
function getUser(id: UserTypes.ID): UserTypes.User {
// ...
}
์ด๋ ๊ฒ ๊ทธ๋ฃนํํ๋ฉด ๊ด๋ จ ํ์ ๋ค์ ์ฝ๊ฒ ์ฐพ๊ณ ๊ด๋ฆฌํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ๊ด๋ จ๋ ์๋น์ค๋ค์ ์นดํ ๊ณ ๋ฆฌ๋ก ๋ฌถ๋ ๊ฒ๊ณผ ๋น์ทํ ๊ฐ๋ ์ด์์!
3. ์ ํธ๋ฆฌํฐ ํ์ ํ์ฉํ๊ธฐ ๐ ๏ธ
TypeScript์์ ์ ๊ณตํ๋ ์ ํธ๋ฆฌํฐ ํ์ ๋ค์ ์ ๊ทน ํ์ฉํ์ธ์. ์ด๋ค์ ํ์ ์กฐ์์ ๋ ์ฝ๊ฒ ๋ง๋ค์ด์ค๋๋ค.
type User = {
id: string;
name: string;
email: string;
};
type PartialUser = Partial<user>;
type ReadonlyUser = Readonly<user>;
type UserKeys = keyof User;
function updateUser(user: User, fieldsToUpdate: Partial<user>) {
// ...
}
</user></user></user>
์ ํธ๋ฆฌํฐ ํ์ ์ ์ฌ์ฉํ๋ฉด ์ฝ๋ ์ค๋ณต์ ์ค์ด๊ณ ํ์ ์กฐ์์ ๋ ํจ์จ์ ์ผ๋ก ํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ์ ๊ณตํ๋ ๋ค์ํ ๋๊ตฌ๋ค์ ํ์ฉํ์ฌ ์์ ํจ์จ์ ๋์ด๋ ๊ฒ๊ณผ ๊ฐ์ ์๋ฆฌ์ฃ !
4. ์ธํฐํ์ด์ค์ ํ์ ๋ณ์นญ์ ์ ์ ํ ์ฌ์ฉ ๐ค
์ธํฐํ์ด์ค์ ํ์ ๋ณ์นญ์ ๋น์ทํ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ง๋ง, ๊ฐ๊ฐ์ ์ฅ๋จ์ ์ด ์์ต๋๋ค. ์ํฉ์ ๋ฐ๋ผ ์ ์ ํ ์ ํํ์ธ์.
// ๊ฐ์ฒด ๊ตฌ์กฐ๋ฅผ ์ ์ํ ๋๋ ์ฃผ๋ก ์ธํฐํ์ด์ค ์ฌ์ฉ
interface User {
id: string;
name: string;
}
// ์ ๋์จ ํ์
์ด๋ ํํ ํ์
์ ์ ์ํ ๋๋ ํ์
๋ณ์นญ ์ฌ์ฉ
type Status = 'pending' | 'approved' | 'rejected';
type Coordinates = [number, number];
// ๋ ๋ค ์ฌ์ฉ ๊ฐ๋ฅํ ๊ฒฝ์ฐ, ์ผ๊ด์ฑ ์๊ฒ ์ ํ
type Config = {
apiUrl: string;
timeout: number;
};
์ํฉ์ ๋ง๋ ์ ์ ํ ์ ํ์ ์ฝ๋์ ์ผ๊ด์ฑ๊ณผ ๊ฐ๋ ์ฑ์ ๋์ฌ์ค๋๋ค. ์ฌ๋ฅ๋ท์์ ํ๋ก์ ํธ์ ์ฑ๊ฒฉ์ ๋ฐ๋ผ ์ ์ ํ ํ์ ๋๊ตฌ๋ฅผ ์ ํํ๋ ๊ฒ๊ณผ ๋น์ทํด์!
5. ๋ฌธ์ํ ์ฃผ์ ํ์ฉํ๊ธฐ ๐
๋ณต์กํ ํ์ ๋ณ์นญ์๋ ๋ฌธ์ํ ์ฃผ์์ ์ถ๊ฐํ์ฌ ๊ทธ ๋ชฉ์ ๊ณผ ์ฌ์ฉ๋ฒ์ ์ค๋ช ํ์ธ์.
/**
* API ์๋ต์ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ์ ์ํฉ๋๋ค.
* @template T - ์๋ต ๋ฐ์ดํฐ์ ํ์
*/
type ApiResponse<t> = {
/** ์๋ต ๋ฐ์ดํฐ */
data: T;
/** HTTP ์ํ ์ฝ๋ */
status: number;
/** ์๋ต ๋ฉ์์ง */
message: string;
};
</t>
๋ฌธ์ํ ์ฃผ์์ ์ฝ๋์ ์์ฒด ๋ฌธ์ํ๋ฅผ ๋๊ณ , IDE์ ์๋ ์์ฑ ๊ธฐ๋ฅ์ ํตํด ๋ ๋์ ๊ฐ๋ฐ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์ฌ๋ฅ๋ท์์ ํ๋ก์ ํธ ์ค๋ช ์ ์์ธํ ์์ฑํ๋ ๊ฒ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ์ป์ ์ ์์ด์!
๐ก Pro Tip: ํ์ ๋ณ์นญ์ ์ฌ์ฉํ ๋๋ ํญ์ ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ์ต์ฐ์ ์ผ๋ก ๊ณ ๋ คํ์ธ์. ๋๋ก๋ ๊ฐ๋จํ ์ธ๋ผ์ธ ํ์ ์ด ๋ณต์กํ ํ์ ๋ณ์นญ๋ณด๋ค ๋ ๋์ ์ ์์ต๋๋ค. ์ํฉ์ ๋ฐ๋ผ ์ ์ ํ ํ๋จํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ด๋ฌํ ๋ฒ ์คํธ ํ๋ํฐ์ค์ ํ๋ค์ ๋ฐ๋ฅด๋ฉด, ์ฌ๋ฌ๋ถ์ TypeScript ์ฝ๋๋ ๋์ฑ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์๊ฐ ์ฌ์์ง ๊ฒ์ ๋๋ค. ๋ง์น ์ฌ๋ฅ๋ท์์ ์ ๋ฌธ๊ฐ๋ค์ด ํจ์จ์ ์ผ๋ก ํ๋ก์ ํธ๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ฒ๋ผ, ์ฌ๋ฌ๋ถ๋ ํ์ ๋ณ์นญ์ ๋ง์คํฐํ์ฌ ์ฝ๋๋ฅผ ๋์ฑ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์๊ฒ ๋ ๊ฑฐ์์!
ํ์ ๋ณ์นญ์ TypeScript์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ ์ค ํ๋์ด์ง๋ง, ์ด๊ฒ์ ์ฌ๋ฌ๋ถ์ด ๋ฐฐ์ธ ๋ง์ ๊ฒ๋ค ์ค ํ๋์ผ ๋ฟ์ ๋๋ค. ๊ณ์ํด์ ํ์ตํ๊ณ ์คํํ๋ฉฐ, ์ฌ๋ฌ๋ถ๋ง์ ์ฝ๋ฉ ์คํ์ผ์ ๋ฐ์ ์์ผ ๋๊ฐ์ธ์. TypeScript์ ์ธ๊ณ๋ ๋ฌด๊ถ๋ฌด์งํ๋ต๋๋ค! ๐
๋ค์ ์น์ ์์๋ ์ค์ ํ๋ก์ ํธ์์ ํ์ ๋ณ์นญ์ ํ์ฉํ ์ฌ๋ก ์ฐ๊ตฌ๋ฅผ ์ดํด๋ณด๋ฉฐ, ์ด ๋ชจ๋ ๊ฐ๋ ๋ค์ด ์ด๋ป๊ฒ ์ค์ ๋ก ์ ์ฉ๋๋์ง ์์๋ณด๊ฒ ์ต๋๋ค. ์ค๋น๋์ จ๋์? ๋ ๊น์ด ์๋ TypeScript์ ์ธ๊ณ๋ก ํจ๊ป ๋ ๋๋ด ์๋ค! ๐
๐๏ธ ์ค์ ํ๋ก์ ํธ ์ฌ๋ก ์ฐ๊ตฌ: ํ์ ๋ณ์นญ์ ํ
์, ์ด์ ์ฐ๋ฆฌ๊ฐ ๋ฐฐ์ด ๋ชจ๋ ๊ฒ์ ์ค์ ํ๋ก์ ํธ์ ์ ์ฉํด๋ณผ ์๊ฐ์ ๋๋ค! ๊ฐ์์ ํ๋ก์ ํธ๋ฅผ ํตํด ํ์ ๋ณ์นญ์ด ์ด๋ป๊ฒ ์ฝ๋์ ํ์ง์ ํฅ์์ํค๊ณ ๊ฐ๋ฐ ๊ฒฝํ์ ๊ฐ์ ํ๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์ด ํ๋ก์ ํธ๋ ์ฌ๋ฅ๋ท๊ณผ ๋น์ทํ ์จ๋ผ์ธ ํ๋ซํผ์ ๊ฐ๋ฐํ๋ ๊ฒ์ด๋ผ๊ณ ์์ํด๋ณผ๊น์? ๐
ํ๋ก์ ํธ: ์จ๋ผ์ธ ์คํฌ ๊ณต์ ํ๋ซํผ "SkillShare" ๐ค
์ด ํ๋ซํผ์ ์ฌ์ฉ์๋ค์ด ์์ ์ ๊ธฐ์ ์ ๊ณต์ ํ๊ณ , ๋ค๋ฅธ ์ฌ๋์ ๊ธฐ์ ์ ๋ฐฐ์ธ ์ ์๋ ๊ณต๊ฐ์ ๋๋ค. ์ฃผ์ ๊ธฐ๋ฅ์ผ๋ก๋ ์ฌ์ฉ์ ํ๋กํ, ์คํฌ ๋ฑ๋ก, ์์ ์์ฝ ๋ฑ์ด ์์ต๋๋ค.
1. ์ฌ์ฉ์ ๊ด๋ จ ํ์ ์ ์ ๐ค
// types/user.ts
export type UserID = string;
export type UserRole = 'student' | 'teacher' | 'admin';
export type User = {
id: UserID;
name: string;
email: string;
role: UserRole;
skills: Skill[];
joinDate: Date;
};
export type Skill = {
id: string;
name: string;
level: 'beginner' | 'intermediate' | 'advanced';
};
export type UserProfile = Omit<user> & {
bio: string;
avatarUrl: string;
};
</user>
์ด๋ ๊ฒ ํ์ ์ ์ ์ํ๋ฉด ์ฌ์ฉ์ ๊ด๋ จ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋ ์ผ๊ด์ฑ๊ณผ ํ์ ์์ ์ฑ์ ํ๋ณดํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ์ฌ์ฉ์ ํ๋กํ์ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ์ป์ ์ ์์ฃ !
2. API ์๋ต ํ์ ์ ์ ๐
// types/api.ts
export type ApiResponse<t> = {
data: T;
status: 'success' | 'error';
message: string;
};
export type PaginatedResponse<t> = ApiResponse<{
items: T[];
total: number;
page: number;
pageSize: number;
}>;
export type ErrorResponse = ApiResponse<null>;
</null></t></t>
์ด๋ฌํ API ์๋ต ํ์ ์ ์ ์ํ๋ฉด, ๋ฐฑ์๋์์ ํต์ ์์ ์ผ๊ด๋ ๊ตฌ์กฐ๋ฅผ ์ ์งํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ๋ค์ํ API ์๋ํฌ์ธํธ๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ์ ์ฌํ ๊ฐ๋ ์ด์์!
3. ์์ ๊ด๋ จ ํ์ ์ ์ ๐
// types/lesson.ts
import { UserID } from './user';
export type LessonID = string;
export type LessonStatus = 'scheduled' | 'ongoing' | 'completed' | 'cancelled';
export type Lesson = {
id: LessonID;
title: string;
description: string;
teacherId: UserID;
studentIds: UserID[];
scheduledAt: Date;
duration: number; // in minutes
status: LessonStatus;
skillId: string;
};
export type LessonCreationData = Omit<lesson> & {
status?: LessonStatus;
};
export type LessonUpdateData = Partial<omit>>;
</omit></lesson>
์ด๋ ๊ฒ ์์ ๊ด๋ จ ํ์ ์ ์ ์ํ๋ฉด, ์์ ์์ฑ, ์กฐํ, ์ ๋ฐ์ดํธ ๋ฑ์ ์์ ์ ํ์ ์์ ํ๊ฒ ์ํํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ๋ค์ํ ์์ ์ ๋ณด๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ์ป์ ์ ์์ด์!
4. ์ํ ๊ด๋ฆฌ๋ฅผ ์ํ ํ์ ์ ์ ๐
// types/store.ts
import { User, Lesson } from './index';
export type AppState = {
user: {
currentUser: User | null;
isLoading: boolean;
error: string | null;
};
lessons: {
items: Lesson[];
isLoading: boolean;
error: string | null;
};
};
export type AppAction =
| { type: 'SET_CURRENT_USER'; payload: User }
| { type: 'CLEAR_CURRENT_USER' }
| { type: 'SET_USER_LOADING'; payload: boolean }
| { type: 'SET_USER_ERROR'; payload: string }
| { type: 'SET_LESSONS'; payload: Lesson[] }
| { type: 'SET_LESSONS_LOADING'; payload: boolean }
| { type: 'SET_LESSONS_ERROR'; payload: string };
์ด๋ฌํ ์ํ ๊ด๋ฆฌ ํ์ ์ ์ ์ํ๋ฉด, ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ญ ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค. ์ฌ๋ฅ๋ท์์ ์ ์ฒด ํ๋ซํผ์ ์ํ๋ฅผ ๋ชจ๋ํฐ๋งํ๊ณ ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ์ ์ฌํ ๊ฐ๋ ์ด์์!
5. ์ ํธ๋ฆฌํฐ ํจ์๋ฅผ ์ํ ํ์ ์ ์ ๐ ๏ธ
// types/utils.ts
export type Mapper<t u> = (item: T) => U;
export type AsyncOperation<t> = () => Promise<t>;
export type ValidationResult<t> = {
isValid: boolean;
errors: Partial<record t string>>;
};
export type Validator<t> = (data: T) => ValidationResult<t>;
</t></t></record></t></t></t></t>
์ด๋ฌํ ์ ํธ๋ฆฌํฐ ํ์ ๋ค์ ๋ค์ํ ์ํฉ์์ ์ฌ์ฌ์ฉ๋ ์ ์์ด, ์ฝ๋์ ์ผ๊ด์ฑ๊ณผ ์ฌ์ฌ์ฉ์ฑ์ ๋์ฌ์ค๋๋ค. ์ฌ๋ฅ๋ท์์ ๋ค์ํ ๊ธฐ๋ฅ๋ค์ ๋ชจ๋ํํ์ฌ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ๊ณผ ๊ฐ์ ํจ๊ณผ๋ฅผ ์ป์ ์ ์์ด์!
๐ ํ๋ก์ ํธ ์ธ์ฌ์ดํธ: ์ด๋ ๊ฒ ํ์ ๋ณ์นญ์ ํ์ฉํ์ฌ ํ๋ก์ ํธ์ ํ์ ์์คํ ์ ๊ตฌ์ถํ๋ฉด, ๋ค์๊ณผ ๊ฐ์ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค:
- ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์์ฒด ๋ฌธ์ํ ํฅ์
- ํ์ ์์ ์ฑ ํ๋ณด๋ก ๋ฐํ์ ์๋ฌ ๊ฐ์
- IDE์ ์๋ ์์ฑ ๊ธฐ๋ฅ ๊ฐํ๋ก ๊ฐ๋ฐ ์์ฐ์ฑ ํฅ์
- ์ฝ๋ ๋ฆฌํฉํ ๋ง ์ ๋ณ๊ฒฝ ์ฌํญ์ ์ํฅ ๋ฒ์๋ฅผ ์ฝ๊ฒ ํ์ ๊ฐ๋ฅ
- ํ์ ๊ฐ์ ์ฝ๋ ์ดํด๋ ํฅ์ ๋ฐ ํ์ ํจ์จ์ฑ ์ฆ๋
์ด๋ฌํ ํ์ ์์คํ ์ ๊ธฐ๋ฐ์ผ๋ก ์ค์ ์ปดํฌ๋ํธ์ ํจ์๋ค์ ๊ตฌํํ๋ฉด, ํจ์ฌ ๋ ์์ ์ ์ด๊ณ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ ์ ์์ต๋๋ค. ํ์ ๋ณ์นญ์ ๋จ์ํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ ๋์ด, ์ ์ฒด ํ๋ก์ ํธ์ ๊ตฌ์กฐ์ ํ์ง์ ํฅ์์ํค๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค.
์ฌ๋ฌ๋ถ๋ ์ด์ ํ์ ๋ณ์นญ์ ์ง์ ํ ํ์ ๋๋ผ์ จ๋์? ์ด๊ฒ์ ๋จ์ํ ๊ธฐ๋ฅ์ด ์๋๋ผ, ์ฌ๋ฌ๋ถ์ ์ฝ๋์ ์๋ช ์ ๋ถ์ด๋ฃ๋ ๋ง๋ฒ ๊ฐ์ ์กด์ฌ์ ๋๋ค. ์ฌ๋ฅ๋ท์์ ๋ค์ํ ์ฌ๋ฅ๋ค์ด ๋ชจ์ฌ ํ๋์ ๋ฉ์ง ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ ๊ฒ์ฒ๋ผ, ํ์ ๋ณ์นญ์ ํตํด ์ฌ๋ฌ๋ถ์ TypeScript ํ๋ก์ ํธ๋ ๋์ฑ ๋น๋๊ฒ ๋ ๊ฒ์ ๋๋ค! ๐
์ด์ ์ฌ๋ฌ๋ถ์ ํ์ ๋ณ์นญ์ ๋ชจ๋ ๊ฒ์ ์๊ฒ ๋์์ต๋๋ค. ์ด ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ํ์ฉํ์ฌ ์ฌ๋ฌ๋ถ๋ง์ ๋ฉ์ง ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๋ณด์ธ์. TypeScript์ ์ธ๊ณ๋ ๋ฌด๊ถ๋ฌด์งํ๋ฉฐ, ์ฌ๋ฌ๋ถ์ ์ฝ๋ฉ ์ฌ์ ์ ์ฌ๊ธฐ์ ๋๋์ง ์์ต๋๋ค. ๊ณ์ํด์ ํ์ตํ๊ณ , ์คํํ๊ณ , ์ฑ์ฅํ์ธ์. ์ฌ๋ฌ๋ถ์ ๋ค์ ํ๋ก์ ํธ๋ ์ด๋ค ๋ชจ์ต์ผ๊น์? ๊ทธ ๋ฏธ๋๊ฐ ์ ๋ง ๊ธฐ๋๋ฉ๋๋ค! ๐
- ์ง์์ธ์ ์ฒ - ์ง์ ์ฌ์ฐ๊ถ ๋ณดํธ ๊ณ ์ง
์ง์ ์ฌ์ฐ๊ถ ๋ณดํธ ๊ณ ์ง
- ์ ์๊ถ ๋ฐ ์์ ๊ถ: ๋ณธ ์ปจํ ์ธ ๋ ์ฌ๋ฅ๋ท์ ๋ ์ AI ๊ธฐ์ ๋ก ์์ฑ๋์์ผ๋ฉฐ, ๋ํ๋ฏผ๊ตญ ์ ์๊ถ๋ฒ ๋ฐ ๊ตญ์ ์ ์๊ถ ํ์ฝ์ ์ํด ๋ณดํธ๋ฉ๋๋ค.
- AI ์์ฑ ์ปจํ ์ธ ์ ๋ฒ์ ์ง์: ๋ณธ AI ์์ฑ ์ปจํ ์ธ ๋ ์ฌ๋ฅ๋ท์ ์ง์ ์ฐฝ์๋ฌผ๋ก ์ธ์ ๋๋ฉฐ, ๊ด๋ จ ๋ฒ๊ท์ ๋ฐ๋ผ ์ ์๊ถ ๋ณดํธ๋ฅผ ๋ฐ์ต๋๋ค.
- ์ฌ์ฉ ์ ํ: ์ฌ๋ฅ๋ท์ ๋ช ์์ ์๋ฉด ๋์ ์์ด ๋ณธ ์ปจํ ์ธ ๋ฅผ ๋ณต์ , ์์ , ๋ฐฐํฌ, ๋๋ ์์ ์ ์ผ๋ก ํ์ฉํ๋ ํ์๋ ์๊ฒฉํ ๊ธ์ง๋ฉ๋๋ค.
- ๋ฐ์ดํฐ ์์ง ๊ธ์ง: ๋ณธ ์ปจํ ์ธ ์ ๋ํ ๋ฌด๋จ ์คํฌ๋ํ, ํฌ๋กค๋ง, ๋ฐ ์๋ํ๋ ๋ฐ์ดํฐ ์์ง์ ๋ฒ์ ์ ์ฌ์ ๋์์ด ๋ฉ๋๋ค.
- AI ํ์ต ์ ํ: ์ฌ๋ฅ๋ท์ AI ์์ฑ ์ปจํ ์ธ ๋ฅผ ํ AI ๋ชจ๋ธ ํ์ต์ ๋ฌด๋จ ์ฌ์ฉํ๋ ํ์๋ ๊ธ์ง๋๋ฉฐ, ์ด๋ ์ง์ ์ฌ์ฐ๊ถ ์นจํด๋ก ๊ฐ์ฃผ๋ฉ๋๋ค.
์ฌ๋ฅ๋ท์ ์ต์ AI ๊ธฐ์ ๊ณผ ๋ฒ๋ฅ ์ ๊ธฐ๋ฐํ์ฌ ์์ฌ์ ์ง์ ์ฌ์ฐ๊ถ์ ์ ๊ทน์ ์ผ๋ก ๋ณดํธํ๋ฉฐ,
๋ฌด๋จ ์ฌ์ฉ ๋ฐ ์นจํด ํ์์ ๋ํด ๋ฒ์ ๋์์ ํ ๊ถ๋ฆฌ๋ฅผ ๋ณด์ ํฉ๋๋ค.
ยฉ 2025 ์ฌ๋ฅ๋ท | All rights reserved.
๋๊ธ 0๊ฐ