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 |
Team Rule
정기 회의
09:00 : 하루계획 공유
15:50 : 현황 공유
20:40 : 마무리 회의
소통
- Team slack 창을 통해 일정 및 정보 공유
- 잠수금지!! - 자리 비울 시 팀원 공유
- 진행 현황은 솔직하게
- 서로 맘 상하지 않게 말하기
- 모르는 것이 생기면 팀원 공유 후 같이 고민하기
Concept
음료 추천 사이트를 만들어 사용자가 각 음료에 대해 평가/리뷰하는 사이트
와이어프레임
포스트맨
아이디어들
신제품 출시 일정
유저 추천을 많이 받은 음료는 메인페이지에 띄워주기
개발 환경
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
// 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 명세
완료 여부 | 담당 | 기능 | 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>/ | 특정 댓글을 삭제하고, 해당 댓글이 삭제되었음을 알리는 메시지를 보냄 |
타임라인
스프린트
프로젝트 타임라인
이름 | 날짜 | 담당자 | 상태 |
---|---|---|---|
프로젝트 기획 및 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