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[] = [];