Ep10 : Flask 인스타그램 클론코딩 (1)

TGoddessana commented 2 years ago

우리는 지금까지 "블로그 웹 애플리케이션 제작" 시리즈를 통해서 플라스크 서버 자체에서 HTML을 응답해 주는 서버 사이드 렌더링 방식과, 단순히 데이터만을 다루는 HTTP API를 구축해 보았습니다.
무미건조한 json을 보고 있자면 어쩌면 "어떻게 이게 웹 페이지가 되는 거지?" 가 궁굼할 수도 있습니다. 저 또한 글자 덩어리를 보고 있자면 쥐가 나는데, 비슷한 분들을 위해서 인스타그램을 Server Side Rendering 방식이 아닌, Client Side Rendering 방식을 이용하여 기본적인 기능들을 따라 만들어볼 것입니다.
이번 프로젝트를 완료하면, 여러분들은 CSR과 SSR의 차이를, 그리고 프론트엔드와 백엔드의 역할 구분이 어떻게 이루어지는지를 잘 이해할 수 있을 것이라 생각합니다.
더불어, 유저 인증을 위해 JWT 를 이용한 로그인도 구현해 볼 생각입니다.
이번 파트는 코드 작업보다는 프로젝트 구조 세팅에 그 초점이 맞추어져 있습니다. 단순히 app.py 를 이용한 구성이 아닌, 플라스크 공식 문서에서 추천하는 방식인 애플리케이션 팩토리 방식을 이용하고, requirements.txt 로 어떻게 파이썬에서 패키지 관리를 하는가에 대해서도 다뤄 볼 것입니다.

참고 자료: https://www.youtube.com/watch?v=yTzAjidyyqs
참고 자료 2: https://www.youtube.com/watch?v=iZ9csAfU5Os
1. CORS란 무엇인가?
2. CSR이란 무엇인가?
3. SSR이란 무엇인가?

https://gdsanadev.com/15135 주의사항 : 플라스크 설치 시, 버전이 2.2.x 버전임을 꼭 확인해 주세요!

레포지토리 이름은 아무렇게나 해도 관련 없습니다.
venv 파일, pychache 파일 등, 필요없는 부분들은 빼고 업로드해 주세요.
함수나 클래스를 작성할 때에, 주석을 꼼꼼히 작성해 두면 플러스 요인이 됩니다.
주석 작성 시, docstring 방식으로 작성한다면 프로그램 상으로 해당 주석을 참고할 수 있습니다.
클래스 작성 시 이름을 Pascal Case 로 짓는 것을 강력 추천드립니다! (ex : SomeFlaskViewClassName)
- 파스칼 케이스란? -> https://www.theserverside.com/definition/Pascal-case
함수나 변수 작성 시 이름을 Snake Case 로 짓는 것을 강력 추천드립니다! (ex : some_flask_function_name)
- 스네이크 케이스란? -> https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%84%A4%EC%9D%B4%ED%81%AC_%ED%91%9C%EA%B8%B0%EB%B2%95
- 기타 PEP8 스타일을 지켜 코드를 작성한다면 더욱 가독성 좋은 코드가 될 것입니다. (ex: 클래스는 두 줄 띄고 작성, 함수는 한 줄 띄고 작성, 맨 마지막에 공백의 한 줄 넣기 등)