😎 Weekly I Learned

• 웹개발 미니 프로젝트 완료
• 알고리즘 1, 2, 3, 4주차 강의 수강

📁 웹개발 미니 프로젝트

- 제목

MOVIE TALK(무비톡)

- 설명

영화와 수다로 만나는 세상, MOVIE TALK(무비톡)

재미있는 영화, 좋아하는 영화를 추천하고 싶으신가요?
다른 사람들과 영화를 함께 나누는 공간으로 초대합니다.

회원가입, 로그인을 진행하신 후 영화 제목을 입력하시면,
간편하게 영화 정보와 유튜브 영상 링크가 등록됩니다.

내가 공유한 영화, 다른 사람들이 추천한 영화에는
댓글을 남겨 감상평과 생각을 자유롭게 나눠 보세요!

- 구현 기능

• 회원가입
• 아이디 중복 확인
• 로그인
• 로그아웃
• 영화 검색 (네이버 영화 검색 API 사용)
• 영화 추가
• 영화 목록 조회
• 영화 상세 조회
• 댓글 작성

- 기술 스택

• HTML/CSS, JQuery, Ajax
• Python, Flask, MongoDB
• AWS EC2

- 데모영상 유튜브 링크

https://youtu.be/8Gbv7yYv2qM

- Github 주소

https://github.com/skylermbang/week1_team20

- 웹사이트 링크

http://leedmeen.shop

📝 개념 정리

SSR(Server-Side Rendering)의 장점

1. 검색 엔진 최적화(SEO)
2. 빠른 페이지 렌더링
   : 서버 사이드 렌더링은 빈 HTML 페이지를 받아 브라우저에서 그리는 클라이언트 사이드 렌더링과 다르게 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있고, 초기 로딩 속도를 많이 줄여줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있게 된다.

JWT 인증 방식

JWT(Json Web Token)는 토큰 기반 인증 방식으로, 세션 상태를 저장하는 게 아니라 필요한 정보를 토큰에 담아 클라이언트가 가지고 있고 그것을 증명서처럼 사용한다. 클라이언트는 Access Token(JWT Token)을 헤더에 실어 서버로 보내게 된다. JWT 인증 방식을 사용하면 사용자 인증에 필요한 정보를 토큰 자체에 담고 있어 별도 저장소에 정보를 저장해둘 필요가 없다. 그래서 인증 서버와 DB에 의존하지 않아도 된다.

🔒 기록

• 프로젝트 완성 후 배포를 하고 나서 확인을 하는데 공통 base template을 적용했던 회원가입/로그인 페이지와 검색 페이지의 화면이 기능은 정상 작동하는데 CSS가 제대로 반영이 안되서 화면이 깨져 보였다. 시간이 얼마 없다 보니 결국에는 base template을 적용하지 않고 공통된 부분도 각 페이지에 각각 적용하는 방식으로 바꿨다. 다행히도 그렇게 해서 문제는 해결되었고 제출도 완료하였다. 로컬에서는 정상적으로 작동했는데 뭐가 문제였을까..?라는 생각이 계속 들었는데 다음날 팀원분이 Stack Overflow 링크를 보여주시면서 이렇게 했으면 됐을 수도 있었을 것 같다고 말씀하셨다. 실제로 이게 문제였는지 적용은 안해봤지만 나중을 위해 기록해 놓는다.
  https://stackoverflow.com/questions/13772884/css-problems-with-flask-web-app

• git으로 협업을 하면서 conflict가 많이 발생했다. git에 대해 좀 더 공부를 해야겠다.

• 평소에는 프로젝트를 할 때 구현하는 기능에 따라 파일을 나눠서 작업을 했었는데, 이번에는 app.py 파일 하나에서 팀원들이 다 같이 작업하려다 보니 conflict가 많이 발생했다. Flask에서는 파일을 나눌 수 있는 그런 기능이 존재하지 않는지 찾아봤는데 Blueprint라는 것을 사용하면 이 부분을 해결할 수 있는 것 같다.

• requirements.txt 파일을 만들어서 패키지를 한 번에 관리했으면 더 좋았을 것 같다.

• 매번 RDBMS를 사용하다보니 SQL만 사용했었는데 이번 프로젝트에서는 DB를 MongoDB로 사용하다보니 NoSQL을 사용하게 되었다. NoSQL에서는 SQL의 Join 같은 기능이 필요하면 어떻게 하는지 찾아보았는데 $lookup (aggregation)을 사용하면 컬렉션을 Join 할 수 있다. 이외에도 정렬, 페이징 처리를 할 수 있는 여러가지 기능들이 다 있다.

📢 한마디

좋은 팀원들을 만나 밤 늦게까지 재미있게 프로젝트를 진행할 수 있었던 것 같다. 더 다양한 기능을 적용하지 못한 것이 조금 아쉽기는 하지만, 팀원들과 함께 하나의 프로젝트를 완성할 수 있어서 좋았다. 추후에 있을 프로젝트에서는 스스로에게 만족할 수 있는 결과물을 만들어내고 싶다.