(장준영)Vanilla JavaScript로 SPA 구현하기 [6일차] - 식당/카페 여석 확인 어플리케이션
2024. 4. 16. 21:48ㆍ프로젝트 일지
기능 요구사항을 전체적으로 한번 더 점검을 해주었다
이제 기능 요구사항을 보고 필요한 데이터들을 전부 작성해주고, 디비를 디자인할거다
그리고 디비 디자인이 끝나면 대략 어떤 순서로 작업해야하는지가 보인다
일단 데이터 작성부터 해보자
데이터 작성이 끝났고, 데이터들과 어디에 사용되는지를 보면서 거기에 맞게 디비를 디자인할거다
나는 mongoDB를 사용하는데 몽고디비는
https://edykim.com/ko/post/summary-of-six-rules-for-designing-a-mongodb-schema/
이렇게 디자인하는게 정석이라고 한다, 하지만 나는
그냥 했다, 딱히 문제가 없을뿐 아니라, 사실 과제가 오늘 포함해서 4일 남은거라... 몽고디비 디자인 규칙까지 공부하면서 만들기엔 빡쎄다고 생각이 들었다, 하지만 다음주에 새로하는 프로젝트에서는 몽고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 랑 게임 신청한 | |
'프로젝트 일지' 카테고리의 다른 글
(장준영)Vanilla JavaScript로 SPA 구현하기 [7일차] - 식당/카페 여석 확인 어플리케이션 (0) | 2024.04.18 |
---|---|
(김유선) 중고거래 사이트를 SPA로 만들기 9일차 - 로그인 후 기능 (0) | 2024.04.17 |
(김유선) 중고거래 사이트를 SPA로 만들기 8일차 - 로그인 후 기능 (0) | 2024.04.16 |
(김유선) 중고거래 사이트를 SPA로 만들기 7일차 - 로그인, 로그아웃 (0) | 2024.04.16 |
(김유선) 중고거래 사이트를 SPA로 만들기 6일차 - 로그인 기능 (0) | 2024.04.14 |