[메이킹챌린지 11기] RE:TRO 1~7일차 개발일지

zzzzsb·2022년 3월 20일
0

Sparta

목록 보기
13/15

📝 15일간의 개발일지


22.03.02(수) 메이킹챌린지 OT

OT 진행

  • 심화4팀 배정
  • 팀장 선정 및 오픈채팅방 개설
  • 활동서약서 작성 및 제출
  • 미니튜터 시간 예약

팀 회의

  • 회의시간: 월-토 10시-12시, 일요일은 자유참여
  • 주제 관련회의 진행, 대주제를 실용적+디자인 예쁘게 나올수 있는것으로 생각해보자!
  • 타겟은 20-30대로.
  • 코로나 관련 웹사이트 주제 이야기해보았는데 반응 괜찮았음, 관련해서 기능 추가하고 싶은것 + 또는 새로운 주제 아이디어로 다음날 회의해볼 것!

22.03.03(목) 1일차

1. 주제 선정

  • 코로나, 올바른 성 의료정보, 레트로 쥬크박스 중 레트로 쥬크박스가 최다득표 선정되었다.

2. 팀명/프로젝트명 선정

  • 팀명: 코딩王조
  • 프로젝트명: re:tro | 그때 그 시절, 당신의 음악

3. 역할 분담

  • 프론트: 김소정, 성다연, 임세민, 지수빈
  • 백엔드: 김광윤, 김동우, 김소정

4. git 팀 organization 생성+팀원 초대

11th-CodingKingdom

5. 기능/페이지 분리

[레트로 쥬크박스 기능]

  1. 멜론 시대별 차트에서 노래리스트 가져오기 (1980~2010년도 까지)
  2. 유튜브 연동으로 듣기기능
  3. 회원가입 / 로그인 기능
  4. 좋아요 기능 → 관심있는 노래 담아두기 (나만의 플레이리스트)
  5. 노래 검색 기능
  6. 음악성향 검사 테스트 : 나에게 맞는 노래 찾기 기능 (설문 테스트) → 회원 정보에 나의 성향 저장
  7. 플레이리스트 탭 → 유튜브 레트로 플레이리스트 → 플레이리스트 셔플 리스트업

[시간 남으면 추가할 기능]

  1. 다크 모드
  2. 다른 음원사이트 바로가기 아이콘
  3. 인기차트

[레퍼런스 및 컬러]

레퍼런스 웹페이지 - 플로
FLO | 지금 당신의 음악, 플로

[컬러칩]

[필요한 웹페이지]

  1. 메인 페이지 - 차트
  2. 로그인
  3. 회원가입
  4. 노래 검색 결과
  5. 마이페이지 → 좋아요 누른 마이플레이리스트
  6. 페이지 소개
  7. 성향 테스트 페이지
  8. 추천 플레이리스트 탭 - 셔플 나열

6. 업무 중 이슈/고민

팀원분들이 git 사용이 익숙치 않으셔서 내가 organization을 만들었다. 얼떨결에 내가 conflict 해결하는 역할을 맡은 것 같다.. 하하 괜찮겠지. 할수 있다 아자아자!

  • 팀 organization 권한 public 수정할 것

기술스택에 대한 고민도 필요할듯 싶다. 아마 이대로면 강의에서 제공했던 기술스택 그대로 갈것 같긴하다.

이번기회에 HTML+CSS+JS까지 프로젝트 무사히 끝낼수 있기를!

7. To-do List


22.03.04(금) 2일차

레이아웃/로고 디자인

소정님께서 디자인해오신 걸로 최종픽스! 진짜 너무 예쁘다 ㅠ.ㅠ

역할분담 세분화

프론트엔드: 지수빈, 성다연, 임세민, 김소정(보조)
백엔드: 김광윤, 김동우, 김소정(보조)
디자인: 김소정

구현 기능

  1. 시대별 차트에서 노래리스트 가져오기 (1980~2010년도 까지)
  2. 유튜브 연동으로 듣기기능
  3. 회원가입 / 로그인 기능
  4. 좋아요 기능 → 관심있는 노래 담아두기 (나만의 플레이리스트)
  5. 노래 검색 기능
  6. 음악성향 검사 테스트 : 나에게 맞는 노래 찾기 기능 (설문 테스트) → 회원 정보에 나의 성향 저장
  7. 플레이리스트 탭 → 유튜브 레트로 플레이리스트 → 플레이리스트 셔플 리스트업

구현할 페이지

페이지 양이 많아서 1주차, 2주차에 구현할 페이지를 분리했다.

1주차
1. 메인 페이지 - 차트 (1, 있는 2) - 같이
2. 로그인 (3) / 회원가입 (3)
3. 마이페이지 → 좋아요 누른 마이플레이리스트 (4)
4. 노래 검색 결과 (4, 5)

2주차
1. 추천 플레이리스트 탭 - 셔플 나열 (7)
2. 성향 테스트 페이지 (6)
3. 페이지 소개

소정님께서 메인페이지 디자인을 거의 해오셔서 이번주 안으로 나머지 페이지 디자인을 마무리하시기로 하셨다. 그동안 프론트엔드에서는 메인페이지 구현을 하고, 백엔드 분들은 필요한 데이터들 크롤링하시는 식으로 진행할것 같다.

+ 팀 로고 / RE:TRO 로고 디자인



디자인 너무 예쁜거 아니냐며,,, ㅠ.ㅠ


22.03.05(토) ~ 22.03.06(일) 3~4일차

개발 진행상황


소정님이 보내주신 디자인 토대로 소통해가면서 페이지 레이아웃을 잡아보고 있다. 아예 쌩 html+css로 백지에 그림그리듯 구현해보는건 이번이 처음인데, 열심히 공부해가며 구현중..💪

깃 레파지토리도 새로 생성해서 팀원분들께 깃 사용법 알려드리고, 본격적인 개발을 시작했다.


디자이너님와의 소통 흔적 ... ⭐️


22.03.07(월) 5일차

기능관련 회의 내용

  1. 시대별 차트에서 노래리스트 가져오기 (1980~2010년도 까지)
  2. 유튜브 연동으로 듣기기능
  3. 회원가입 / 로그인 기능
  4. 좋아요 기능 → 관심있는 노래 담아두기 (나만의 플레이리스트)
  5. 노래 검색 기능
  6. 음악성향 검사 테스트
  • 2가지 선택 질문 총 4가지 = 16가지 분류
  • 회원정보에 반영
  1. 플레이리스트 탭 → 유튜브 레트로 플레이리스트 → 플레이리스트 셔플 리스트업
  • 개발자추천 플레이리스트를 어떻게 할것인지

위기의 시작...

주말 내내 아팠는데 참고 새벽까지 작업하느라 월요일 낮에 병원을 다녀왔다.
결과는,,, 코로나 양성 (어쩐지 너무.. 아프더라😭)
주말엔 참고 작업했지만 이날은 정말 어지럽고 앉아있기도 너무 힘들어서 팀원분들께 양해를 구하고, 내가 작업하고 있던 메인페이지 하단 부분 작업을 부탁드렸다. 이렇게 아프려고 금토일 내내 달렸나보다....⭐️ 그래도 다행인건 내가 제일먼저 프론트엔드 작업을 시작해서 미리 해둔 작업량이 꽤 있다는 점. 민폐끼치지 않아 천만다행이다.. 얼른 나아야지.

이날은 주로 팀원분들 깃 관련 이슈를 해결해드리고 마무리했다.


22.03.08(화) ~ 22.03.09(수) 6~7일차

개발 진행상황

  • 프론트에서 구현한 메인페이지에 백엔드분들이 크롤링한 차트 정보를 연결하는 것까지 구현되었다. 프론트엔드에서는 각자 역할을 나눠 현재 로그인/회원가입 페이지도 만드는 중.

  • 이틀전과 다르게 말도 안되게 예뻐진 메인 페이지 근황.

  • 메인페이지 하단 재생바 부분도 다연님이 작업해주셔서 대략 완성되었다.

회의 내용

0순위

  • 음악 재생 (화면 하단에 플레이어) -목요일까지 목표

1순위

  • 로그인 / 회원가입 (완료)
  • 좋아요 플레이리스트
  • 메인페이지에서 다른페이지로 이동
  • 검색 기능

2순위

  • 음악성향 검사 테스트
  • 추천 플레이리스트, editor’s pick

개발 우선순위를 대략적으로 정하고, 미니튜터님께 질문하는 시간을 가졌다. 핵심기능들은 목요일까지 먼저 구현하고! 프로젝트 발표 5일전까지는 적어도 모든 기능구현을 완료하는것을 목표로 했다.

  • 프론트-백엔드 논의하여 api 문서화
  • html파일명은 메인페이지-index.html, 나머지는 팀 규율대로
  • pymongo 저장용량 확인하기
  • 도메인 필요함.

기획관련 내용들을 최종 마지막으로 팀원들과 정리하고, 디테일한 레이아웃 디자인과 성향페이지 기획도 마무리.


1~7일차 후기


디테일한 기획 / 페이지 디자인 완료.
메인페이지 DB연결 시작, 거의 완료되었음.

profile
성장하는 developer

0개의 댓글