프로젝트명 : 오늘도 돼지런!
- 행복했던 식사를 잊지 않도록 기록하는 '추억 저장 플랫폼'
- 너무나 부지런하게 챙겨먹는다는 의미인 "돼지런하다"에서 네이밍 채용
- 4일동안 함께 진행했던 좌충우돌 생존 스파르타 미니 프로젝트!
- 비전공자 4명이 부트캠프 첫 시작 후 만든 미니프로젝트
<깃헙주소>
https://github.com/goplanit/team35_project
<도메인주소>
http://manju.shop/
프로젝트 화면
<Home 페이지>
<회원가입 페이지>
<로그인 페이지>
<일기작성 페이지>
프로젝트 개요
개발기간
- 21.06.07(월) ~ 06.11(목)
- 4일간(기획 1일, 개발 3일)
전체일정 프로세스
- 1일차
: 프로젝트 기획(API설계, 와이어프레임작성, 워크플로우 작성 등), 기능 선정, 역할분담, 튜터피드백 - 2일차
: 개발 흐름 및 일정 결정, 로그인, 회원가입, 일기장 저장, 메인페이지 구현 - 3일차
: Git과 Github 사용, 좋아요 기능, 사진첨부 기능, 화면 CSS - 4일차
: Git 병합, AWS 연동, 삭제기능, 화면 CSS, 에러 해결, 도메인 연결, 서비스 테스트, 영상 제작
서비스 기능
1. 로그인 페이지
- 회원가입시 암호화되어 저장된 비밀번호와 로그인 시 받은 비밀번호를 해시함수를 통해 인코딩하여 비교
- DB에 ID와 비밀번호가 일치하는 유저가 있으면 JWT토큰을 받아오는 인증방식으로 구성
- 로그인은 24시간동안 유지되도록 설정
- 입력값이 없으면 경고 텍스트 활성
세션/쿠키 & JWT 차이점
<세션/쿠키 장&단점>
(장점)
1. 쿠키 자체는 유의미한 값을 가지고 있지 않아서 HTTP요청이 도중에 노출되더라도 안전하다
2. 사용자마다 고유한 ID값을 발급받게 되어 서버에서는 쿠키값을 받으면 바로 사용자를 파악한다.
(단점)
1. 해커가 사용자의 HTTP요청을 가로채면 그 안의 쿠키를 가로챌 수 있는데 그 쿠키를 이용하여 HTTP요청을 보내면
서버의 세션 저장소에서는 사용자를 오인하여 정보를 준다.
2. 서버에서 추가적인 저장공간을 필요하게 되고 부하가 높아진다.
<JWT 장&단점>
JWT는 Json Web Token의 약자로 인증에 필요한 정보들을 암호화시킨 토큰을 뜻한다.
(장점)
1. 별도 저장소가 필요없어서 서버를 확장하거나 유지 보수하는데 유리하다
2. 토큰 기반으로 하는 다른 인증 시스템에 접근이 가능하다
(단점)
1. 쿠키나 세션의 겨웅 악의적으로 이용된다면 해당하는 세션을 지워버리면 되는데 한번 발급된 JWT는 유효기간이 완료될때까지 사용이 가능해서 악의적인 사용자는 그 기간까지 정보를 가져갈 수 있다.
2. Payload는 따로 암호화되지 않기 때문에 디코딩하면 누구나 정보를 확인할 수 있다.
3. 세션/ 쿠키 방식에 비해 길이가 길어서 인증이 필요한 요청이 많아질 수록 서버의 자원낭비가 발생하게 된다.
2. 회원가입 페이지
- ajax의 POST 방식으로 사용자가 회원가입을 위해 입력한 정보를 DB에 저장
- DB에 저장된 아이디와 새롭게 입력된 아이디를 비교 및 중복확인 기능 추가
- 비밀번호와 아이디는 조건에 만족하는 경우만 최종적으로 회원가입 가능 및 정규표현식 사용
- 로그인 이후 사용자의 닉네임을 이용하기 위해 닉네임도 필수입력값으로 구성
3. 메인페이지
- 회원들이 일기를 작성할 경우 Home페이지에서 노출
- 모든 가입자의 포스팅이 공유되도록 하며, 각각의 포스팅마다 좋아요 기능 활성
- Jinja로 html 관리하여 공통적으로 적용되는 태그들의 반복 사용을 줄임
- 포스팅 삭제 기능 활성
4. 글쓰기 페이지
- 부트스트랩에서 제공하는 폼을 기반으로 제목, 장소, 사진파일, 상세정보를 담을 수 있는 페이지를 제작
- 글 작성 후 ajax를 활용, 파일 전송 유무에 따라 다른 url로 포스트하는 방식을 택함
- 플라스크로 API를 관리, 작성 폼에서 파일 존재하는 경우와 파일이 존재하지 않는 경우를 따로 설정
구현기능
- 로그인 기능
- 회원가입 기능
- 일기장 저장 / 삭제
- 사진 첨부 기능
- Feed 모아보기(메인화면)
- 좋아요 기능
사용도구
- HTML, CSS
- JavaScript - Ajax
- Python - pymongo, flask, jwt, datetime, bs4, requests
- AWS EC2
팀빌딩 및 역할
- 부트캠프 <항해99> 참가자로 구성
- 비전공자 4인의 첫 미니프로젝트 in Bootcamp
개발자 (가나다순)🙋🏻♂️ 🙋🏻♀️
고원구@goplanit / 팀장
- 메인 페이지 담당(Feed)
- 삭제기능 구현
- 개발블로그 & Readme 작성
- AWS 배포 담당
이현주@leehyeonj
- 로그인 페이지 담당
- 노션 회의록 정리
- 유튜브 영상제작
- 파비콘 & logo 이미지 제작
전승운@FrancisJeon
- 작성 페이지 담당
- 사진 첨부기능 구현
- GIT 사용 및 에러해결
- DB, Routing 관리
정민주@minjujung
- 회원가입 페이지 담당
- 전체화면 디자인 관리
- 도메인 연결 담당
- 서비스 테스트 관리
- 좋아요 기능 구현
오늘도 돼지런 API 설계하기
와이어프레임
<워크플로우 차트>
<전체 와이어프레임>
<Home 페이지>
<회원가입 페이지>
<로그인 페이지>
<일기 작성 페이지>
