📝 서버리스란 ? 서버리스(Serverless) 아키텍쳐는 서버 인프라를 생성(프로비저닝)하거나 관리하지 않고 어플리케이션을 배포할 수 있는 아키텍처입니다. 이번 포스팅에서는 Next.js 14버전에서 서버리스 아키텍쳐를 이용하여 API 라우팅을 구현해보는 과정을 담아보도록 하겠습니다. Next.js 14버전에는 App router와 Page router가 있는데, 그 중에서 App router 방식을 적용할 예정입니다. 사실 Next.js 14 버전이 나온지 얼마되지 않았고, 특히 App router 방법에 대한 내용은 공식문서 말고는 참고할만한 레퍼런스가 적었기 때문에, 잘못된 정보가 있다면 댓글로 피드백 해주시면 감사하겠습니다! 🚀 Next.js 에서 API 라우팅을 위한 서버리스 함수를 생성하는 ..
📝 배경 탑개미자원 웹 제작 프로젝트를 진행하며, 스크롤을 일정 범위 이상으로 내릴 시 페이지 최상단으로 이동하는 TopButton이라는 컴포넌트가 조건부렌더링 되도록 구현중이었습니다. 페이지 최상단으로 이동하는 기능을 구현하는것은 쉬우나, 해당 컴포넌트가 마운트, 언마운트 될 시 애니메이션 효과를 부여하고 싶은 상황이었습니다. 해당 프로젝트에의 각종 애니메이션 효과는 Framer Motion이라는 라이브러리를 사용중이었습니다. 🔍️ 문제 상황 애니메이션 효과는 그냥 라이브러리를 통해서 구현하면 되는거 아닌가? 라고 생각할수도 있습니다. 물론 React나 next.js 에서 컴포넌트는 조건부 렌더링을 통해 쉽게 추가되거나 제거할 수 있죠. 하지만, 일반적으로 컴포넌트가 사라질 때 애니메이션을 적용하는 것..
📝 배경 탑개미자원이라는 업체의 홍보를 위한 웹제작을 의뢰 받아 작업 마무리 후, vercel을 통해 배포하였습니다. 실제 서비스를 위해서 별도의 도메인이 필요하였고, 호스팅 케이알 이라는 플랫폼을 통해 "탑개미자원.com" 이라는 도메인을 구매하였습니다. 도메인 구매 후, 소유자정보 인증을 완료 한 뒤 vercel을 통해 배포한 프로젝트에 추가(연결)해야 하는 상황이었습니다. 🔍️ 문제 상황 혹시 모르시는 분들을 위해, vercel을 통해 도메인을 추가하는 과정은 아래의 사진을 참조해주세요. 여기서 문제가 발생하는데, vercel은 기본적으로 한글 도메인을 지원하지 않는다는 점입니다. 🔨 해결방안 해결 방법에는 크게 2가지 방법이 있습니다. 첫번째는 한글 도메인을 지원하는 AWS Route 53이나, ..
