Sound Cloud Project

Not Sound Cloud 프로젝트

음악 스트리밍 서비스 사운드 클라우드 어플리케이션 클론 팀프로젝트

개발 인원 및 기간

• 개발기간 : 2020/3/9 ~ 2020/3/20

• 개발 인원 : 프론트엔드 1명, 백엔드 2명

• 백엔드 github

• 프론트엔드 (web) github

• 프론트엔드(app) github

• 데모 영상(이미지 클릭)
  

적용 기술 및 구현 기능

적용 기술

• Front-End : React-Native, React’s Context API, Styled-Components, React Navigation
• Back-End : Python, Django 3.0, AWS RDS with MySQL, Cross-Origin Resource Sharing (CORS) headers, OAuth 2.0, Bcrypt, JWT,
  BeautifulSoup 4.0, Pandas, LiBrosa, Scipy

구현 기능

• React's Context API를 사용하여 로그인, 로그아웃 상태 관리
• Rest API 통신으로 회원가입, 로그인 구현
• React-Navigation을 통해 스크린 이동 구현
• Back-End API 통신으로 받은 음원 데이터로 음원 파장 시각화 구현

화면 flow

프로젝트 회고록

1. 프로젝트를 시작하는 마음 가짐

2차 프로젝트의 팀을 발표 하는 날, 멘토님이 갑자기 리액트 네이티브를 하고 싶은지 물어보셨던 것이 기억이 난다. 리액트로 인스타그램 클론을 했을 때, 리액트 네이티브를 공부할 것인지 아니면 개인 포트폴리오를 만들 것인지 물어보셨고 나는 앱을 꼭 만들어 보고 싶었기 때문에 리액트 네이티브를 약 일주일정도 했었다. 하지만 설치하는 것에도 오래 걸리고 해서 로그인까지만 구현을 했었고 본격적인 진도 ( 메인 화면 )까지는 나가지 못했다. 다른 동기들은 메인 화면을 하면서 네이티브를 하는 것에 대한 고통을 토로 했는데 나는 어려운 부분까지 들어가지 않아서 그랬는지 어려운 것보다는 내가 코딩을 해서 그걸 내 핸드폰으로 바로 볼 수 있는 것에 대한 즐거움과 기쁨이 더 컸었다.
하지만 프로젝트로 리액트 네이티브를 하는 것에는 역시 부담이 컸다. 워낙 빠르게 업데이트 되고, 영어 자료가 대부분이라서 리액트 보다는 스스로 해나가야 하는 부분이 많았다. 그래도, 내가 처음 리액트 네이티브를 통해서 느낀 즐거움이 더 컸기 때문에 이왕 프로젝트 하는 김에 도전해보자 하는 마음을 가지고 하게 되었다.

2. 사운드 클라우드

프로젝트를 하면서 꼭 하고 싶었던 쪽이 옷(패션)과 음악이었다. 다행히도 1차 프로젝트는 스타일쉐어를 클론했고 2차 프로젝트는 음악 스트리밍 사이트인 사운드 클라우드를 하게 되었다. 내가 평소에 이용하기도 하는 어플이기도 하고, 디자인이 너무 취향 저격이라서 내가 사운드 클라우드 팀이라고 했을 때 너무 신이 났다. 우리 팀은 백엔드 두분, 웹 프론트엔드 두분, 앱 프론트엔드 나 한명이었다.

3. 프로젝트의 목표

2차 프로젝트의 목표는 리액트 네이티브와 친해지는 것이었다. 리액트를 기반으로 하는 것은 같지만 어쨌든 css도 조금은 다르고 (flex라든지 ) 특히 이번 프로젝트는 styled-components를 써보기로 했기 때문에 새롭게 익혀야 하는 것들도 많았다.

프로젝트 진행 과정

- 초반
초반 세팅을 하는 것에 시간을 많이 썼다. 초기 세팅을 하는데 eslint와 prettier가 너무 안먹히는 것이었다. 리액트에서는 되는 방법이라는데 네이티브에서는 안되고, 검색해서 찾아봤더니 엉뚱한 것에 적용이 되어서 빨간줄이 마구 뜨고. 거기에다가 hooks, styled-component를 해야해서 또 그걸 공부하고. 한 3일 정도 까지 초기 세팅과 리액트 네이티브를 익히는데 시간을 쓴 것 같다.

- Login, SignUp
나는 클론을 하면 어떤 것이 원래 것인지 모를 만큼 정말 똑같이 만드는 것을 항상 목표로 두기 때문에 그걸 맞추는 것에 신경을 많이 썼다. 웹은 폰트는 어떤 크기인지, 마진은 몇인지 개발자 도구를 보면 알 수 있지만 리액트 네이티브는 정말 말그대로 눈대중으로 하나씩 비교하면서 다 맞춰봐야했다. 조금은 반복적인 작업이긴 했지만 나에게는 중요한 부분이었기 때문에 괜찮았다.

- 진도가 안나가다.
리액트에서 화면을 이동하려면 react-navigation을 써야 하는데 그걸 이해하고 적용하는게 정말 정말 오래 걸렸다. 처음에는 로그인과 사인업을 끝내고 메인화면으로 넘어갈 때 그걸 다 연결되게 하려고 엄청 시도를 했는데 잘 안되었다.
그래서 그걸 하는데 시간을 꽤 많이 보냈고, 그래서 우선은 다른 뷰들을 먼저 만들고, 나중에 이걸 연결시키는 것으로 작업 방향을 틀었다. 그래서 음파를 그리는 것은 너무 어렵고 시간이 오래 걸릴 것 같아 엄두도 못내고 있었는데 시간이 확보가 되어 음파를 그려내는 것도 할 수 있었다. 음악 플레이까지 해보고 싶었는데 남은 여유 시간이 별로 남지 않아서 시도하다가 결국에는 포기했다. (하지만 이 어플의 핵심 기능이므로 나중에 꼭 보강할 예정이다)

- 막판에 스퍼트!
프로젝트는 진행하면서 계속해서 리액트 네이티브에 관한 영상을 찾아보다가 내가 원하는 스크린 이동을 구현해놓은 것을 찾았다. https://youtu.be/nQVCkqvU1uE
이걸 보고 어떤 식으로 navigation 구조를 짜야 하는지, useContext를 어떤 식으로 써야 하는지에 대해서 이해할 수 있었다. 유레카!! 그래서 프로젝트가 끝나기 하루 전에는 지금까지 만든 화면들을 붙이고 props 전달해서 뿌리는 걸로 하루를 다 보냈다. 위코드에서 거의 새벽 6시까지 붙이고 다음날 차를 타고 갔던게 아직도 기억이 생생하다.이 유투버한테 고마워서 댓글까지 남기고 구독까지 하고 주변 네이티브 하는 사람들한테 전파했던게 기억이 난다. 내가 연결 하는데로 짝짝 잘 맞아서 정말 신이나서 붙였다.

잘한 점

1. 혼자 하는 힘을 기른 것

프로젝트를 하면서 어려운 포인트
첫번째, 한국어로 된 자료가 없다. (개발자는 영어로된 자료를 어려워하면 안되긴 하지만, 정말 리액트 네이티브는 공식문서부터 그 모든 것들이 대부분 영어였다. 만약 한국어로 된 포스팅이나 유투브를 찾는다고 해도 그걸 쓸 수 있는지는 미지수다. 왜냐하면!!
두번째, 리액트 네이티브는 업데이트가 빈번히 일어난다.
자료를 볼 때 항상 체크 했었던 것이 이 자료가 쓰여지거나 업데이트 된 날짜였다. 1년만 지나도 거기에 나와있는 것이 지원하지 않는 상태가 되어 있는 것이 많았다. 심지어는 내가 이 프로젝트를 하는 중간에도 리액트 네비게이션의 공식 문서가 업데이트 되거나 지원하지 않는 상황이 발생했다. 그래서 정말 이건 내가 빨리 프로젝트를 끝내고 포스팅을 하던지 해야겠다 하는 생각이 많이 들었다.
하지만 이런 어려움 속에서 프로젝트를 진행하다 보니까 내가 뭔가를 해냈을 때의 기쁨과 성취도가 정말 컸다. 혼자할수있어bility가 뿜뿜 하는 프로젝트였다.

2. 문제 해결 능력을 키운 것
선공부 후적용이 아니라, 지금 당장 내가 필요한 기능들을 구현하기 위해서 정말 많은 자료를 찾고 공부를 했던 것 같다. 이 당시에 리액트 네이티브에 관련된 유투브 영상들은 거의다 본것 같다. 특히 리액트 네비게이션은 이해하고 적용하는 것에 정말 너무 오래 걸리기도 했는데 어쨌든 포기하지 않고 계속해서 최대한 찾아봤고 결국에는 내가 원하는 로직을 설명해주는 것을 찾아서 그걸로 해결해서 정말 다행이었다. 그런 답답한 과정 속에서 포기하지 않을 수 있었던 것은, 이것은 어쨌든 답이 있는 문제라는 것 때문이었다. 지금 당장은 내가 이걸 풀어내는 답을 알고 있지는 않지만 어쨌든 그 어딘가에 이걸 풀 수 있는 답이 있고, 나는 그걸 공부해나가면 되기 때문이다.

3. 리액트 hooks, React-Context API를 적용해본 것
이 프로젝트를 하면서 처음으로 hooks를 써보았다. 사실 프로젝트 초반만 해도 hooks까지 쓰면 머리가 터질 것 같은데? 하는 느낌에 주저했었다. 하지만 class 형으로 쓰다보니 불린 형태로 연결되는 로직이 너무 많아서 정말 코드가 지저분하고 줄이 너무 많아졌다. 그래서 중반 이후에는 hooks로 바꾸었다.
또, 로그인/ 로그아웃의 상태 관리하기 위해서 React-Context API를 적용해보면서 왜 이게 필요한지, 왜 편한지를 깨닫게 되었다.
이런 기술이 있고, 그래서 적용해보자! 의 과정이었다기 보다는 내가 이 기술을 쓰지 않고 뭔가를 구현하려고 했는데, 이런 문제들에 부딪혀서 어려움을 겪다가, 그 대안으로 그 기술을 써보게 되는 과정이었어서 더 좋았던 것 같다.

아쉬운 점 & 앞으로 보완할 점

1. 프로젝트 진행의 방향과 속도
중반까지만 하더라도 하나씩 하나씩 만들고 연결해가면서 만들자는 생각이었는데 그래서 너무 속도가 안났던 것 같다. 만약 애초부터 뷰를 빨리 빨리 만들어 놓고 그 후에 연결하는 식으로 했으면 음악 플레이도 하고, 다른 뷰까지도 할 수 있었지 않을까 하는 생각이 든다.

2. 음악 플레이 기능
expo로 음악을 제어할 수 있는 방법이 있다고 해서 공부를 했는데 정말 너무 어려웠다. 예시를 찾아보기도 정말 힘들었고, expo로 되어 있는 예시를 보았느데 코드가 거의 8000줄이었다. 내것으로 만들어서 적용을 하기에는 시간이 너무 촉박했다.