K- /
- CtrlK
KK
NEXT.js, MongoDB, tailwind, Docker, Git Actions, zustand
우리들의 OTT We T 입니다. We T는 사용자들이 다양한 OTT 플랫폼들의 콘텐츠를 공유하고 추천하는 플랫폼입니다.
Next.js로 개발을 한 이유는 React 프로젝트를 프로덕션급으로 발전시킬 때 필요한 다양한 기능과 최적화 도구들이 Next.js에 이미 존재합니다. Next.js는 이미지와 폰트 최적화, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등의 기능을 제공합니다. 이러한 기능들은 웹 애플리케이션의 로딩 시간을 줄이고, 검색 엔진 최적화(SEO)를 향상시키는 데 도움을 줍니다. 또한 API Routes와 MongoDB 조합으로 서버 사이드 코드를 직접 작성하여 API를 쉽게 생성할 수 있습니다.
Tailwind CSS를 고른 이유는 구직 시장에서 많이 쓰이는 것을 확인했기 때문입니다. 또한 디자인이 없는 상태에서 개발을 하기 때문에 템플릿이 많이 공유 되어 있는 Tailwind가 빠르게 개발하기에 적합하다고 생각 되었기 때문입니다.
Vercel의 504 Gateway Timeout 이슈 때문에 자체 서버를 구축하기로 하였습니다. Oracle Compute Instance를 생성하여 Ubuntu를 설치하고 서버로 활용하였습니다. 이슈는 개발하면서 겪은 일 부분에 적었습니다.
가비아에서 16,000원에 1년짜리 네임서버를 샀습니다.
항상 회사에서는 젠킨스로 이미 구축이 되어 있었습니다. 또한 개인 프로젝트를 진행할 때도 넷틀리파이나 vercel덕분에 쉽게 CI/CD를 할 수 있었습니다. 그러나 직접 이렇게 설정을 해보니 쉬운일이 아니란 것을 알게 되었습니다.
Docker + Git Actions 으로 docker-image.yml 파일을 작성하여 main 브랜치 푸쉬시 지속적인 배포가 이루어지도록 하였습니다.
* UX란, 사용자의 실수를 줄여줘야한다.
글쓰기 기능이 있는 웹,앱을 사용하다보면 실수로 뒤로가기가 실행되는 일이 간혹 있습니다. 이를 막기 위해서 브라우저의 뒤로가기가 실행시 확인창이 뜨게 하는 기능을 넣었습니다. 이로써 사용자가 실수로 뒤로가기를 눌러도 확인을 받게 하여 사용자의 실수를 줄였습니다.
최근 프로젝트를 Vercel에 배포하게 되면 로컬 로그인, 로컬 회원가입이 504 Gateway Timeout 오류를 반환하였습니다.
문제의 원인은 Vercel의 무료 플랜과 관련된 자원 제한이 주요 원인 중 하나로 추정되었습니다. 실제로 Vercel Pro 플랜으로 업그레이드 한 후, 문제가 해결되었습니다.
Vercel: Serverless functions have a timeout of only 10 seconds (300 seconds if you upgrade to pro plan)
위의 글에서 볼수 있듯이 Vercel의 무료 플랜에서는 서버리스 함수의 실행 시간이 10초로 제한됩니다.
그래서 제 해결책은 자체 서버를 구축하여 데이터베이스 요청의 처리 속도와 효율성을 향상시키는 것입니다. 서버리스 아키텍처의 편리함에도 불구하고, 제한된 리소스와 고정된 환경은 때로 예상치 못한 성능 문제를 야기할 수 있음을 깨달았습니다.