목차
01. 프로젝트 시작
02. 프로젝트 기획
03. 맡은 역할
04. 기술 스택
05. DB 구조 및 API 설계
06. 페이지별 소개
07. 구현 포인트
08. 마치며
🏁 01. 프로젝트 시작
항해 99에 들어가기전, 토이프로젝트를 진행하게 되었습니다.
프로젝트를 통해 웹 제작의 전반적인 이해를 얻는 것을 목표로 정하였고,
프로젝트 기획에 들어가기 전, 몇 가지 개발 방향을 정했습니다.
- 프로젝트 주제를 최대한 재밌는 것으로 가져가기
- 백 프론트 상관없이 역할을 나누기
- 깃허브를 활용해 협업해보기
- 배포는 각자가 진행해보기
🏁 02. 프로젝트 기획
내 트리를 꾸며줘에서 영감을 받아 일상에서 좀 더 활용할 수 있는 '생일 축하 롤링페이퍼'를 만들어 보자! 에서 시작하였습니다. 생일의 주인공이 될 수도 있고, 누군가의 생일을 축하해 주고 싶은 이들이 롤링페이퍼 페이지를 생성하여 그에 알맞는 링크를 공유해, 사람들로 하여금 축하를 받는 웹 사이트를 제작하고자 하였습니다.
기획 기간: 2022.10.13 ~ 2022.10.15
개발 기간: 2022.10.17 ~ 2022.10.31 (약 2주)
📌 03. 맡은 역할
- 백 : 로그인 유지
- 프론트 레이아웃 : 회원가입, 로그인 페이지, 마이페이지
- 프론트 기능 : 케이크 선택 페이지, 로그인 페이지
🖥️ 04. 기술 스택
항해 99 종합강의에서 기술들을 사용하여 제작하였습니다.
- 프론트 : HTML, CSS, JS, Jquery
- 백 : 파이썬, Flask, Mongodb , AWS
⚙️ 05. DB 구조 및 API 설계
📓 06. 페이지별 소개
1) 회원가입 및 로그인 페이지
아이디 중복 확인, 비밀번호 6자리 이상 확인, jwt 발급
| 회원가입 페이지 | 로그인 페이지 |
|---|---|
 |  |
2) 메인 페이지
롤링페이퍼를 만든 로그인한 유저와 로그인 하지 않은 사람들이 메시지를 남길 수 있도록 메인 페이지를 2개로 나누어 구현.
2-1) 메인 페이지 - (유저.ver)
공유하기 버튼을 통해 게스트 접근 메인 페이지 링크 복사, 마음에 안드는 메시지 삭제 기능
| 메인 페이지 화면 | 메시지 보기 창 | 메뉴바 창 |
|---|---|---|
 |  |  |
2-2) 메인 페이지 - (게스트. ver)
축하하기를 통해 메시지 작성 페이지로 이동, 나도 만들기를 통해 회원가입 페이지로 이동, 비회원이 자기가 쓴 메시지를 수정&삭제 가능하도록 구현
| 메인 페이지 화면 | 메시지 보기 창 | 메시지 수정 및 삭제시 비밀번호 확인 창 |
|---|---|---|
 |  |  |
| 메시지 수정 창 | 메시지 삭제 창 |
|---|---|
 |  |
3) 마이 페이지 및 롤링페이퍼 생성(케이크 선택) 페이지
| 마이 페이지 | 롤링페이퍼 생성(케이크 선택) 페이지 |
|---|---|
 |  |
4) 메시지 작성 페이지
슬라이드 이동 구현, 비회원이 수정 및 삭제를 할 수 있도록 메시지별 비밀번호 입력 구현
| 캔들 고르기 | 메시지 작성 |
|---|---|
 |  |
🌈 07. 구현 포인트
1) 로그인 유지 구현하기(JWT)
이 프로젝트에서 가장 힘들었지만, 가장 값진 역할이었습니다. 이전 프로젝트에서 처음 알게된 로그인 시스템과 JWT를 직접 구현해보며 많은 공부를 할 수 있었습니다.
- flask jwt extend 라이브러리를 사용하여 jwt를 만들었고, 쿠키에 jwt를 저장하는 방식으로 구현하였습니다.
- 쿠키에 jwt를 저장하면 따로 프론트에서 보내줄 필요가 없습니다. 그러나 flask jwt extend 라이브러리는 jwt를 쿠키에 저장할 때 jwt의 만료 정보를 담은 토큰도 함께 보내주기 때문에, get 혹은 post 할때 프론트에서 header에 jwt 토큰을 실는 형태로 구현했습니다.
- python : 토큰 발행, 쿠키에 저장
@login.route("/token", methods=["POST"])
def create_token():
try:
if not request.is_json:
return jsonify({"msg": "Missing JSON in request"}), 400
user_id = request.json.get("user_id", None)
password = request.json.get("password", None)
print(password)
if not user_id:
return jsonify({"msg": "아이디를 입력해주세요"}), 400
if not password:
return jsonify({"msg": "비밀번호를 입력해주세요"}), 400
user = db.user.find_one({'user_id': user_id})
userId = user['user_id']
passWord = user['password']
ispasswordcorrect = bcrypt.checkpw(password.encode('utf-8'), passWord.encode('utf-8'))
if user_id != userId or ispasswordcorrect != True:
return jsonify({'msg': '아이디에 일치하는 비밀번호가 없습니다'}), 401
response = jsonify({"msg": "로그인 완료"})
access_token = create_access_token(identity=user_id)
set_access_cookies(response, access_token)
return response, 200
except TypeError:
response =jsonify({"msg": '아이디가 없습니다'})
return response, 500
- javascript : 헤더로 쿠키에 토큰 만료 기간이 담긴 토큰 전송
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();}
let url
$.ajax({
type: 'GET',
beforeSend: function (request) {
request.setRequestHeader('X-CSRF-TOKEN', getCookie('csrf_access_token'));
console.log(getCookie('csrf_access_token'));
},
url: '/rolling/check',
data: {},
success: function (response, testStatus, xhr) {
if (xhr.status == 200) {
location.href = '/rolling?key=' + url;
} else {
location.href = '/login';
}
},
});
2) 선택된 데이터 값 보내주기
케이크를 만드는 페이지에서, 케이크, 닉네임, 생년월일을 보내주는 기능을 구현했습니다.
- input창의 데이터를 받아 선언 및 할당 해준 후,
- ajax를 이용해 header에는 쿠키 값을 넣어 권한이 있는 유저인지 확인 후,
- input 데이터를 post합니다.
- 그리고, ajax를 통해 url 값을 받아와 cake값이 저장된 url 페이지로 넘어갑니다.
- 간단한 기능 같지만, cake의 값을 주고, 그 값으로 만들어진 새로운 url 받아 넘겨주는 기능에서 많은 고민을 하였습니다.
$(function() {
$('.cakeSelBtn').click(function () {
var current_cake = cakes.filter((cake) => cake.cake_id === n_count)
var current_cake_name = current_cake[0]['cake_name']
var nickname = $('#nick').val()
var birthday = $('#b_day').val()
console.log(current_cake_name, nickname, birthday)
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();}
let url
$.ajax({
type: 'POST',
url: '/cake/makecake',
beforeSend: function (request) {
request.setRequestHeader( 'X-CSRF-TOKEN', getCookie('csrf_access_token'));
console.log(getCookie('csrf_access_token'));
},
data: {birth: birthday, user_nickname: nickname, cake_id: current_cake_name},
success: function (response) {
console.log(response);
url = response['url']
{#location.href =`/rolling/${url}`;#}
},
error: function (response) {
alert(response['responseJSON']['msg'])
console.log('there is an error!')
location.href =`/login`;
}
}).then((arg) =>{
$.ajax({
type: "GET",
beforeSend: function (request) {
request.setRequestHeader('X-CSRF-TOKEN', getCookie('csrf_access_token'));
console.log(getCookie('csrf_access_token'));
},
url: "/rolling/check",
data: {},
success: function (response, testStatus, xhr) {
if (xhr.status == 200) {
location.href = "/rolling?key=" + url
} else {
location.href = '/login'
}
}
});
})💌 08. 마치며
참 재밌게 한 프로젝트였습니다. 하고 싶은 기능들을 만들어보며 즐겁게 임했고, 추후 관심있는 서비스를 제작하는 회사에서 개발자로 일한다면 얼마나 좋을지 생각하며 즐거웠습니다.
기획부터 배포까지, 프론트 백 상관없이 모두 구현해 보며, 전반적인 웹의 구현 사이클을 이해할 수 있었고, 특히 백의 로그인 유지를 담당하며 로그인 기능에 대한 이해가 높아져 참 뜻깊고 유용한 시간이었습니다.
