독학만으로는 한계가 있다는 생각이 들어서 부트캠프를 알아보고 있었다.
그러다가, 이노베이션캠프를 알게 되었고 선발 인원이 제한적이어서 붙을 수 있을까하는 불안한 마음을 가지고 지원했다.
선발 결과를 기다리다가, 다행히 합격 문자를 받고, 99일 동안 진행하는 이노베이션캠프에 합류하게 되었다.
첫 번째 과제: 풀스택 미니 프로젝트(8.1~8.4)
첫번째 과제로 풀스택 미니 프로젝트(WEB)가 주어졌다.
어떤 주제로 할 지에 대한 아이디어 회의를 진행했다.
좀 특별한 주제로 하려고 찾아보다가, 외출시 쓰레기를 버려야 하는 상황이 생겼을 때 쓰레기통에 버릴 수 있도록 서울시의 가로휴지통 정보를 공유하는 플랫폼을 만들기로 결정했다.
4명이서 4일 안에 하나의 프로젝트를 완성해야하다 보니, 프로젝트에 몰입해서 할 수 밖에 없었던 것 같다.
아직 프론트와 백엔드 개발자로 성장한 상태가 아니기에, 프론트와 백으로 구분하지 않고, 각자 기능별로 나누어서 개발을 진행했다.
프로젝트: 여기버려
What I Do
- jinja2 템플릿을 활용한 템플릿 구성(base.html, myjs.js, mystyle.css),
- 쓰레기통 클릭하면 보이는 상세 페이지의 리뷰 관련 기능 제작
- 리뷰 작성 및 조회 기능 구현
(로그인 유저만 리뷰 작성 가능, 리뷰 조회는 누구나 가능하도록 구현) - 리뷰 DB 생성
- meta data 생성(ex. og:title)
What I Learned
-
base.html 활용
1페이지로 동작하는 프로젝트가 아니다보니, 화면마다 공통으로 사용하는 부분은 한 곳에 모여있는 게 관리하는 것도 편하고, 추후 지금보다 더 페이지가 많아지는 경우에도 응용할 수 있다고 생각했다. 프로젝트 필수 조건 2가지 중 하나가 jinja2 템플릿을 사용하는 것이기도 해서,이를 활용해서 base.html 을 구현했고, 좀 더 효율적으로 프로젝트를 진행할 수 있었다. -
예외 처리의 중요성
리뷰 기능에 별점과 코멘트를 입력받도록 구현했는데, 최종 검수 과정에서 별점의 예외처리가 누락되어서, ⭐이 아니라, 초기값인 "별점"으로 저장되는 문제를 발견했다. 발견 즉시 수정했고, 이후 멘토링 과정에서 다른 조가 같은 문제로 지적받았다는 것을 들었을 때, 다행이라는 생각이 들기도 했지만, 다시 한 번 예외처리를 제대로 해야한다는 것을 느꼈다. -
리뷰 목록 보여주는 부분에서 원하는 대로 리뷰가 제대로 출력이 안되는 오류.
마이페이지를 로그인했을 때만 보이도록 만들다 보니, 로그인하지 않은 상태에서 마이페이지에 접근하려고 하면, jwt 인증 오류로 정상 출력이 되지 않았다. 로그인, 비로그인 에 대해 구분된 상태에서, jwt를 인증하는 코드가 또 들어가서 생긴 오류였다. 불필요한 부분을 제거하여 비로그인 유저인 경우에도 다른 사람의 리뷰를 정상적으로 조회할 수 있게 해결했다.
프로젝트 관련 주요 개념 정리
1주차 과제에서 필수로 사용해야 했던 JWT와 개발 과정에서 사용했던 API에 대해 정리해보려고 한다.
JWT
JWT는 Json Web Token의 줄임말로 인증에 필요한 정보들을 암호화시킨 토큰이다.
JWT 토큰을 HTTP 헤더에 실어 서버로 보내게 된다.
JWT 토큰 동작 방식은 다음과 같다.
- 사용자가 로그인을 한다.
- 서버에서는 계정 정보를 읽어 사용자를 확인 후, 사용자의 고유한 ID값을 부여한 후, 기타 정보와 함께 Payload에 넣는다.
- JWT 토큰의 유효기간을 설정한다.
- 암호화할 SECRET KEY를 이용해, JWT를 발급한다.
- 사용자는 JWT를 받아 저장한 후, 인증이 필요한 요청마다 토큰을 헤더에 실어 보낸다.
- 서버에서는 해당 토큰의 Verify Signature를 SECRET KEY로 복호화한 후, 조작 여부, 유효기간을 확인한다.
- 검증이 완려된다면, Payload를 디코딩하여 사용자의 ID에 맞는 데이터를 가져온다.
리뷰 추가 코드
def add_review():
token_receive = request.cookies.get('mytoken')
try:
payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
user_info = db.users.find_one({"username": payload["id"]})
trashcan_receive = request.form["trashcan_give"]
star_receive = request.form["star_give"]
review_receive = request.form["review_give"]
date_receive = request.form["date_give"]
doc = {
"username": user_info["username"],
"nickname": user_info["nickname"],
"profile_pic_real": user_info["profile_pic_real"],
"trashcan": trashcan_receive,
"star": star_receive,
"review": review_receive,
"date": date_receive
}
db.reviews.insert_one(doc)
return jsonify({'result': 'success', 'msg': '리뷰 등록 성공'})
except (jwt.ExpiredSignatureError, jwt.exceptions.DecodeError):
return jsonify({'result': 'fail', 'msg': '로그인 후 이용 가능 합니다!'})
API
API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 프로그램들이 서로 소통하기 위한 사용 규칙을 제공하는 것이다.
예를 들어, 키보드에 a를 누르면 화면에 a가 출력되는 것처럼,
어떠한 키를 누르냐에 따라 그 키에 정해진 동작을 수행하는 키보드를 제공해주는 것이라고도 볼 수 있다.
API는 데이터, 서버를 갖고 있는 사람들, 즉 API를 제공하는 사람이 원하는대로 디자인을 할 수 있다. 따라서, API의 사용에 제약이 있는 경우도 존재한다.
Open API는 API에 대한 주소와 사용 규칙을 공개한 것을 의미한다. 공개된 백엔드를 이용하고, 보여주는 부분만 만들어 쓰는 것을 서버리스라고 부르기도 한다. 서버리스라고 해서 서버가 없는 것이 아니라, 이미 만들어진 서버를 이용하는 것이다.
API마다 API 가이드가 존재한다.
API 가이드에는
서버로 보내는 요청(request) 부분과 그 요청에 따라 서버에서 보내주는 응답(response)에 대한 정보가 나와있다.
API를 만든 사람이 설계한 가이드에 맞게 코드를 작성하여, 해당 API를 이용하면, 좀 더 개발 시간을 단축시킬 수 있다는 장점이 있다.
1주차를 마치면서...
2주차에는 프로그래밍 기초 및 알고리즘 과정이 프로젝트가 끝난 금요일부터 진행중이다.
매번 서류가 통과되도 코딩테스트라는 벽을 넘어본 적이 없어서 많이 부담되는 상황이지만, 이번 기회에 극복해보려고 한다...
JWT 관련 참고 자료: https://tansfil.tistory.com/58?category=255594
API 관련 참고 자료:
