코딩한걸음
Published 2023. 5. 16. 16:39
[내일배움캠프] DRF Project S.A NBCamp
728x90
반응형

Team - 가보장고

DRF Project : 마셔보장

MBTI블로그GitHubTMI요즘 듣는 노래 추천
윤준열INTPhttps://raoneli-coding.tistory.com/https://github.com/raoneli1013신발 모으는 중King Gnu - BOY
서지인ISTPhttps://never-stop.tistory.com/https://github.com/jeanallen928내 MBTI 맨날 헷갈림Ed Sheeran - Eyes Closed
김광운INTJhttps://codemte.tistory.com/https://github.com/saddeveloper99환절기마다 감기걸림bülow - Get Stüpid
정엘리사ISFPhttps://chillcoding.tistory.com/https://github.com/ellisajung여름 시작도 안했는데 벌써 탐The Weekend - Die for you

Team Rule

정기 회의

09:00 : 하루계획 공유

15:50 : 현황 공유

20:40 : 마무리 회의

소통

  1. Team slack 창을 통해 일정 및 정보 공유
  1. 잠수금지!! - 자리 비울 시 팀원 공유
  1. 진행 현황은 솔직하게
  1. 서로 맘 상하지 않게 말하기
  1. 모르는 것이 생기면 팀원 공유 후 같이 고민하기


Concept

음료 추천 사이트를 만들어 사용자가 각 음료에 대해 평가/리뷰하는 사이트

레퍼런스
와이어프레임
https://www.figma.com/file/nexYA4HvLUS3Oa1hHwgRbW/Untitled?type=design&node-id=2-7&t=IVATXaCFAkJnRjOp-0

ERD
포스트맨

아이디어들

신제품 출시 일정

유저 추천을 많이 받은 음료는 메인페이지에 띄워주기

개발 환경
Python3.11
Django4.2
DRF3.14

필수 구현 기능
  • DRF 사용
    • 프론트엔드 레포지토리와 백엔드 레포지토리를 분리해서 두가지 레포지토리를 사용해야 합니다.
  • 프론트엔드
    • 자바스크립트의 fetch를 이용해서 백엔드와 restful하게 통신해주세요
    • (선택)원한다면 fetch 대신에 axios나 jquery의 ajax를 쓰셔도 됩니다.
    • (선택)정말 도전을 원하다면 그냥 자바스크립트 대신 프레임워크인 vue.js나 react도 고려는 해볼 수 있지만 비추하겠습니다!
  • 회원기능
    • jwt token을 이용해주세요
    • 세션/쿠키 방식과 토큰의 차이를 명확히 이해해주세요 (면접 빈출 질문)
  • CRUD 기능
    • 아직 DRF와 자바스크립트의 게시글 / 댓글 / 좋아요와 같은 기능들도 좋습니다. 아직 새로운 자바스크립트와 DRF가 익숙하지 않다면 이 기능들에 집중하는 것을 추천드립니다.
    • 아래는 구현가능한 기능들로 참고만 해주세요. 다 구현하지 않고 선택하셔도 좋습니다!
      • 피드 페이지
        • 최신 게시글의 제목 or 썸네일 보기
        • 로그인 안해도 다 볼 수 있게
      • 게시글 작성 페이지
        • 로그인한 사용자만 들어올수 있게!
      • 상세 게시글 페이지
        • 게시글의 세부내용 보기
        • 글 작성자만! 수정/삭제 가능하다.
      • 마이 페이지
        • 내 게시물 보기 → 모든 유저
        • 프로필 수정 기능 → 나만
      • 댓글 기능
      • 좋아요, 북마크 기능
      • 팔로우, 팔로워 기능
      • 팔로우한 상대 게시물 확인 기능
      • 프로필에 사진 업로드 기능
      • 많아지는 게시글을 나눠보기 위한 페이지 기능(pagination)
      • 회원가입시 이메일 인증 기능 추가
      • 비밀 번호 찾기 기능
    • (선택)이 기능들이 조금 익숙하다면 쇼핑몰처럼 상품등록이 가능한 조금더 복잡한 CRUD도 괜찮습니다.
      • 등록시 더 까다로운 입력화면
      • 조회시에도 더 까다로운 필터링 화면이 필요합니다!
    • 주의 : 혹시 채팅기능을 추가하고 싶다? 채팅기능은 socket이라는 새로운 통신방식을 써야하는만큼 더 어려워집니다. 위에 기능들이 먼저 끝난뒤에 도전해보세요. 최종프로젝트때에 도전하는 것을 추천드립니다.

  • 배포
    • 프론트엔드 : AWS S3 혹은 netlify, vercel, github pages 와 같은 서비스로 배포할 것
    • 백엔드 : AWS EC2를 이용해서 배포할 것. 백엔드 개발자들에게 아주 중요한 주제입니다.
      • EC2의 역할을 이해
      • ubuntu 명령어들을 이해
      • 웹서버와 웹어플리케이션 서버의 차이를 이해
      • Nginx, gunicorn의 역할과 설정파일을 이해 (어렵습니다!!!)
    • 주의 : 프론트엔드와 백엔드가 각각 배포되어서 하나로 작동하는만큼 CORS, media file, static file, FILE_UPLOAD_MAX_MEMORY_SIZE 등 많은 에러가 있을 겁니다. 차근차근 해결해나아가야 합니다.


    깃허브 컨벤션
    • 포크 > 앱단위 브랜치생성(개발브랜치) > 버전별(기능별 브랜치) > 단계별로 커밋 > 완성되면 앱단위 머지> 풀리퀘 > 메인 머지
    • 커밋은 자주 (작업내용 간단히, 가능하면 영어로 ex> 모델 생성, 뷰 작성)
    • 풀리퀘 메세지는 자세히(작업내용, 가능하면 영어로)


  • 역할분배
    • 서지인 : 회원기능 + 마이페이지

      User : __str__ : email - unique, username - unique, gender, date_of_birth, password, created_at, updated_at

      // image - default, preference, introduction,

      회원 가입 후 프로필 수정 페이지로 리다이렉트

      CRUD

      팔로위, 팔로워

    • 윤준열 : (관리자) 피드 페이지 + 상품 등록 페이지 + 상품 상세 페이지

      - 상품 이미지, 간단한 설명, 카테고리, 브랜드 / 구매 가격, 구매처,

      Product :

      __str__ : name, introduction, image, brand, created_at, updated_at, likes

    ProductReview:

    __str__ : user(FK), product(FK), score, content, price, store

    • 김광운 : 커뮤니티 페이지 (유저) + 커뮤니티 게시글 상세 페이지 + 커뮤니티 게시글 작성 페이지

      - 작성자(Fk), 게시글 제목, 내용, 댓글(OneToMany), 추천(좋아요), 작성일, 수정일

      Posting :

      __str__ : title, user(FK), content, created_at, updated_at, like, image

      PostingComment :

      __str__ : content, user(FK), posting(FK), created_at, updated_at

      PostingLike :

      user(FK), posting(FK), created_at

    • 정엘리사 : 상품 등록 페이지

API 명세

완료 여부담당기능MethodURLRequestResponse
서지인회원가입 페이지 요청GET/user/signup/회원가입 페이지를 보여줌
서지인회원가입 정보 전송 및 회원가입 처리 요청POST/user/signup/email: 사용자 아이디 • name: 사용자 이름 • password1: 사용자 비밀번호 • password2: 사용자 비밀번호 확인 • gender: 사용자 성별 • date_of_birth: 사용자 생년월일회원가입이 완료되었음을 알리는 메시지를 보여줌
서지인로그인 페이지 요청GET/user/login/로그인 페이지를 보여줌
서지인로그인 정보 전송 및 로그인 처리 요청POST/user/login/email: 사용자 아이디 • password: 사용자 비밀번호refresh/access token 정보를 보냄
서지인로그아웃 요청GET/user/logout/로그아웃이 완료되었음을 알리는 메시지를 보여줌
서지인마이페이지 요청GET/user/mypage/<int:user_id>/특정 사용자가 작성한 게시글과 리뷰 데이터를 보냄
서지인좋아요 피드 페이지 요청GET/user/myfeed/like/사용자가 좋아요한 상품, 리뷰, 게시글 데이터를 보냄
서지인팔로우 피드 페이지 요청GET/user/myfeed/사용자가 팔로우한 사람이 작성한 게시글, 리뷰 데이터를 보냄
서지인프로필 페이지 요청GET/user/profile/<int:user_id>/사용자의 프로필 데이터를 보냄
서지인사용자 프로필 수정 정보 전송 및 처리 요청PUT/user/profile/email: 사용자 아이디 • password: 사용자 비밀번호 • name: 사용자 이름 • gender: 사용자 성별 • date_of_birth: 사용자 생년월일 • preference: 사용자 선호 • introduction: 사용자 소개 • profile_image: 사용자 프로필 이미지사용자의 수정된 프로필 데이터를 보냄
서지인회원 탈퇴 요청DELETE/user/profile/email: 사용자 아이디 • password: 사용자 비밀번호회원 탈퇴가 완료되었음을 알리는 메시지를 보여줌
서지인팔로우/언팔로우 요청POST/user/follow/<int:user_id>/user_id: 선택한 사용자 아이디특정 사용자를 팔로우/언팔로우 했다는 메시지를 보여줌
서지인팔로우 페이지 요청GET/user/follow/내가 팔로우하는 사람/나를 팔로우하는 사람 아이디를 보냄
윤준열피드 요청GET/좋아요 많은 상품 목록을 보여줌
윤준열상품 등록 페이지 요청GET/product/등록된 모든 상품의 데이터를 보냄
윤준열상품 정보 전송 및 등록 처리 요청POST/product/name: 상품 이름 • introduction: 상품 설명 • image: 상품 이미지 • brand: 상품 브랜드 • created_at: 상품 생성일 • updated_at: 상품 수정일등록된 상품의 데이터를 보냄
윤준열상품 상세 페이지 요청GET/product/<int:product_id>/특정 상품의 데이터를 보냄
윤준열상품 페이지 수정 요청PUT/product/<int:product_id>/name: 상품 이름 • introduction: 상품 설명 • image: 상품 이미지 • brand: 상품 브랜드특정 상품의 수정된 데이터를 보냄
윤준열상품 페이지 삭제 요청DELETE/product/<int:product_id>/특정 상품을 삭제 후 삭제 완료 메시지를 보냄
윤준열상품 좋아요/취소 요청POST/product/<int:product_id>/like특정 상품 좋아요/취소 메시지를 보냄
윤준열상품 리뷰 페이지 요청GET/product/<int:product_id>/review/특정 상품의 모든 리뷰 데이터를 보냄
윤준열상품 리뷰 정보 전송 및 등록 처리 요청POST/product/<int:product_id>/review/score: 평점 • content: 리뷰 내용 • price: 가격 • store: 구매처특정 상품의 리뷰를 등록 후 데이터를 보냄
윤준열상품 리뷰 상세 페이지 요청GETproduct/<int:product_id>/review/<int:review_id>특정 상품의 특정 리뷰의 데이터를 보냄
윤준열상품 리뷰 정보 수정 요청PUTproduct/<int:product_id>/review/<int:review_id>score: 평점 • content: 리뷰 내용 • price: 가격 • store: 구매처특정 상품의 특정 리뷰의 수정된 데이터를 보냄
윤준열상품 리뷰 정보 삭제 요청DELETEproduct/<int:product_id>/review/<int:review_id>특정 상품의 특정 리뷰 데이터 삭제 후 삭제 완료 메시지를 보냄
윤준열상품 리뷰 좋아요/취소 요청POSTproduct/<int:product_id>/review/<int:review_id>/like특정 상품 특정 리뷰 좋아요/취소 메시지를 보냄
김광운커뮤니티 게시글 전체보기GET/posting/게시글 전체 목록(최신순 정렬), (좋아요순 정렬), (최근 인기순 정렬) 데이터를 보냄
김광운게시글 작성 정보 전송 및 작성 처리 요청POST/posting/title: 게시글 제목 • content: 게시글 내용 • image: 게시글 이미지해당 게시글 등록 후 데이터를 보냄
김광운게시글 상세보기 페이지 요청GET/posting/<int:posting_id>/특정 게시글의 상세 데이터를 보냄,
김광운게시글 삭제 요청DELETE/posting/<int:posting_id>/특정 게시글을 삭제하고, 게시글이 삭제되었음을 알리는 메시지를 보냄
김광운게시글 수정 정보 전송 및 수정 처리 요청PUT/posting/<int:posting_id>/title: 게시글 제목 • content: 게시글 내용 • image: 게시글 이미지특정 게시글의 수정된 데이터를 보내고, 해당 게시글이 수정되었음을 알리는 메시지를 보여줌
김광운게시글 좋아요 요청POST/posting/<int:posting_id>/like/해당 게시글에 좋아요를 표시/취소했음을 알리는 메시지를 보냄
김광운댓글 작성 정보 전송 및 작성 처리 요청POST/posting/<int:posting_id>/comment/content: 게시글 내용특정 게시글에 대한 댓글을 생성하고, 해당 댓글의 데이터, 댓글이 작성되었음을 알리는 메시지를 보냄
김광운댓글 수정 요청PUT/posting/<int:posting_id>/comment/<int:comment_id>/content: 게시글 내용특정 댓글의 수정된 데이터, 해당 댓글이 수정되었음을 알리는 메시지를 보냄
김광운댓글 삭제 요청DELETE/posting/<int:posting_id>/comment/<int:comment_id>/특정 댓글을 삭제하고, 해당 댓글이 삭제되었음을 알리는 메시지를 보냄

타임라인

스프린트

이름날짜담당자상태선행 작업후속 작업
UserUser testcode
ProductsProduct testcode, Product detail page, Index page
Posting testcode완료Posting
Product testcodeProducts
Product detail pageProducts
Posting완료Posting testcode, Community main page, Community write page, Community detail page, Index page
Index pageProducts, Posting
Community api js완료Community main page, Community write page, Community detail page, Community update page
Community main page완료Posting, Community api jsCommunity write page, Community detail page
Community write page완료Posting, Community main page, Community api js
Community detail page완료Posting, Community main page, Community api jsCommunity update page
Community update page완료Community detail page, Community api js
User testcodeUserProfile page, login/signup page
Profile pageUser testcodefooter
login/signup pageUser testcodefollow page
follow pagelogin/signup pageMy feed page
My feed pagefollow pagefooter
footerProfile page, My feed page
Logo완료

프로젝트 타임라인

이름날짜담당자상태
프로젝트 기획 및 S.A 작성
ERD 구상
프로젝트 필수 API 설계 및 개발
모델별 test code 작성
와이어프레임 구상
프론트엔드 개발 및 고도화
발표 준비

Github

백엔드

프론트엔드

프로젝트가 끝난 후

마음에 드는 코드끝난 후 아쉬운 점
윤준열Product testcode가 마음에 든다. 내가 직접 짠 코드는 내가 가장 잘 알고있다고 생각했지만, 테스트를 해보며 내가 인지하지 못한 잘못된 부분을 확인 할 수 있었고, 더 빈틈없는 코드가 됐다고 생각한다.프로젝트를 완전히 완성하지 못한 점. 프론트엔드 JS에서 더 체계적으로 코드를 짜지 못한 점. 배포하지 못한 점이 아쉽다.
김광운Pagination과 summernote 글 작성하기가 마음에 들었다. summernote의 경우 이미지를 base64기반으로 인코딩해서 처리해주는데, 용량은 늘어나지만 따로 이미지 처리를 해줄 필요가 없어서 좋았다.좋아요순, 최신순 등 정렬 기능을 만들었지만 사용하지 못한 점, summernote에 이미지 여러개를 넣을 때 처리를 하지 못한 점 등이 아쉽다.
서지인UserFeedSerializer와 UserMypageSerializer 언더바_set과 related_name으로 간단하게 포스팅, 리뷰들을 다 불러올 수 있어서 마음에 든다.이미지 폼데이터로 보내기를 다 못한 것 어드민페이지, 포스트맨, 테스트코드에선 이미지도 수정 가능했는데 마지막에 안돼서 더 아쉽다.
정엘리사프론트와 백엔드를 분리하여 작업하면서 fetch 함수를 사용하여 입력받은 데이터를 서버로 보내는 과정이 흥미로웠다. 메인피드 페이지에서 api 연결을 완성하지 못한 것, 상품등록 페이지에서 업로드한 이미지의 삭제 기능을 구현하지 못한 것 등이 아쉽다.


Uploaded by N2T

728x90
반응형
profile

코딩한걸음

@Joonyeol_Yoon

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!