서비스 소개
채식주의자와 같이 본인의 식단에 제한을 두는 사람들, 또는 알러지 등으로 특정 재료를 제외해야 하는 사람들이 레시피를 직접 분류 할 수 있게 해주는 플랫폼 서비스이다.
기술 스택
backend
- python, Flask framwork
- mongoDB
- AWS
frontend
- Html, css, bootstrap, bulma
- Jquery, javascript
- Jinja 2 templates
새로 배운 내용
backend
Jinja2 templates를 이용한 서버 사이드 렌더링의 장점과 클라이언트 사이드 렌더링과의 차이를 알 수 있었다.
서버 사이드 렌더링은 완성된 HTML 페이지를 서버에서 받아 브라우저에 보내는 형식으로 브라우저에서 그리는 클라이언트 사이드 렌더링과는 다르게 그리는 시간을 단축할 수 있고 사용자 입장에서 화면에 표시되는 시간이 빨라져 보입니다.
JWT 방식
JWT는 서버와 클라이언트 간 정보를 주고 받을 때, Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증하는 방법
장점: 사용자 인증에 필요한 모든 정보는 토큰 자체에 포함하기 때문에 별도의 인증 저장소가 필요없음. 사용자가 요청 했을 때, 토큰만 확인하면 되므로 세션 관리가 필요 없고 이에 따른 서버 자원과 비용 절감 효과
단점: 토큰은 클라이언트에 저장되어 데이터베이스에서 사용자 정보를 조작하더라도 토큰에 직접 적용할 수 없음
사용예시: 주로 '회원인증'에 사용하고, 사용자가 로그인하면 서버는 사용자의 정보를 기반으로한 토큰을 발급함
frontend
ajax 통신으로 server에서 받아온 데이터를 card view로 화면에 그려줄때 bootstrap의 card-columns를 사용하면 세로순으로 화면에 나오는데 가로로 바꾸는 방법을 찾아서 알 수 있었다.
style="display: grid; grid-template-columns: 1fr 1fr 1fr"버튼을 onclick()으로 구현할때 함수를 넣지않고,
onclick="window.location.href='/wishlistplus?title=${title}'"바로 api를 하이퍼링크처럼 삽입하여 동작시킬 수 있다는걸 알게 되었다.
피드백을 통해 조언받은 부분
- 찜하기 버튼이 눌리면 찜표시가 되게 변경되도록 해주면 더 좋을것 같다.
- 카테고리로 필터링을 할때 버튼이 눌리면 어떤 카테고리가 현재 필터링 중인지 버튼에 또는 카드에 표시가 되면 좋을 것 같다.
프로젝트 회고
좋았던 부분:
팀원들과의 호흡이 좋았다. 서비스 아이디어에 대해 모든 팀원이 완벽히 이해를 하고 시간이 충분하지 않다는 것도 인지하고 진행을하여서 빠르게 프로젝트를 완료할 수 있었다.
아쉬웠던 부분:
제한된 시간 속에서 진행된 프로젝트라 아이디어의 구현 가능성에 대해 충분히 확인을 하지 못했다. 크롤링한 데이터에 카테고리 분류 데이터가 없어서 분류가 가능한 다른 API를 찾아보거나 아이디어를 구현 가능하게 수정을 하였어야 했는데 시간이 충분하지 않아서 소수의 데이터를 직접 수동으로 분류하여 구현하였다. 다음부턴 아이디어 회의를 할때 충분히 구현가능 한지 데이터를 확인하고 진행하여야겠다는 생각이 들었다.
기능적으로 더 많은것들을 시도하지 못했다. 예를 들어, 웹개발 플러스 인강에 댓글 기능, 지도 API 등 여러가지 구현 방법에 대한 소스들이 제공되었는데 스코프를 좀 여유롭게 짜서 시간은 넉넉했지만 조금 더 도전적으로 했어도 괜찮았을것 같다는 생각이 들었다.
