Minimals UI

Minimals UI

Minimals UI 폴더 구조

• next-ts 또는 vite-ts 둘 중 하나를 선택해 프로젝트를 시작한다(starter 폴더는 테스트 폴더이다.)

Minimal_Typescript
  ├─ next-ts
  ├─ vite-ts
  ├─ starter-next-ts
  ├─ starter-vite-ts

• .env 파일 생성(다른 서버를 사용할때는 그 서버에 맞는 API 넣음)

//.env
NEXT_PUBLIC_HOST_API = http://localhost:7272/ (mock server Host API)

• 실행

yarn run dev

or

npm run dev

Mock Server API 연동

• 프로젝트 시작 시 나오는 화면 → 로그인 클릭
  

• mock server 포트를 제대로 넣어도 404 또는 500이 뜸
  

• mock server 프로젝트의 폴더 명을 endpoint와 동일하게 수정
  

• 로그인이 안된다면 mock server의 _auth.ts 파일 확인

Mock Server

1. Mock Server?

mock server는 실제 서버가 나오기 전 각종 기능들을 테스트하고 임의의 값을 받아오는 모의 서버 이다.

2. setting

• Dropbox안 minimal-api-dev-v6.10.zip을 다운받는다(최신 버전)

• yarn or npm 설치

yarn 

or

npm i

• 포트가 localhost:7272 올바른 포트에서 실행하고 있는지 확인

$"dev" : "next dev -p 7272"$
"start: "next start -p 7272"

• 서버 실행

yarn run dev

or

npm run dev