미니프로젝트: Good4y
항해 첫 주차 좋은분들과 만나 간단한 미니프로젝트를 진행
같이 고생해주신 김영철, 김자운, 이해원 동기님들 너무 감사합니다!
소개
사전 학습으로 배운 내용으로 CRUD를 포함하는 간단한 스케줄러입니다.
과정
- 와이어프레임 설계
- API 설계
- flask 서버 환경 구성 및 템플릿 제작
- 각 페이지 기능구현
- 배포 전 테스트 시연
- AWS EC2 배포
상세
- 와이어프레임
와이어프레임 설계 과정은 첫 대면을 나눈 후 주제만 빠르게 정해서 머릿속에 그려지는 대로 서로 의견을 나누며 그림판으로 그려 작성하였다.
- API 설계
모두 처음 해보는 작업이라 초기에는 기본적인 CRUD를 생각하였고 추후 8가지의 API가 작성되었다.
| methods | POST | GET |
|---|---|---|
| /api/write | 글쓰기 | |
| /api/edit | 글수정 | |
| /api/register | 회원가입 | |
| /sign_up/check_dup | 이메일 중복확인 | |
| /api/login | 로그인 | |
| /api/remove | 글삭제 | |
| /api/sort | 글정렬 | |
| /api/filter | 글필터 |
@ /api/write [methods=POST]
- flask 서버 구성 및 템플릿 제작
프로젝트는 파이썬의 flask 프레임워크로 서버를 구성하였으며
템플릿 구조는 5개의 페이지로 구성하여 index.html을 뼈대로 사용하였다.
나머지 컨텐츠가 될 수 있는 페이지는 jinja2 extends 기능을 활용하여 index.html의 레이아웃은 상속받아 필요한 부분의 템플릿만 뿌려질 수 있도록 하였다.
습득한 내용들
- jinja2 Template Engine 포스팅 링크
- flask routing 시 url 주소를 변수로 활용하는법 포스팅 링크
- flask routing 시 url 주소를 변수로 활용하는법 포스팅 링크
- 회원가입 및 로그인 구현, 해싱함수와 JWT 포스팅 링크
- MongoDB 유니크값(_id)로 데이터 다루는 방법 포스팅 링크
- flask에서 배열 데이터를 다룰때 포스트 링크
느낀점
정말 간단하게 미니프로젝트를 진행했지만 그 안에서 일어나는 버그와 오류를 해결해 나가는게 많은 재미와 성취감을 느꼈다. 무엇보다 나와 같은 상황에 있는 동기분들이 함께 고민하고 서로의 코드를 보며 토론 할 수 있다는 점이 너무나도 큰 도움과 힘이 되었다.
기술적인 부분에서는
라우팅하기
- flask 라우팅을 하여 페이지의 접속 화면을 URL에 따라 나누어 주는 작업이 재미있었다. 단순히 html로 페이지를 만드는 것이 그치는게 아니라 내가 만든 템플릿이 어떠한 상황에 보여져야 하는지를 구성한다는 것이 흥미로웠다.
jinja2 / 서버사이드 렌더링과 클라이언트 사이드 렌더링
- jinja2 템플릿엔진은 마치 PHP로 include_once를 사용하여 내가 필요한 부분의 템플릿의 html 파일을 위치 시키는 것과 비슷한 작업이었고 jinja2를 통해서 필요한 정보를 서버에서 템플릿으로 옮겨와 쓸 수 있다는점이 굉장이 유용했다. 화면을 만드는 상황에 따라 데이터를 서버에서 바로 보내줄지, 클라이언트단에서 데이터를 요청해서 화면을 그려줄지를 고민하다 SSR, CSR의 개념과 그 차이를 고민해보고 로직을 구현하였다.
jinja2 -> extends
- jinja2 익스텐즈 기능은 뼈대로 사용할 layout 템플릿을 작성하고 반복되는 템플릿 영역을 최소화하여 코드를 절약 할 수 있었으며 코드를 보다 가독성있게 정리 할 수 있었다.
회원가입 / 해싱함수 / JWT / 쿠키와 세션
- 회원가입에서의 기능이 알아야할 개념도 많았고 배우는데 흥미가 있었다.
회원가입 로그인 시 해싱함수를 사용하여 회원의 비밀번호를 안전하게 암호화하여 데이터 관리를 할 수 있었는데 만약 비밀번호 찾기를 구현한다면
이메일 인증을하여 임시 비밀번호를 보내주는 방법이나 현재비밀번호를 재확인하여 새 비밀번호를 만들어주는 동작도 고민하여 추가해보면 좋을것 같다.
- 클라이언트측에서 값을 저장하게하는 쿠키방식과 서버단에서 값을 저장하는 세션방식의 개념과 차이를 알게 되었는데, JWT 방식과 쿠키방식을 사용해서 서버에 데이터 담당할 의무를 덜어내고 안전하게 인증방식을 구현 할 수 있었다. 이 과정에서 인가와 인증의 차이점을 공부하다 말았는데 조금더 깊이있게 알아보면 좋을것 같다.
정렬 / 필터 기능
- 구현할때 가장 많이 고민하고 코드를 작성했던 기능이다.
정렬과 필터링에 필요한 데이터를 서버에서 정제해서 클라이언트에 넘겨야 할지 아니면 모든 데이터를 받아서 클라이언트에서 필요한 데이터만 정제하여 렌더링 하여야할지 고민하였다.
결론적으로 필터된 데이터를 정렬하는 중복 정렬 기능이 필요해서 모든 데이터를 한번에 받아 정제 할때도 있었으며 필요한 데이터만 클라이언트에서 요청받아 재정렬하는 로직으로 구현하게되었다.
필터기능 사용 시 생각보다 딜레이가 있어서 화면이 멈춰져있는것 같은 현상을 보완하기 위해서 ajax로 데이터를 요청 받은 뒤 화면을 그리기 전에 loadingSpinner를 추가하여 비어있는 공백시간을 채워주었다.
마치며
정리해야할 개념들이 많지만 회고록을 작성해봤다는것에도 큰 의미가 있다..(변명아닌 변명) 사실 거의 To Do List에 가까운 앱이지만 새로운 언어로 서버단부터 화면단까지 직접 작성하고 만들었다는것에 공부가 많이 되었고 같이 작업한 팀원들과의 소통이 정말정말정말로 유익한 공부가 되었던거 같다.
감사합니다.
