프론트와 백의 협업순서

 

 Ⅰ. 페이지 뜯어 보기  

# 일단, 내가 구현할 수 있는지 없는지를 떠나

# 페이지에 그대로 보이는 뷰와 기능을 적고

# 필요한 데이터를 뽑아낸다.

 

0. 회원가입 + 로그인

• 회원가입 : 아이디, 닉네임, 비밀번호, 비밀번호 확인을 서버에게 보내준다.
• 로그인 : 아이디, 비밀번호를 서버에게 보내준다.

1. Nav바

• 로고
• 게시글 작성 버튼
• 자기페이지 이동 버튼

2. 메인페이지

• 포스팅목록을 최신순으로 보여준다.
• 포스팅에는 작성자 프로필, 작성자 이름,  삭제버튼, 수정버튼, 이미지. 좋아요 여부, 댓글 갯수, 작성자 이름, 내용을 보여준다.
• 서버는 포스팅을 보낼때 작성자 프로필, 작성자 이름, 이미지. 좋아요 여부, 댓글 갯수, 내용, 본인포스팅 여부(is_me)를 보내준다.

3. 좋아요

• 포스팅 목록을 조회할때 해당 유저가 이 포스팅을 좋아요를 했는지 여부를 같이 데이터를 준다.
• 좋아요를 안했다면 눌렀을 때 하트가 채워진다. 좋아요 요청을 보낸다.
• 좋아요를 했다면 눌렀을 때 하트가 비워진다. 좋아요 취소 요청을 보낸다.
• 좋아요를 눌렀을 때 유저아이디와 포스팅아이디를 서버에게 보내줘야한다.

4. 댓글

•  댓글 모두보기 버튼
• 댓글 모두보기 버튼을 클릭하면, 댓글 목록으로 이동한다.
• 댓글 작성할때는 로그인이 되어있어야한다. userid가 필요하다.
• 댓글을 최신순으로 조회하려면 날짜가 필요하다.
• 댓글목록을 보여주고 그밑에서 댓글을 작성하게한다,
• 댓글을 작성할때 옆에 본인의 프로필이 뜬다.

5. 유저페이지

• 유저의 프로필, 이름, 상태메시지를 보여줘야한다.
• 해당 유저가 그동한 작성한 글들을 최신순으로 (1칸뷰) 보여준다.

6. 작성페이지

• 따로 Nav바에 추가아이콘을 누르면 작성페이지로 넘어간다.
• 작성시 유저아이디, 내용, 이미지가 필요하다.
• 이미지 미리보기
• 내용이 없을 때 작성하지 못하게한다.
• 이미지가 없을 때 작성하지 못하게한다.

7. 삭제버튼

• 포스트 상단에 수정버튼과 삭제버튼을 같이 두자!
• 포스팅 아이디를 서버에게 준다.

8. 수정 버튼

• 포스트 상단에 수정버튼과 삭제버튼을 같이 두자!
• 자기 글이면 수정 버튼이 보이게 자기글이 아니라면 안보인다!
• 자기 글인지 여부는 서버에서 보내주긔
• 수정 버튼을 누르면 수정 페이지로 넘어간다.

9. 수정 페이지

• 수정 페이지로 갈때는 정보를 가져가야한다.
• 포스팅 아이디로 서버에게 요청을 보내면 서버는 포스팅 내용, 이미지, 포스팅 아이디, 유저 프로필 사진, 유저 아이디를 준다.
• 수정 내용이 없을 때 수정하지못하게한다.
• 수정 이미지가 없을 때 수정하지 못하게한다.

 

# 이 내용을 바탕으로 API를 설계한다.

 

---

 

 Ⅱ. 우선순위 정하기  

# Ⅰ에서 나온 내용을 바탕으로 각자 중요하다고 생각하는 순서대로 우선순위를 메긴다.

# 모두의 의견을 고려해서 종합적인 우선순위를 뽑아낸다.

 

1. Nav바 2. 메인페이지 3. 좋아요 4. 댓글 5. 유저페이지 6. 작성페이지 7.삭제버튼 8. 수정버튼 9.수정 페이지

• 나: Nav->메인->작성->수정버튼->수정페이지->로그인+회원가입->삭제버튼->좋아요->댓글->유저페이지
• FRONT : 메인->작성->삭제버튼->수정버튼->수정페이지->로그인+회원가입->Nav->좋아요->댓글->유저페이지
• BACK1 : 메인->작성->로그인+회원가입->수정페이지->댓글->좋아요->수정버튼->삭제버튼->유저페이지->Nav
• BACK2 : 메인->작성->삭제버튼->로그인+회원가입->좋아요->유저페이지->수정버튼->수정페이지->댓글->Nav

종합 : 메인(Nav)->작성->로그인+회원가입->수정버튼->수정페이지->삭제버튼->좋아요->댓글->유저페이지

 

---

 

 Ⅲ. 골라잡기  

# 각자 하고싶은 기능을 골라 Ⅱ에서 도출한 종합 우선순위대로 작업을 각자 진행한다.

# 진행하면서 막히는 부분은 무조건 팀원과 공유한다.

Front

• 나:
  • R 메인페이지+Nav(v-작성자 및 프로필, 댓글개수 반영은 회원가입후?)
  • C 게시글 작성
  • U 게시글 수정
  • D 게시글 삭제(v)
  • U 좋아요

 

• FRONT: 로그인+회원가입, 댓글, 유저페이지

 

Back

• BACK1: 메인, 작성, 수정, 삭제, 좋아요, 유저페이지
• BACK2: 로그인+회원가입, 댓글
  -> 프론트에게 가짜 토큰주기.