Today I Learned/TIL 07
2023 - 07 - 27 타입스크립트 별다방 프로젝트 - 1
sangwoo_rhie
2023. 7. 31. 22:43
오늘 할 일 - 별다방 프로젝트
별다방 프로젝트 구성:
1. 음료 등록기능 - 어드민
2. 음료 삭제기능 - 어드민
3. 음료 조회기능 - 어드민, 고객
4. 음료 주문기능 - 고객
5. 음료 준비 완료 기능 - 어드민
6. 음료 수령기능 - 고객
프로젝트 셋팅
npm init -y
tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true
뜻:
--rootDir ./src : 프로그램의 소스 파일이 들어가는 경로는 src 디렉토리
--outDir ./dist : 컴파일이 된 파일들이 들어가는 디렉토리는 dist 디렉토리
--esModuleInterop : CommonJS 방식의 모듈을 ES모듈 방식의 import 구문으로 가져오기
package.json의 "script" 변경
"scripts": {
"start": "tsc && node ./dist/index.js",
"build": "tsc --build",
"clean": "tsc --build --clean"
},
src 디렉토리 생성
터미널 명령어 입력
code .
인터페이스 & 데이터 정의
유저 인터페이스 정의 (유저는 어드민 또는 고객 중 하나여야 한다.)
속성: 아이디, 이름
role: 유저는 어드민 또는 고객 중 하나여야 한다.
interface User {
id: number;
name: string;
role: 'admin' | 'customer';
}
음료 인터페이스 정의
-속성: 이름,가격
interface Beverage {
name: string;
price: number;
}
주문 인터페이스 정의
- 속성: 주문아이디, 주문고객 ID, 주문고객 이름, 음료이름, 상태
(상태: ‘placed’(주문), ‘completed”(제작 완료), ‘picked-up’ (수취 완료))
interface Order {
orderId: number;
customerId: number;
customerName: string;
beverageName: string;
status: "placed" | "completed" | "picked-up";
}
코드 데이터 정의
어드민이 만든 음료들의 목록을 관리할 수 있어야 한다.
고객이 주문한 내용에 대해서도 관리할 수 있어야 한다.
let beverages: Beverage[] = [];
let orders: Order[] = [];