1. 프로젝트 소개

---

Mariple(나만의 작은 음악 다이어리)은 사용자가 유튜브 또는 유튜브 뮤직의 url을 복사/붙여넣기 하는 방식으로 플레이리스트를 추가하고 플레이리스트에 대한 소개글을 함께 작성하는 블로그 + 플레이리스트가 결합된 컨셉의 서비스다.

현재 서비스 중인 멜론, 스포티파이 같은 서비스에서 여기에 조금 더 나만의 이야기와 추억을 담아서 기록(그래서 부제가 나만의 작은 음악 다이어리다!)해두고, 다른 사람들과도 공유하는 공간을 만들어보면 좋을 것 같아 시작하게 되었다.

배포 링크

깃허브 링크

2. 새로운 기술 스택을 도입해보며

---

TypeScript

이전 프로젝트까지는 계속 JavaScript만 써왔으니 요즘 많이들 사용한다는 TypeScript를 이번 프로젝트에 새롭게 써보고 싶다는 생각이 들었다. 현재 많은 회사에서 TypeScript를 사용하고 있고 타입을 체크해서 오류를 줄일 수 있다는 말만 들었지 실제로 사용해본 적이 없어서 왜 사람들이 TypeScript를 좋아하는지 궁금하기도 했다.

프로젝트가 마무리 된 지금 시점에서 돌이켜 보면 결과적으로 TypeScript 적용은 매우 잘 한 일이였다. 그냥 공부하는 것보다 확실히 실제로 프로젝트를 통해 바로 적용해보면서 습득하는 것이 습득 속도가 빨랐기 때문이다.

JavaScript와는 달리 TypeScript는 코드 작성 단계에서 타입을 지정해줌으로써 타입으로 인한 에러를 사전에 확실히 방지하자!라는 느낌이 들었다. 그리고 아래와 같이 실행 이전에 에러를 보여주는데 이처럼 즉각적인 피드백을 주어 디버깅에 용이했다.

const message = "hello!";

message();

• JavaScript
  

• TypeScript
  

3. 프로젝트를 마무리하며

---

촉박한 시간에 공부하면서 프로젝트를 진행하려니 약간 미쳐서? 했던 것 같았다. 다른 팀원분들이 기능 구현에 어려움을 겪는 부분이 있었는데 같이 해보면서 내가 맡은 부분뿐만 아니라 다른 기능들도 구현해 볼 수 있어서 너무 좋았다. 이전 프로젝트에서는 나도 저 부분을 해보고 싶었는데 파트 분배를 하다 보니 다른 분에게로 간 기능들이 있었기 때문이다.

팀원분께서 로그인, 회원가입 구현 시 useForm이라는 hook을 사용하셨는데 같이 해보면서 이런 hook이 있는지 처음 알게 되었다. useForm을 사용하면 email, password 등 각각의 input에 state와 핸들러를 만들지 않아도 되기 때문에 왜 사람들이 많이 사용하는지 알 것 같았다.

그리고 YouTube API를 처음 사용해 보았는데 외부 API를 사용할 때 어떻게 사용해야 하는지 docs를 꼼꼼히 읽어야 한다는 것을 다시 상기하게 되었고, .env, gitignore 예외 처리를 해보면서 파일 관리 부분에서도 경험을 해볼 수 있었다.

이전까지는 페이지네이션을 많아봐야 3~4개 정도만 조건부 렌더링을 하고 상태 저장도 하지 않았는데 이번에는 메인 페이지의 태그 8개 마다 각각 페이지네이션을 구현하고, 또 마이페이지에서 3개의 페이지네이션을 더 구현했다.

그리고 태그/탭 상태, 페이지 번호 상태, 페이지 블록 상태를 각각 메인,마이페이지 3개씩 6개를 로컬스토리지로 상태를 저장하여 자연스러운 로직이 되게 하려고 하니 햇갈려서 실제 서비스들은 페이지네이션이 어떻게 동작하는지, 어떤 페이지를 갔다가 오면 보던 페이지가 유지되고, 어떤 페이지를 갔다 오면 페이지 상태가 초기화 되는지를 많이 찾아 봤다.

끝으로 많은 부분을 내가 직접 구현해 보며 여러 에러 상황에도 직면해 보고 경험해 볼 수 있었던 얻는게 많았던 프로젝트였다.