20220929 TIL

인스타그램 클론코딩

<aside> 🔥 Intro: “본격적인 팀 프로젝트 시작합시다!”

</aside>

• 미니 프로젝트와 파이썬, 장고기초까지 잘 헤쳐오신 여러분!
• 이제 본격적인 팀 프로젝트를 시작해 봅시다.
• 프로젝트를 통해 배운 것을 내것으로 만들어 보아요 😀

<aside> 🚩 What to do: 인스타그램을 Django로 구현해봅니다. (필수 포함 사항을 확인해주세요.)

</aside>

<aside> 🌟 아래의 내용을 포함하기만 한다면, 기능 추가 또는 수정이 자유입니다! 평소에 인스타그램을 사용하면서 불편하다고 생각했던 것이 있다면, 이번 기회에 반영해보세요.

</aside>

1. 첫번째 프로젝트인만큼 기본기를 익히는데 신경 써주세요! ex) 클릭시 정보의 흐름과 mvt 패턴의 이해
2. 인스타그램의 화려한 UI 뒤에 있는 로직을 생각해보겠습니다.
   • 회원가입 - 로그인 기능
   • 게시글 목록 페이지 - 게시글 작성 페이지 - 게시글 상세 조회 페이지 - 게시글 삭제 - 게시글 수정
   • 댓글 작성 - 댓글 목록 - 댓글 지우기
   • 게시글 좋아요 - 좋아요한 게시글 모아보기
   • 유저 팔로우 - 팔로우한 유저 모아보기 - 팔로우한 유저들의 게시글 모아보기
   • etc…
3. 전세계에서 20억명이 사용하는 서비스이지만 기본 기능들은 여러분들도 구현할 수 있는 CRUD입니다!
   • Create : 회원가입, 게시글 작성, 댓글 작성
   • Read : 회원정보 읽기, 게시글 목록 읽기, 게시글 상세 읽기, 댓글 읽기
   • Update : 회원정보 수정, 게시글 업데이트
   • Delete : 회원 탈퇴, 게시글 삭제, 댓글 삭제
4. 더 생각해보면 인스타그램뿐만 아니라 모든 IT 서비스의 기본은 CRUD입니다. 이번 프로젝트에서는 이 CRUD를 확실하게 익히고 넘어가도록 하겠습니다!

필수 포함 사항 (역할 분담해서 하나의 기능 이상 구현해보기)

1. 회원가입, 로그인, 로그아웃 기능 - 입력 데이터는 인스타 페이지 참고

1. 게시글 목록 페이지
   • 목록 페이지에 게시글 제목만 나오게 할지(네이버/다음 카페형), 내용이 일부만 나오게 할지(인스타/트위터 형)는 선택입니다!
2. 게시글 작성페이지
   • 게시글의 제목과 내용을 입력할 수 있는 작성페이지를 만들어주세요. 이미지 업로드는 용량이 큰 미디어파일인 만큼 조금 더 세팅이 필요합니다.
   • 1차적으로 제목과 내용을 업로드하는 기능을 만들어 완성 후 시간이 남으면 추가적으로 이미지 업로드 기능을 추가해주세요!
3. 게시글 상세 페이지
   • 목록페이지에서 클릭시 게시글 상세페이지로 이동합니다. 이때 상세페이지로 이동(카페형) vs 모달을 띄우기(인스타형) 선택을 할 수 있습니다. 이 차이는 순전히 프론트엔드의 영역으로 백엔드 로직은 동일하게 만들어집니다.
   • 백엔드 과정이고 첫 프로젝트인만큼 모달을 만들기 위해 많은 시간을 쓰지 않고 상세페이지로 이동하게 만드시는걸 추천드리겠습니다. 모달을 적용하고 싶은 팀은 1차적으로 프로젝트를 완성 후 추가적으로 작업해주세요! 개인적으로는 백엔드 추가 기능에 더 힘쓰는 것을 추천드립니다.
4. 댓글 작성
   • 게시글 상세 페이지에서 아래에 댓글을 작성할 수 있게 해주세요!
5. 댓글 읽기
   • 게시글 상세 페이지 아래에 댓글들을 시간순으로 볼 수 있게 해주세요!
6. 업데이트와 수정
   • 사용자들이 “본인의 글”만 수정/삭제 할 수 있게 해주세요!
   • 사용자들이 “본인의 댓글”만 삭제 할 수 있게 해주세요!
   • 선택) 본인의 글에 달린 댓글들은 남의 거라도 삭제 할 수 있게 해주세요!

추가 기능 구현 사항

<aside> ⏰ 혹! 우리 팀은 필수 기능 구현을 다해서 다른 기능을 추가하고 싶다면?

</aside>

1. Django의 Paginator 을 활용해 한페이지에 표시되는 게시글의 수를 10개로 제한해주세요
   1. Pagination | Django documentation | Django (djangoproject.com)
2. 게시글에 대한 좋아요 버튼을 추가해서 좋아요/취소 기능과 갯수 표시 기능을 추가해주세요
   1. 좋아요 한 글들만 모아볼 수 있는 페이지를 만들어주세요!
3. 유저에 대한 팔로우 기능을 생성해서 게시글 목록에 팔로우 한 유저의 글만 볼 수 있게 해주세요!
4. 검색창을 추가해서 유저와 게시글 제목을 검색할 수 있게 해주세요!

• 위 기능들은 난이도가 있으며 많은 구글링을 통해 도전할 수 있습니다.
• 순서대로 할 필요 없이 팀마다 도전해보고 싶은 기능들을 골라 도전해보세요.
• 단, 기본기능들만 팀원 모두가 구현할 수 있다면, 성공적인 첫 번째 프로젝트이니 욕심내지 않으셔도 좋습니다! 추후 프로젝트에 하나, 둘 씩 더 적용하게 되어 최종 프로젝트 때는 대부분 사용하게 될 겁니다

협업방식

<aside> 🎭 두 가지 협업방식

</aside>

1. Git을 이용해 각자 개인별 혹은 기능별 브랜치를 만들어서 작업하고 푸쉬해서 머지하는 Git flow 방식
2. vscode의 liveshare와 게더를 이용해서 한 사람의 컴퓨터를 공유하며 페어코딩으로 하는 방식

현업에서 사용하는 방식은 1번입니다! 그렇지만 첫 프로젝트이고 다같이 페어코딩으로 하면서 배우고 싶다면 2번으로 진행하시는 것도 좋습니다! 최종프로젝트는 꼭 1번으로 진행해야 하지만 아직 각자 하기에 벅차다면 2번 방식으로 진행하시는 걸 추천드리겠습니다.

기획

• erdcloud 등을 활용해서 db에 대한 명세서(erd)를 작성해주세요!
• 
• 피그마를 이용해서 와이어프레임을 작성해주세요!
• 

<aside> ⏰ 프로젝트 타임라인(09/29 ~ 10/06)

</aside>

1. 09/29 (목) 저녁 6시까지 : S.A(Starting Assignment) 제출
2. 09/29 (목) ~ 09/30 (금) : S.A 제출 순대로 팀 별 피드백
3. 10/06 (목) 오전 11시까지 : 프로젝트 마무리 및 GIT & 시연 영상 녹화본 제출(7분)
   • 제출 링크: 공지 예정
4. 10/06 (목) 오후 1~4시 : 1차 피드백 발표회
5. 10/06 (목) 오후 4~7시 : 팀 별 회고 (방법 및 회고록 제출 별도 공지)
   • KPT 회고 방법론을 적용해봅니다.

<aside> 📜 S.A(Starting Assignment) 작성 및 제출 방법

</aside>

• 제출 할 곳: 클릭!
• → 검토 후, 팀 별 피드백 예정
• 제출 할 것 (GIT README.md, Wiki , issues 업데이트)
  • 1. 프로젝트 제목/간단설명
    프로젝트 명칭, 그리고 서비스의 핵심적인 목적 또는 기능에 대해 설명해주세요.
  • 프로젝트 명은 언제든 변경해도 괜찮으니 부담 갖지 말고 가볍게 지어보세요!
    1. 와이어프레임 사진
  • <aside> 💡 https://www.figma.com/ 의 Share 기능을 활용하시면, 팀원들과 함께 인터넷 상에서 와이어프레임을 그려보실 수 있습니다.<aside> ✅ 이렇게, 손으로 그려보세요. 최대한 구체적으로 그리는 것이 핵심입니다.
  • </aside>
  • </aside>
    1. 개발해야 하는 기능 및 DB 구조 설계
  • <aside> ✅ 아래와 같이 API를 정리해는 방식이 가장 좋습니다.예) 책리뷰 API 설계하기
  • </aside>
• 주의할 것: 필수 포함 사항을 반드시 염두에 두기

<aside> 🏁 Goal: 최종 제출 (10/06 목요일 오전 11:00 까지)

</aside>

• 제출 할 곳: ****(링크 공유 예정 - 슬랙 공지방)
• 제출 할 것: git 링크 & 시연 영상 녹화본(7분)
• 참고자료
  • Git으로 협업하기 : https://preiner.medium.com/git으로-협업하기-450cd39c3479
  • Git 작성 예시 : https://github.com/devops3199/triport/blob/master/README.md

영상 녹화 가이드

[내일배움캠프] 발표 영상 촬영 가이드

<aside> 💪 Support: 프로젝트를 진행하는 데 도움이 될 만한 도움닫기들

</aside>

• 팀별 코칭, 발표회!
• 그 외에도 튜터님들이 수시로 돌아다니면서 도움을 드려요 🙂
• 거북이반 연장합니다!! ㅎㅎ 이번 거북이반은 “프로젝트" 관련 하여 기초 다지기를 목표로 합니다! (많.관.부)

<aside> ❗ 주의할 것

</aside>

• 어떤 기술을 쓸거냐 보다 플래닝이 더 중요
• 프로젝트는 마감을 지키는 연습
• 내가 어떤 기술을 기깔나게 해내는 건 중요하지 않습니다.
• 진짜 중요한 것은
  • “팀이 목표한 바를 이루어냈는가”
  • “그 목표를 이루기 위해 내가 어떻게 기여했는가”

자, 우리 본격적으로 도전하는 “팀” 프로젝트!

힘차게 시작해보시죠!

---

🧱DB설계

 

ER diagram

figma를 이용한 wirefram

https://www.figma.com/file/caybLf2frByALj9Tx0rRHy/FLORAL-by-team_FLO?node-id=0%3A1 

Figma

API/DB

https://www.notion.so/API-DB-b9a72c8097c44463a64502d2b21fce65

 

작업방식은 vscode의 live share extention을 통해서 실시간 협업을 하기로 했다.

 

오늟은 로그인 페이지 css까지 먹이고 깃허브에 푸시하고 끝냈다.