웹 미니 프로젝트 설계 (항해일지 1일차)

김형준·2022년 5월 9일
0

TIL&WIL

목록 보기
1/45
post-thumbnail

Git Hub repo: https://github.com/Kim-HJ1986/hanghaeMusic99/commit/6877e95faea7a360a871762950f488224df4956c

드디어 항해가 시작되었다.

챕터1 개요

챕터1은 웹개발 미니 프로젝트로 시작되었다.
(사전 강의에서 학습했던 python언어로 flask, mongoDB, aws EC2배포 까지의 내용들을 복습 및 응용 학습하는 과정이라고 생각되었다.)

모든 프로젝트는 필수적으로 Jinja2와 JWT Token을 사용해야 했다 (미션!)

나는 d반 8조의 팀장 역할을 맡았고, 팀원 분들과 상의하여 음악 플랫폼에서 실시간 Top100 노래를 끌어와 리뷰를 남기는 웹을 기획했다.

✔클릭! 프로젝트 SA

와이어 프레임을 작성하며 로직을 구상하던 차에, 실시간 업데이트를 반영하기 위해선 스케쥴링이 필요함을 알게 되었다.
그러나 복습이 우선이었기에, 현재 날짜의 Top 100을 가져와 웹을 구현하고, 안정화 후 스케쥴링 (배치잡)을 업데이트 하기로 결정했다.

팀원 분들 모두의 동의하에 우리 팀은 모든 팀원이 AtoZ로 개발해보기로 했다. (팀원 분들 모두 열정적이었다!)

오랜만에 파이참을 키기도 했지만, 페이지간 동적으로 데이터를 넘겨주는 방법에 대해 몰랐기에 맨땅에 헤딩하며 구글링 결과로 코드를 작성하기 시작했다.
그 결과 현재 멜론의 실시간 Top 100위 음원들을 크롤링 해오는 데 성공했고, 이를 카드 형식으로 뿌려주며 하나의 카드 클릭 시 해당 음원의 상세 정보를 보여주는 것 까지 성공했다.

중간 이슈(트러블)

(중간 issue들..
처음 DB에 크롤링해온 음원들을 저장할 때 id값이 필요할 것 같아 임의로 만들어줬으나, 상세페이지를 개발하던 중 이미지 깨짐 및 앨범, 발매일 등의 상세 정보가 필요하여 멜론에서 지정한 음원 id를 그대로 저장했다.
이로 인해 고화질 앨범 이미지 및 기타 상세정보, 멜론 링크 등을 기록할 수 있게되었다.

자바스크립트에서 함수에 파라미터를 넣음으로써 코드가 훨씬 간결해진 경우도 있었다. 즉, 너무 어렵게 생각해서 불필요하게 ajax를 두번 쓰게 되었는데 이러한 중복과정을 없앨 수 있었다.
)

코멘트

오늘은 정신없이 코드만 작성했는데, 내일은 차분히 강의도 듣고 flask의 REST API 작성 방식에 대해 공부할 생각이다.
조금 더 깊이있게 탐구하자!!!!!!!!!

profile
BackEnd Developer

0개의 댓글