미니 프로젝트 - 여행 리뷰 프로젝트 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

seongbinko/dotrip

웹 사이트 url: dotrip.shop/

Dotrip

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)

 

로그인 페이지

회원가입 페이지

메인 페이지

포스팅 페이지

상세 페이지

수정 페이지