sparta

[항해99]WEEK7-WIL

hahihuree 2021. 7. 25. 21:28

   WEEK7. 클론코딩 & 실전프로젝트   

# 클론코딩

우리조는 인스타그램 클론코딩을 하였고, 프론트와 백의 협업 방법을 배웠다.

 Ⅰ. 페이지 뜯어 보기  

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

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

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

 

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.수정 페이지

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

 

 

 Ⅲ. 골라잡기  

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

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


Front

  • 나 :
    • R 메인페이지+Nav
    • C 게시글 작성
    • U 게시글 수정
    • D 게시글 삭제
    • U 좋아요

 

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

 

Back

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

비록 계획했던 기능인 무한스크롤과 유저페이지를 만들지 못하고 끝내 아쉬움이 컸지만, 큰 문제 없이 프로젝트를 마무리 할 수 있어서 다행이었다. 

 

 

# 실전프로젝트

 

이제 항해의 마지막 과정인 실전프로젝트가 시작됐다. 조가 형성되기까지 우여곡절이 많아 걱정이 됐는데, 마음편한 사람들과 같은 조가 되어 안심할 수 있었다. 우리 조의 주제가 확정된게 아니라 일단 서로가 생각하는 여러 이야기를 주고받으며 노션에 회의록을 적고, 다음날 큰 틀의 와이어프레임을 짜면서 계획을 구체화 했다. 이전에는 일주일간의 프로젝트만 해봐서 허둥지둥대는 조급함이 없지않아 있었지만, 이번에는 3주의 개발기간이 주어졌고 우리들만의 독창적인 서비스를 계획해야 하기에 조금 더 꼼꼼하고 진득하게 계획을 세웠다. 월요일에 다시 한번 만나 api계획을 주고받으면 얼추 큰 뼈대는 잘 잡힐 것 같아 기대가 된다.