미리보기

개요

Freetify라는 무료 음악 스트리밍을 목적으로 서비스하고 있습니다.

https://freetify.vercel.app/

https://github.com/kimgh06/Freetify

문제 상황

음악을 들으며 운동하다가 음악이 전환될 때 광고로 중간에 끊기는 현상이 불편함을 겪는 문제점을 해결하기 위해 제작했습니다.

음원 가져오기

우선 원하는 음원을 가져오기 위해서 유튜브에서 음원을 가져오는 방법을 선택했습니다. 유튜브는 기본적으로 무료로 사용할 수 있다는 점, 그리고 개발자 도구 사용 방법이 편하다는 점이 매력적으로 다가왔습니다. 초기에는 spotify api를 사용해서 음원 정보를, 그 정보를 구글 개발자 api로 넘겨 유튜브에 해당 음원을 검색하고, ytdl 패키지를 통해 음원을 가져왔습니다.

문제 해결 1: api 할당량 초과로 인한 서드 파티 패키지 활용

이 방법을 사용하여 테스트 하던 도중 api 할당량이 자주 초과되어 api 호출을 하지 못해 이대로 가면 제대로 서비스를 할 수 없었습니다.

대안이 필요한 시점이었고, 유튜브 검색도 패키지를 사용하는 것이 할당량도 초과 되지 않고 비용도 발생하지 않는다는 점이 저에게 매력적으로 다가왔습니다.

그래서 기존 구글 api를 사용하는 방법에서 패키지를 사용하는 방법으로 빠르게 검색 방식을 교체했습니다.

문제 해결 2: 프록시를 이용한 cors 문제 해결

음원을 가져오던 도중 브라우저에서 자체적으로 cors를 일으켰습니다.

제가 그 패키지들을 직접적으로 관리하는 것도 아니라 허용 도메인을 설정할 수 없기에 외부 api를 처리할 백엔드 서버가 필요했습니다.

예전에 짦막하게 언급되었던 Next.js의 api 라우트 기능이 떠올랐고, api 기능을 사용하면 브라우저가 아닌 서버 콘솔에서 작동하기 때문에 프론트엔드 서버 상에서 백엔드 서버 기능을 활용할 수 있었습니다.

recoil을 이용한 상태 관리 & zustand로 마이그레이션 예정

음악 플레이어 컴포넌트와 페이지 사이의 정보 전달, spotify 토큰 관리 위해 컴포넌트를 거슬러서 상태를 관리하기엔 불편했습니다. 따라서 recoil을 사용해서 상태 관리를 하게 되었습니다.

recoil을 선택한 이유는 redux의 비해서 사용하기에 간편하다는 이유 하나였습니다.

이후 zustand의 provider가 없다는 장점으로 주력 상태 관리 패키지를 변경했습니다.

zustand에 익숙해진 뒤로는 zustand로 마이그레이션을 할 예정입니다.

배포 후 검색 엔진 최적화

MVP가 완성되고 vercel을 활용해 Nextjs 프로젝트를 배포하고 보니 욕심이 생겼습니다.

검색 엔진을 통한 자연 유입을 원했습니다.

크롤링된 url을 보니 페이지가 달라도 정보가 고정되는 것이 보기 나빴습니다.

페이지에 따라서 url을 공유했을 때 메타 데이터가 다르게 나오도록 Next.js에서 지원하는 generateMetadata 기능을 사용해 검색 엔진 최적화를 진행했습니다. 추가로 구글 검색 콘솔을 사용해 도메인을 등록해서 검색 결과로 나오도록 했습니다.

플레이 리스트 생성

사용하면서 플레이 리스트 생성과 공유를 위해 계정의 필요성을 느끼게 되었습니다.

플레이 리스트를 공유함으로 자연스럽게 유입이 생길 것이라고 생각했기 때문입니다.

그래서 계정을 저장하기 위한 DB가 필요했습니다.

DB를 구축하기 위해 AWS의 EC2 서비스를 이용해 MySQL을 사용했습니다.

현재는 AWS 요금 문제로 DB를 개인 DB 서버로 이전했습니다.

개요

웹에서 원격 조작이 가능한 스마트 화분 Insam입니다.

https://github.com/kody-gsm/Insam_Front

https://insam-front.vercel.app

문제 상황

시장에 나오는 작은 규모 스마트 화분의 가격 대비 성능이 좋지 못한 점을 보완하고자 가격과 성능을 모두 챙긴 스마트 화분(Insam) 프로젝트를 진행했습니다.

라즈베리 파이 3, 다양한 센서와 모듈을 이용해 만든 적정 비용은 6만원이었습니다.

그러나 제품으로 나온 가격은 기본적으로 10만원 이상에 하나에 5천원이 넘는 씨앗을 담은 패키지를 따로 구매해야 사용이 가능했습니다.

가격에 비해 기능의 성능이 좋지 못함에 불만은 품고 직접 만들기로 결정했습니다.

통신 방법

이 프로젝트는 주로 웹에서 스마트 화분을 조작할 수 있도록 하는 것이 제 1 순위 이므로 화분과 서버 클라이언트를 연결 시킬 방법을 찾게 되었습니다.

팀원들에게 익숙한 웹 소켓을 사용하는 것으로 결정하였고, 웹 소켓으로 통신 체계를 구축해서 클라이언트와 화분 간 데이터를 주고 받을 수 있게 하였습니다.

이메일 인증

사용자를 인증하기 위한 방법으로 이메일 인증을 도입하였습니다. 백엔드 서버의 부하를 줄이고 싶었고 이를 프론트 서버쪽에서 처리하고 싶었습니다. 따라서 Next.js의 API 기능을 활용하여 nodemailer 패키지를 가져왔고, 패키지와 Gmail 계정을 연동해서 이메일을 발송해 이메일 인증 기능을 구현하였습니다.

토큰 & 상태 관리

백엔드 서버의 인증을 위해 JWT 토큰 방식을 사용하고 있었습니다.

JWT 토큰을 어느 컴포넌트에서나 꺼내 쓸 수 있도록 zustand를 활용해 상태 관리를 하였습니다.

배포

간단하게 고칠 수 있도록 개인 계정에 팀 레포지토리를 fork시키고 vercel을 통해 개인 계정에 fork되어 있는 레포지토리를 배포를 하게 되었습니다.

다른 배포 서비스는 Next.js를 사용할 때 api 라우트 기능을 제대로 사용하지 못했습니다.

vercel이 Next.js와 호환이 굉장히 좋기 때문에 이메일 인증을 할 때 사용하는 api 라우트를 제대로 사용할 수 있습니다.

문제 해결 1: 리다이렉트 문제

리다이렉트를 할 때 브라우저의 로컬스토리지를 확인하는 방식을 사용했기에 일명 깜빡임 현상이 발생했습니다.

이 현상은 브라우저가 렌더링이 되고 나서 로컬스토리지를 확인한 다음 리다이렉트를 사용한 방법 때문이었습니다.

그래서 이 현상을 없애고자 기존 확인 하던 방식으로 로컬스토리지가 아닌 쿠키를 통해서 렌더링되기 전 refresh_time가 담긴 쿠키 여부를 판단하고 없을 경우 랜딩 페이지로 리다이렉트를 하여 깜빡임 현상을 없앴습니다.

문제 해결 2: 이미지 최적화

웹 소켓 뿐만 아니라 일반적인 http통신으로 화분에서 서버로 사진 데이터를 보내 서버에 저장한 뒤에

타임 랩스로 그동안 자라온 식물의 형태를 확인할 수 있도록 하였습니다.

그러나 사진을 불러오던 도중 서버에서 사진을 가져오는 딜레이가 길어졌고, Next.js의 이미지 최적화 기능을 사용해 지연 속도를 줄였습니다.