15일 메이킹 챌린지 회고(playRe:st)

스파르타코딩클럽/메이킹 챌린지

15일 메이킹 챌린지 회고(playRe:st)

ebulsok 2022. 3. 10. 20:42

http://playrest.site/

playRe:st

플레이리스트를 공유해주세요!

playrest.site

(반응형이 아니기 때문에 pc로 접속하시는 걸 추천!)

~~현재는 서버 연결을 끊어놓은 상태입니다!~~

1월 30일까지 접속 가능합니다

4년간 프로그래밍 공부 '찍먹'만 하다가 내가 드디어 결과물을 만들어냈다!!!

1학년 때 전공도 아닌데 관심갖게 되어서 엄마 지인의 지인(ㅋㅋㅋ)이 하는 학원에서 스크래치, 아두이노, C언어 배우고
2학년 때는 C언어 독학 마저 하고 파이썬 인강도 들어보고.. 휴학하고 놀고
42Paris 1차는 붙었는데 프랑스어 공부한다 뭐한다 미루고 미루다가 결국 코로나 터지고 거의 포기 상태였고
컴과 수업을 듣고 싶은데 컴과 이중할 학점이 안 돼서 관련 융전 지원하고
그래서 컴퓨터 과목을 듣긴 들었는데 내가 딱히 바라는 것들이 아니었고
융전 강의들로 개발자 되기는 힘들겠다 그럼 내가 혼자 공부해야 되는데 어떡하지.. 내가 어떤 분야를 공부하고 싶은거지 라는 생각만 가득해서 그 이후로 계속 목표없이 전전긍긍하고 내가 그냥 너무 게을렀고 도전할 엄두를 내지 못했다.
결국 막학기 직전의 방학이 되어서야 일단 '웹개발'부터 해보자는 생각에 강의를 듣게 되었고, 무언가를 만들어보니 이제서야 제대로 된 공부를 하고 있다는 생각이 든다.

첫 게시글에서도 언급했지만 프로젝트의 시작은 그렇게 순탄하지는 않았다. 5일인가 6일만에 인원이 반토막이 나서 결국엔 나 혼자 백엔드 개발을 맡는 불상사가 일어나버렸다. 그렇지만 다행히 프론트 팀원 분이 도와주셨고, 첫 프로젝트인데다 내가 정말 하고 싶었던 주제였기 때문에 기간 내내 힘듦보다는 설렘을 가지고 할 수 있었던 것 같다.

1. 노래 검색

핵심이자 문제라고 생각해서 가장 먼저 구글링 했다.
참고) https://jae04099.tistory.com/entry/2-2-Flask-Ajax%EB%A1%9C-Open-API-%ED%86%B5%EC%8B%A0%ED%95%98%EA%B8%B0?category=885836

2-2. Flask, Ajax로 Open API 통신하기

1편링크 jae04099.tistory.com/78 2-1. 음악 검색용 API 찾아보기(Last.fm api) 이 프로젝트에서 가장 핵심적인, 중요한 기능이다. 여러 편으로 이루어질 예정. 1. 적절한 api 찾기 2. 찾은 api 원하는 정보만 파..

jae04099.tistory.com

ajax로 화면에 곡, 가수를 출력하는 거까지는 만들었는데 이 중 선택한 정보를 대체 어떻게 DB에 저장하지?(플레이리스트 저장 기능)라는 고민을 이틀동안 했다. 근데 3일째 되던 날에 (웹개발 종합반 때 무비스타 좋아요 눌렀던 것처럼) 추가 버튼을 클릭하면 실행되는 함수의 변수에 정보를 넣어주기만 하면 된다는 게 번쩍! 하고 생각이 나서 해결했다.
근데 지금 돌이켜보면 저걸 왜 며칠동안 고민했지 싶다.. 복습을 잘 했더라면.. ^^
그런데 결정적으로 Last.fm api로는 앨범아트를 불러올 수가 없었기 때문에 수민님이 스포티파이 api를 이용해서 새롭게 구현해주셨다. (정말 최고야)

2. 회원가입/로그인/로그아웃

참고) https://velog.io/@gojaegaebal/201208-%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%80

201208 개발일지(1일차)-Flask, MongoDB를 이용하여 게시판을 만들어보자

Jungle 0주차 프로젝트 시작- 1일차 요약 아래 내용처럼 간단한 웹페이지를 만드는 것이 0주차 프로젝트인데, 시간이 짧다.. 그래도 운좋게 웹에 대한 지식과 경험이 있으신 분들과 조가 되어 다행

velog.io

인터넷에 널려있을테니 쉽겠지? 생각했었다 ㅋㅋㅋㅋ
회원가입은 쉬웠지만 로그인이 생각보다 간단하지 않았다. 쿠키가 어쩌구...저쩌구...
초단기 프로젝트니까 복잡해보이는 건 제쳐두고 session 으로 구현했다.
튜터님이 쿠키 썼는지 세션 썼는지 물어보셨는데, 이 질문 하신 이유가 이제와서야 궁금하네..
플젝 후반에 flask_bcyrpt로 비밀번호 암호화 기능, 회원가입 시 중복체크 기능까지 추가했다.

3. 새 플레이리스트 생성

뭔가 변경사항이 잦았던,, 그치만 구현은 아주 간단하니까 괜찮다
노래 추가할 때 새 플리를 만들 수 있도록 하자! -> 마이페이지에서만 새 플리를 만들 수 있도록 하자! -> 노래 추가할 때만 새 플리를 만들 수 있는데, 플리 제목이랑 설명은 자동으로 들어가게 해놓고 마이페이지에서 수정할 수 있게 하자!

4. 플레이리스트에 노래 추가

노래를 mongoDB에 배열 형식으로 저장해놨는데, 강의에서 관련한 명령어는 배우지 않았기 때문에 'mongoDB 배열' 키워드로 구글링을 열심히 했다.
$push를 썼다.

5. 플레이리스트 검색

특정 노래가 들어간 플레이리스트를 검색하는 기능인데 안 쓰는 걸로 결론이 났다.
$elemMatch 가 관건!

6. 홈/마이페이지에서 플레이리스트 목록

ajax로 플레이리스트 제목, 만든 이, 첫 노래의 앨범아트 정보를 출력해준다.

7. 플레이리스트 삭제

간단하게 delete_one으로 구현하면 된다.
검색 조건을 플리 제목으로 하기엔 중복이 가능하기 때문에 플리 생성 시 플레이리스트 고유 번호를 부여하는 걸로 수정했다.
원래는 고유번호가 항상 1,2,3,4,5...를 유지하도록, 중간 번호가 삭제되면 그 뒤 플리 번호들을 땡겨서 수정하는 코드를 짜놨었다. 그 후에 좋아요 기능을 추가하기로 결정이 됐는데 그 때 귀찮은 일이 일어나서. . 가장 최근에 생성한 플리 번호 +1 을 부여하는 방법으로 수정했다.
아 그리고 좋아요 한 목록에서도 삭제해줘야 된다(이건 update_many, $elemMatch, $pull).
좋아요 기능이 사람을 귀찮게 함..

8. 좋아요 기능

프로젝트 중반까지는 부가기능으로 뒀다가 결국 구현하게 되었다. 간단하게만 생각했는데 제일 복잡했던 기능..
좋아요를 누르면 먼저 유저 DB에서 그 플리가 좋아요 목록에 있는지 확인하고
없다면 플레이리스트 DB에서 좋아요 수 늘리고, 유저 DB에서 좋아요 한 플레이리스트 번호도 추가해줘야 되고
있다면 좋아요 수 줄이고, DB에서 삭제해줘야되고.. 어쩌구저쩌구
마찬가지로 배열로 저장해뒀기 때문에 $push, $pull을 사용했다.

9. 플레이리스트 수정

제목과 설명을 수정하는 기능이다.

10. 유튜브 영상 링크

참고) https://developers.google.com/youtube/v3/docs/search/list?hl=ko

Search: list | YouTube Data API | Google Developers

Search: list API 요청에 지정된 쿼리 매개변수와 일치하는 검색결과의 모음을 반환합니다. 기본적으로 검색결과의 집합은 쿼리 매개변수와 일치하는 video, channel, playlist 리소스를 식별하지만, 특정

developers.google.com

이것도 부가 기능이었는데 시간이 남아서 했다. 유튜브 api로 구글링하면 정보가 많이 나온다.
정확히는 search api를 사용했고, 곡+가수 키워드로 검색해서 나오는 가장 첫번째 영상의 링크를 연결해두었다.

아마 여기까지 하고 완성이다! 싶어서 11. 사이트 배포를 했던 것 같다.
그런데 끝이 아니었다 ㅎㅎ
파면 팔 수록 나오는 버그들과 마주했다. 프로젝트 발표 1시간 전까지도, 사이트 배포 후에도 수정에 수정을 거듭했다. 이래서 각종 서비스 런칭이 미뤄지고 게임 업데이트가 미뤄지는구나 싶었다. 개발자들 화이팅 ㅠ
그냥.. 이것들을 발견한 거 자체가 멋져
오히려 좋아

12. 작은 따옴표

내 플레이리스트에 소녀시대 노래를 추가하려는데 이상하게 소녀시대 노래만 추가가 안됐다.

디코에 삐삐 쳤더니 현주님이 Girls' generation의 저저저 따옴표!!!!!가 문제인 것 같다고 하셨다.
구글링하면서 이것저것 시도해봤는데 잘 안됐다.
결국은 '를 ’로 replace 했다. 모든 따옴표가 저렇게 떠서 좀 우습긴 하지만 작동은 되니 이걸로 만족하기로 했다.