항해99: 1주차 미니프로젝트 회고

1. 프로젝트 제목

: 오늘, 이 디저트 어때?

---

2. 소개

:  "오늘하루 힘들게 보낸 여러분! 달콤한 디저트들 구경하시면서 스트레스 확 풀어보세요!"

고객님들이 올릴 사진의 이름과 설명을 적어 맛있는 디저트 사진을 업로드 하면 사진들이 메인페이지에 올라가고 올라간 디저트 사진에 좋아요와 싫어요로 표현을 할 수 있게 된다. 또 메인페이지에 있는 랜덤 디저트 사진 보기를 통하여 뭘 먹을 지 막막했던 고객님들께 랜덤으로 디저트 사진과 설명을 볼 수 있다. 실제로 보신 다음 결정하신 디저트를 사서 드셔도 좋고, 그림만 보셔도 모든 근심과 걱정들이 녹아내릴 만큼 행복한 시간이 될 것 같다.

과연 여러분이 오늘 가장 땡기시는 디저트는 무엇입니까! 골라보세요~~~!

---

3. 접속주소

13.209.88.221

http://sogreek.shop/

오늘 이 디저트 어때?

 

유튜브 영상 주소 : https://www.youtube.com/watch?v=-T-RK02JW9Q

 

깃헙 주소 : https://github.com/cooked-developer/hanghae_mini_dessert.git

GitHub - cooked-developer/hanghae_mini_dessert

---

4. 제작 기간 & 팀원 소개

: 2022년 1월 10일~ 2022년 1월 13일

 

항해99-5기-8조 팀 프로젝트

• 최규원 : 파일업로드, README작성, css
• 우혜민 : 로그인, 회원가입, 랜덤 디저트 추천, css 총괄, 배포
• 이가람 : 메인화면, 좋아요 숫자 실시간 반영, css
• 박현석 : 로그인, 회원가입, css, 유튜브촬영

---

5. 사용 기술 

Back-end

• Python 3
• Flask 2.0.1
• MongoDB 4.4

Front-end

• JQuery 3.5.1
• Bulma 0.9.2

deploy

• AWS EC2 (Ubuntu 18.04 LTS)

---

6. 실행화면

첫 화면인 로그인 화면

회원가입 화면

메인화면. 오른쪽 상단에 있는 업로드 버튼을 눌러 파일을 저장하면 메인화면에 차곡차곡 붙는다.

그 옆에잇는 랜덤추천 버튼을 누르면 랜덤으로 추천 디저트를 보여준다. 

내가 맡은 업로드 화면

파일명도 표시가 되게 하였다.

업로드 된 파일은 메인화면에 잘 붙게된다.

랜덤추천 화면

누를 때 마다 랜덤으로 디저트를 소개한다.

---

7. 최종 질문

 

1. 서버사이드 렌더링의 장점을 설명해주세요.

 

장점
(1) CSR을 사용했을 때보다 첫페이지 로딩이 빨라짐
(2) 모든 컨텐츠가 `html`에 들어있기 때문에 `SEO`에 더 나은 결과를 보여줌

 

2. JWT 인증 방식을 설명하고, 쿠키/세션 대비 장점을 알려주세요.

 

(1) JWT 인증 방식을 설명: 

JWT(JSON Web Token) 토큰 인증방식: JWT는 하나의 토큰 형식이고 JWT로 유저 인증을 처리하면 서버에 세션 DB를 가지고 있을 필요가 없고 서버는 유저 인증을 위해 많은 일을 하지 않아도 된다.

 

(2) 쿠키/세션 대비 장점:

DB를 따로 구축할 필요가 없다. 또한 토큰을 사용하여 다른 서비스에서도 권한을 공유하는 확장성이 있고 토큰을 사용한다면, 그 어떤 디바이스에서도, 그 어떤 도메인에서도, 토큰만 유효하다면 요청이 정상적으로 처리가 가능하다.

---

8. 개발시 필수 포함 사항

 

• Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링 (어떤 장점이 있을까?)
• ㄴ 웹개발 플러스 2주차 내용 훑어보기
• JWT 인증 방식으로 로그인 구현하기 (쿠키/세션 방식에 비해 어떤 장점이 있을까?)
• ㄴ 웹개발 플러스 4주차 내용 훑어보기

---

9. 느낀점들

: 먼저 좋은 팀원분들을 만나서 너무 감사했다. 팀원분들 간의 협동이 정말 잘되었고, 너무 친절들 하셨다. 흥분 할 상황 자체가 없을 만큼 서로 서로 양보와 배려로 일관하였고, 많은 것들을 배울 수 있었다.

처음에 서로 각자 한가지씩 기술을 나눠서 자신의 역할을 정하였는데, 항해99에서 이번에 새로 업로드해준 '스파르타 웹개발 플러스'의 내용은 확인 해보지 않은채 떡하니 파일업로드를 하는 기능을 맡겠다고 하였다. 나머지 팀원들은 로그인, 회원가입, 좋아요, 싫어요 기능들을 맡기로 했다. 그런데 '스파르타 웹개발 플러스'의 강의의 2주차와, 4주차를 보니 위에 9번에 있는 개발시 필수 포함 사항의 내용들인 로그인, 회원가입, 좋아요, 싫어요에 해당하는 것이였다. 다행히 내 파일업로드 기능 강의도 있긴했는데 그 강의는 1주차 강의로 필수 포함 사항인 jinja2 템플릿 엔질을 이용한 서버사이드 렌더링 방식이 아니였고, JWT 인중 방식과도 전혀 상관없었다. 하지만 후회하고 있을 시간이 없었다. 가장 중요한 것은 팀 프로젝트를 완성하는 것. 즉 협동하여 완성하는 것이 목적이었기 때문에 이 목적 하나만을 생각하였다. 완성하는데 집중하느라 따로 강의를 듣고있을 시간이 없어 2주차와, 4주차 내용을 강의로 공부하진 못했지만, 팀원인 우혜민님의 노션을 참조하여 2주차, 4주차에서 배우는 내용인 Flask 기본 사용법, 서버사이드 렌더링 개념, 쿠키,세션,토큰, JWT의 개념에 대하여 배울 수 있었다. 그 내용은 기타공부란에 더 찾아 보기위해 올려두었다. 꼭 다음에 2주차와 4주차 내용을 실습해보고 로그인, 회원가입, 좋아요, 싫어요 기능을 만들어봐야겠다!

팀으로 협동하여 완성하는 프로젝트라 나는 뭔지 알아도 서로간에 친절하게~ 아주 친절하게 설명을 해놔야 빠른시간안에 이 코드가 뭔지 알기 편하기 때문에 이렇게 주석을 잘 달아놔야 한다. 주석이 왜 중요한지 절실하게 알게되었다. 주석 다는 것을 항상 습관화하고, 누가 봐도 이해하기 쉽게 쓰기 위해 노력해야겠다. 

팀원들과 같이 만들면서 가장 기억에 남는 것은 깃과 깃허브 였다. 다들 깃과 깃허브를 사용해본 적이 별로 없어서 실험정신으로 많이 만들었다 지웠다 하면서 진행을 하였다. 

"으악 또 오염됬다!" 하면서 서로서로 요령이 생겼다. 

특히 중간 멘토링시 멘토님께서 파이참 밑에 있는 터미널에서 깃을 배워나가면 더 많은 것을 배울 수 있다는 말씀에 소스트리라는 편한 프로그램을 사용하지 않고 터미널만을 통해 해보려고 노력했다. 그리고 끝까지 고집으로 터미널 만을 이용하여 풀을 하고 푸쉬를 하여 잘 마무리를 할 수 있게 되었다.  

멘토님께서도 깃이 이번주 과제의 관건이라고 하셨던게 무슨 말씀인지 세삼 깨닫게 되었다.

깃이 관건이였다...ㅎㅎㅎ

 

끝으로 이렇게 기분 좋게, 웃으며 미니 팀 프로젝트를 끝낼 수 있게 도와주신 팀원분들께 너무 감사하다고 말하고 싶다.