(장준영)Vanilla JavaScript로 SPA 구현하기 [6일차] - 식당/카페 여석 확인 어플리케이션

2024. 4. 16. 21:48프로젝트 일지

기능 요구사항을 전체적으로 한번 더 점검을 해주었다

이제 기능 요구사항을 보고 필요한 데이터들을 전부 작성해주고, 디비를 디자인할거다

그리고 디비 디자인이 끝나면 대략 어떤 순서로 작업해야하는지가 보인다

 

일단 데이터 작성부터 해보자 

데이터 작성이 끝났고, 데이터들과 어디에 사용되는지를 보면서 거기에 맞게 디비를 디자인할거다 

나는 mongoDB를 사용하는데 몽고디비는 

https://edykim.com/ko/post/summary-of-six-rules-for-designing-a-mongodb-schema/

 

MongoDB 스키마 디자인을 위한 6가지 규칙 요약 - 용균

MongoDB를 개인 프로젝트에서 자주 사용하긴 하는데 항상 쓰던 방식대로만 사용하고 있어서 스키마를 제대로 구성하고 있는지 검색하다가 이 글을 찾게 되었다. MongoDB 블로그에 올라온 포스트인 6

edykim.com

이렇게 디자인하는게 정석이라고 한다, 하지만 나는

그냥 했다, 딱히 문제가 없을뿐 아니라, 사실 과제가 오늘 포함해서 4일 남은거라... 몽고디비 디자인 규칙까지 공부하면서 만들기엔 빡쎄다고 생각이 들었다, 하지만 다음주에 새로하는 프로젝트에서는 몽고db를 몽고디비 답게 쓰도록 노력해보겠다 !!! ㅋㅋㅋ

DB 디자인 모습이다, 그냥 종이에 생각하면서 손으로 그렸다

이제 빠르게 json api 를 설계해주자

url 명명 규칙도 rest full 그런거 생각 안 하고 그냥 내맘대로 할거다 

메소드 URL
설명
클라이언트에서 처리와 보내는 data 서버에서 처리와 보내줄 json
공동      
get /register
회원가입창 요청
----------------------------------------------------------> 회원가입창 렌더링 [모든<user>의._id
<----------------------------------------------------------------
post /register
회원가입 요청
입력한 username, password 공백검사
선택한 usertype 채크검사

입력한 username

입력한 password
선택한 usertype
---------------------------------------------------------->
회원가입창 사라지게하고
처음화면 렌더링
받은 data 공백검사
받은 username, DB중복검사
DB<user>에 받은데이터 insert
리다이렉트/
<----------------------------------------------------------------
post /login
로그인 요청
입력한 username, password 공백검사
입력한 username
입력한 password
---------------------------------------------------------->
usertype 따라 관리자or사용자 모드 렌더링
받은 data 검사
요청.user._id

요청.user.username
요청.user.usertype
if( usertype == admin ){
<store_owner>중 owner_id가 user._id인 <store>
}
if( usertype == user ){
<store> 전부
}
<----------------------------------------------------------------
관리자      
post /make-store
매장생성 요청
입력한 인풋들 공백검사
입력한 storename

입력한 chairnumber
입력한 storelocation
입력한 suggestedword
---------------------------------------------------------->
매장생성창 사라지게하고
관리자 모드 렌더링
DB<store>에 받은 데이터 insert
DB<store_owner>에 <store>id <user>id insert
리다이렉트/
<----------------------------------------------------------------
get /see-store
매장디테일 요청
선택한 가계의<store>.id
---------------------------------------------------------->
스토어 디테일정보 렌더링 
<store_user> 중 store_id 가 <store>.id<store_user>  전부
<chair_owner>중 store_id가 <store>.id인 <chair_owner>전부
<game_gg>중 store_id가 <store>.id인 <game_gg>전부 
<----------------------------------------------------------------
get /see-game
게임 내용 요청
<game_gg> 중 선택한 게임의 <game_in>.id
---------------------------------------------------------->
게임창 렌더링
<game_in>중 id가 <game_in>.id인 <game_in>
<game_chat>중 어떤게임에서발생한chat? 이 <game_in>.id인
<game_chat>전부 
<----------------------------------------------------------------
post /fix-store
매장정보 수정 요청
입력한 인풋들 공백검사
입력한 storename

입력한 chairnumber
입력한 storelocation
입력한 suggestedword
---------------------------------------------------------->

매장수정창 사라지게하고
관리자 모드 렌더링
DB<store>에 받은 데이터 update
<----------------------------------------------------------------
사용자      
get /go-store
매장정보 요청
선택한 매장의 <stroe>.id
---------------------------------------------------------->
매장 디테일 렌더링
<stroe>,id
<store_user>에서 가계 가 <store>.id인 <store_user>전부
<chair_owener>에서 가계가 <store>.id인 <store_owner> 전부
<----------------------------------------------------------------
post /sit-chair 자리에 앉을건지 재확인창 렌더링
속해있는 매장의<store>.id
자리에 앉을 user._id
선택한 자리번호
---------------------------------------------------------->
매장 디테일 렌더링
<char_owner>에 자리번호로 있는 자리인지 검사
실패시 자리있다는 json 통과후
<store>.id, user._id, 자리번호, 얼마나있었나? 를 받아서 <char_owner> insert
리다이렉트/

<----------------------------------------------------------------
get /see-userinfo 선택한 <chair_owner> 또는 <store_user> 의 자리주인 또는 손님 의 <user>.id
---------------------------------------------------------->
유저 디테일 렌더링
<user>에서 id 가 <user>.id인 <user>
<----------------------------------------------------------------
    여기 위 까지만 구현해도 자리 여석은 확인가능함 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 이 이후 기능은 위쪽까지 만들고 하자!
post /call-fight 실시간 맞짱 신청은 소켓통신을 배워야함 상대방한테 게임 신청 화면 띄워주게하고
나한테 신청 대기화면 10초간 띄워주게 하고
10초동안 안 받으면 자동 거절오게하고
post /accept-fight 실시간 맞짱 수락은 소켓통신을 배워야함 상대방과 나한테 게임시작 대기화면과 게임 제시어 5초간 띄워주게 하고 5초뒤 게임 시작화면 띄워주게 하고
post /refuse-fight 실시간 맞짱 거절은 소켓통신을 배워야함 상대방 게임 신청화면 꺼주고, 거절화면 띄워주게하고 나는 그냥 신청화면 꺼주고
post /make-fight user._id 랑 게임 신청한