yj-front
미니 프로젝트 - 여행 리뷰 프로젝트 Dotrip 본문
개요
- 프로젝트 명: Dotrip
- 개발 인원: 3명(고성빈, 김연재, 노유진)
- 개발기간: 2021.03.01 ~ 2021.03.04 (4일)
- 주요 기능: 회원가입, 로그인, 리뷰 CRUD
- 개발 언어: html, css(bootstrap4), javascript, python
- 개발 환경: flask web framework
- 데이터 베이스: mongodb
- 형상관리 툴: git
- 프로젝트 내용
여행에서의 추억을 기록으로 남겨보는 여행리뷰 페이지, 내가 다녀온 여행지를 공유하며 다른 사람이 다녀온 여행지를 구경할 수 있음
프로젝트 특징
- 쿠키/세션 방식으로 로그인을 구현 및 JWT 인증 방식으로 전환
- jinja2 템플릿 엔진을 이용한 서버사이드 렌더링
- restful api 방식 설계(POST, GET, PUT, DELETE)
맡은 업무
- 리뷰 작성 페이지, 리뷰 수정 페이지 구현
1. 리뷰 작성 페이지: 파일 확장자가 이미지가 아닌경우, 제목 및 내용이 빠져있는 경우 검증 후 메세지 알림을 표시하게 구현했으며 이미지 업로드 시 이미지를 미리 볼 수 있게 구현함
2. 리뷰 수정 페이지: 이미지를 변경할 경우와 변경하지 않을 경우 서버로 보내는 데이터를 다르게 하여 분기처리를 진행했으며 삭제기능의 경우 게시물 고유 id를 서버에 보내 삭제기능을 구현함 또한 수정 페이지는 작성자만 접근할 수 있게 token_id와 author일치 여부를 판단하여 일치하면 접근하게 했으며 일치하지 않으면 상세페이지로 돌아가게 구현함
후기
팀 프로젝트를 처음 진행해봐서 많이 미숙했지만 팀장인 성빈님이 잘 이끌어주신 덕분에 많이 배웠던 것 같다. 본 프로젝트를 통해 생성(post), 수정(put), 삭제(delete), 조회(get) 기능을 전부 다 사용해봤으며 페이지 별로 업무를 분담하여 클라이언트 뿐만 아니라 서버쪽 작업까지 같이해서 다양한 경험을 했던 것 같다. 클라이언트와 서버간 데이터 통신 및 db에 담기는 과정, db에 있는 데이터를 불러와 클라이언트에 뿌려지는 과정까지 전반적인 흐름을 익혔으며 jinja2를 활용하여 서버사이드렌더링이 어떤식으로 동작하는지도 알게된 프로젝트이다.
이미지 업로드 기능을 통해 db에 파일까지 저장되는 줄 알았는데 알고보니 텍스트만 저장되고 따로 폴더에 저장을 한다는 걸 알게 되었고 수정페이지 작업할때는 기존 이미지 파일을 클라이언트에 불러오게끔 할려고 시간을 엄청 소모했지만 보안상 문제때문에 (불러와지면 누구나 그 파일을 함부로 사용할 수 있다는 점?) 안된다는걸 알게되었다.(의미있는 시간소모라 생각!) 그래서 클라이언트 부분에서 분기처리로 이미지 변경여부에 따라 서버에 보내주는 값을 다르게 지정하고 서버에서도 같은 작업을 진행하였다. 결과적으로 기능구현이 잘 되었으며 시간 내에 잘 마무리를 한것 같아 뿌듯했다.
github url:github.com/seongbinko/dotrip
웹 사이트 url: dotrip.shop/
API 설계
기능 | method | url | request | response | 비고 |
회원가입 | post | api/sign-up | {'user_id':id, 'password':password, 'password_confirm:passwordConfirm } |
리뷰 리스트 | |
로그인 | post | api/login | {'user_id':id, 'password': password } |
리뷰 리스트 | |
리뷰 리스트 | get | api/reviews | 전체 리뷰 리스트 | ||
리뷰 조회 | get | api/reviews | {'review_id': _id } |
특정 리뷰 조회 | _id는 objectid |
리뷰 등록 | post | api/reviews | {'review_title':title, 'review_content':content, 'review_file':file, 'review_create_date': today, 'author':_id } |
등록한 리뷰 페이지 | token의 user_id가 author key: value로 들어감 |
리뷰 수정 | put | api/reviews | {'review_title':title, 'review_content':content, 'review_file':file, 'review_modified_date': today } |
수정한 리뷰 페이지 | |
리뷰 삭제 | delete | api/reviews | {'review_id': _id } |
리뷰 리스트 | _id 는 objectid |
DB 설계
user | 설명 | review | 설명 |
_id | objectid | _id | objectid |
user_id | 아이디 | title | 제목 |
password | 패스워드 | content | 리뷰 내용 |
file_name | 파일 이름 | ||
create_date | 리뷰 작성일 | ||
modified_date | 리뷰 수정일 | ||
author | 작성자(user의 id) |
'프로젝트' 카테고리의 다른 글
최종 프로젝트 - AFTERWORK | 퇴근하고 뭐하지? (0) | 2021.05.30 |
---|---|
미니 프로젝트 - 웹사이트 클론 코딩(다노 샵) (0) | 2021.05.27 |
미니프로젝트 - Palette (0) | 2021.04.25 |
미니 프로젝트 - 이미지 포스팅 커뮤니티 (0) | 2021.04.04 |
미니 프로젝트 - 일정관리 캘린더 (0) | 2021.03.25 |