본문 바로가기
프로젝트

[팀프로젝트] DRF project - 마셔보장 S.A

by 코드뭉치 2023. 5. 16.

Team - 가보장고

 

DRF Project : 마셔보장

 

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

Concept

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


Team Rule

정기 회의

09:00 : 하루계획 공유

15:50 : 현황 공유

20:40 : 마무리 회의

 

소통

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

 

레퍼런스
와이어프레임

 

 

로고
ERD
포스트맨

 

아이디어들

신제품 출시 일정

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

 

개발 환경
Python 3.11
Django 4.2
DRF 3.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회원 가입 후 프로필 수정 페이지로 리다이렉트팔로위, 팔로워
  • CRUD
  • // image - default, preference, introduction,

 

  • 윤준열 : (관리자) 피드 페이지 + 상품 등록 페이지 + 상품 상세 페이지- 상품 이미지, 간단한 설명, 카테고리, 브랜드 / 구매 가격, 구매처,__str__ : name, introduction, image, brand, created_at, updated_at, likes
  • Product :

 

ProductReview:

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

 

  • 김광운 : 커뮤니티 페이지 (유저) + 커뮤니티 게시글 상세 페이지 + 커뮤니티 게시글 작성 페이지- 작성자(Fk), 게시글 제목, 내용, 댓글(OneToMany), 추천(좋아요), 작성일, 수정일__str__ : title, user(FK), content, created_at, updated_at, like, image__str__ : content, user(FK), posting(FK), created_at, updated_atuser(FK), posting(FK), created_at
  •  
  • PostingLike :
  • PostingComment :
  • Posting :
  • 정엘리사 : 상품 등록 페이지

 

API 명세

API 명세

완료 여부 담당 기능 Method URL Request Response
 
서지인 회원가입 페이지 요청 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: 구매처 특정 상품의 리뷰를 등록 후 데이터를 보냄
 
윤준열 상품 리뷰 상세 페이지 요청 GET product/<int:product_id>/review/<int:review_id>   특정 상품의 특정 리뷰의 데이터를 보냄
 
윤준열 상품 리뷰 정보 수정 요청 PUT product/<int:product_id>/review/<int:review_id> score: 평점 • content: 리뷰 내용 • price: 가격 • store: 구매처 특정 상품의 특정 리뷰의 수정된 데이터를 보냄
 
윤준열 상품 리뷰 정보 삭제 요청 DELETE product/<int:product_id>/review/<int:review_id>   특정 상품의 특정 리뷰 데이터 삭제 후 삭제 완료 메시지를 보냄
 
윤준열 상품 리뷰 좋아요/취소 요청 POST product/<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>/   특정 댓글을 삭제하고, 해당 댓글이 삭제되었음을 알리는 메시지를 보냄
타임라인

스프린트 (1)

이름 날짜 담당자 상태 선행 작업 후속 작업
User       User testcode
Products       Product testcode, Product detail page, Index page
Posting testcode   완료 Posting  
Product testcode     Products  
Product detail page     Products  
Posting   완료   Posting testcode, Community main page, Community write page, Community detail page, Index page
Index page     Products, Posting  
Community api js   완료   Community main page, Community write page, Community detail page, Community update page
Community main page   완료 Posting, Community api js Community write page, Community detail page
Community write page   완료 Posting, Community main page, Community api js  
Community detail page   완료 Posting, Community main page, Community api js Community update page
Community update page   완료 Community detail page, Community api js  
User testcode     User Profile page, login/signup page
Profile page     User testcode footer
login/signup page     User testcode follow page
follow page     login/signup page My feed page
My feed page     follow page footer
footer     Profile page, My feed page  
Logo   완료    

프로젝트 타임라인 (1)

이름 날짜 담당자 상태
DRF Project S.A Team - 가보장고      
프로젝트 기획 및 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

 

댓글