9월 22일 (화)_First Project - 02 (SR)

오늘의 프로젝트 진행 상황

1. 와이어프레임, 컴포넌트 작성

2. 기능 Flow 의사코드 작성 (이후 도식화 예정)

3. 데이터베이스 스키마 작성

1. 와이어프레임, 컴포넌트 작성

  위 이미지는 오늘 figma라는 Tool을 사용하여 작성한 와이어프레임을 캡쳐한 것입니다. 와이어프레임을 작성하며 좀 더 서비스의 구체적인 디테일들을 잡을 수 있었습니다. 예를 들어 Navbar, Sidebar, 회원가입 페이지 등을 어떻게 나타낼 것이며 고객에게 필요한 정보들은 어떤 것들이 있을까? 등 프로젝트를 시작할 때 생각했던 아이디어를 구체적으로 만들 수 있는 시간이였습니다. figma를 통해 실제로 버튼 클릭 이벤트 등을 구현할 수 있다고하여 이도 적용해 보려 했으나 시간이 부족하여 넘어갔던 점이 아쉬웠습니다. 이후 개인적인 시간에 해볼 예정입니다.

  우측 아래에는 간단하게 만든 Mohaji의 로고와 컴포넌트 구성을 간단하게나마 적어보았습니다. 아마 여기 적힌 컴포넌트 Name을 따라 Client를 구성하지 않을까? 싶습니다.

2. 기능 Flow 의사코드 작성

# 로그인기능

## client
1. 로그인 페이지
2. 로그인 시도 -> server -> 유효한 로그인지 판단하고
3. 유요하다면 로그인성공 -> 메인, 유효하지 않다면 -> 화면에 잘못된 id,pw라고 알려주기
​
## server (get)
1. 요청이 들어옴
2. id, pw -> 기존에 있는 사람인지 확인(동일한지)
3. 있으면 status(200)과 함께 닉네임을 돌려줌
4. ↑이때 session을 만든다.
5. 없다면 400 ~ send();
​
​
# 회원가입
​
## client
1. 회원가입 페이지
2. 닉네임, 이메일 에대해서 중복확인.
3. 중복안될시 정상적인 진행. 중복된다면 해당 내용 빨간박스
4. 모두 정상인 상태로 회원가입 버튼 누르면 서버로 해당정보(태그선택) 전송
5. 회원가입 성공시 -> 로그인 페이지로 이동
​
## server (post)
1. 닉네임, 이메일에 대한 중복확인요청
2. 이미 존재하는 닉네임, 이메일이 있다면 400번대 돌려주고
3. 없다면 200
4. 회원가입 요청시 닉네임과 이메일이 각각 존재하는지 다시 확인후 둘다 없다면
5. 데이터베이스에 쓰고 201돌려주기.
6. 있다면 400~ .


# 코멘트
​
## client
1. 업체정보에 들어가면 댈글 관련 api를 호출 (api가 불러올 댓글 수를 선택 가능한)
2. 업체정보에 들어가면 최하단에 댓글 표시 (5개)
3. 더보기 누르면 10 댓글 상세페이지로 이동
4. 이번엔 댓글 관련 api를 10개 or 20개 단위로 호출.
5. 댓글 상세페이지 상단에 댓글 작성가능한 박스가 존재함
6. 로그인되어있는 유저만 댓글작성 가능.
7. 로그인이 되어있지 않은 유저는 댓글 창을 클릭할때 - 로그인이 필요한 서비스입니다.
8. 출력을 해줄때 http://또는 https:// 로 시작하면 a 태그로 작성
​
## server
1. 요청 받으면 해당 업체에 달린 댓글을 돌려준다.
(이때 설정된 개수만큼 돌려줌.)
2. 업체정보가 유효하지 않거나, 불러올 댓글 개수가 존재하지 않다면 오류
3. 없체정보 없을때 - 404
4. 댓글 개수가 정해지지 않고 들어온다면 401

  위 내용은 오늘 작성한 기능 Flow 의사코드의 일부만을 나타낸 것입니다. 원래라면 도식화하여야 하지만 만들고 난 이후 수정작업을 많이하지 않을까? 라는 의견이 있었습니다. 아무래도 처음 작성하는 기능 Flow다 보니 부족한 점이 많을 것이고 이를 무시하고 도식화하였을 경우 결국 2번 or 3번 작업하는 일이 발생할 듯하여 우선 의사코드로만 작성하는 것으로 하였습니다.

3. 데이터베이스 스키마 작성

  위 이미지는 Mohaji 서비스의 데이터베이스 스키마를 구성한 것입니다. 사용한 Tool은 dbdiagram을 사용하였습니다. 시작하기 전에는 정말 많은 테이블들이 필요할 것이라 어림직작 하였었는데 막상 만들고보니 생각보다는 테이블 수가 많지는 않았습니다. 테이블들의 Join을 통해 클라이언트에서 원하는 데이터들을 다양한 방식으로 보낼 수 있다는 점을 새삼 다시 깨닫는 시간이였습니다.

4. 마무리하며...

  돌이켜보니 오늘 하루동안 정말 많은 것들을 만들었네요. 후~~ 팀원분들이 다들 적극적이시고 노력파여서 이런 퀄리티와 진행율을 보여주는 것 같습니다. 남은 기간동안에도 지금과 같이 쭈욱~ 진행하였으면 하네요. 오늘 하루도 수고 많았습니다. 밤이 늦었네요. 다들 Good Night~~!!

참고 Link (Tool)

1. www.figma.com/file/SWGuTyN5pZ92c0HqVyWhXS/Mohagi?node-id=0%3A1

Figma

2. dbdiagram.io/d/5f69c9707da1ea736e2ed335

dbdiagram.io - Database Relationship Diagrams Design Tool