📝 서버리스란 ? 서버리스(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이나, ..
📝 현황 점메추 프로젝트는 한참 코드스테이츠 부트캠프를 병행하며 약 3주간 진행했던 프로젝트였다. React 라이브러리를 처음 배운 상태에서 진행했던 첫 프로젝트다 보니, 지금 돌이켜 보면 정말 부족한것도 많아 보인다. 목표했던 기능은 구현을 완료 했으나, 시간상의 문제로 배포까지는 완료하지 못한채 마무리 되었다. 부트캠프도 수료하였고, 이전에 완료하지 못했던 배포작업을 진행해보려고 한다. 🔍️ 어떤 문제로 배포에 실패했던 걸까? vercel과 github page 플랫폼을 이용하여 배포를 시도 했으나, 실제 네이버 API 통신을 하는 로직이 동작을 하지 않았다. 사실 네이버 API는 javascript 환경에서 보안상의 이슈로 CORS를 허용하지 않는다. 따라서, 네이버에서도 javascript 환경에..
📝 도입 배경 본 프로젝트 (삐삐:Best Interior)는 인테리어 정보 교환을 위한 커뮤니티로, 고화질의 사진 리소스를 사용하는 작업이 많았고, 서버에서 고용량의 사진 데이터를 받아오는 과정에서 발생 할 수 있는 사용자 불편함을 고려해야 하는 상황이었습니다. 또한, 고화질의 사진 리소스들은 불러오는데 많은 네트워크 비용이 들고, 장애 발생 가능성 또한 고려해야만 했습니다. 이러한 상황을 고려하여, 2가치 최적화 방안을 도입하였습니다. 🔨 최적화 방안 - (1). Pagenation 구현 고용량의 사진 데이터를 받아오면서 발생할 긴 로딩을 방지하기 위해, Pagenation을 구현하였음 각 페이지(쇼룸, 팁)에 12개의 개시글 단위로 Pagenation을 구현하였으며, 이를 통해 리소스가 큰 요청들을..
📝 배경 본 프로젝트 (삐삐:Best Interior)에서는 인테리어 관련 게시글, 팁관련 게시글을 작성할 수 있으며, 사용자는 댓글과 답글을 작성 할 수 있도록 기획하였다. 여기서 댓글은, 말그대로 게시글의 댓글, 답글은 댓글의 댓글이다. 🚨 문제 상황 - (1). 새로 작성한 댓글의 답글이 작성이 안되는 버그 새로운 댓글을 작성할 경우, 답글작성이 안되는 오류가 발생하였다. 오류: TypeError: Cannot read property 'push' of undefined 하지만, 새로고침을 할경우에는 정상적으로 답글이 작성되는 현상임을 확인하였음 🔍️ 원인 파악 에러 메세지에서 확인이 가능하듯이, 배열이 아닌 undefined에 push를 하려고 해서 발생하는 오류임을 파악 // 수정 전 코드 co..
📝 배경 본 프로젝트 (삐삐:Best Interior)에서는 서버가 클라이언트를 인증하는 방식 중 하나인 JWT를 이용하여 로그인 기능을 구현하기로 함 또한, 토큰은 로컬스토리지에 저장하는 방식을 택했으며, 이렇게 저장된 토큰은 매 요청 헤더에 담아 적절한 인증 과정을 거친 사용자인지 판단하는 인가(Authorization)를 구현함 이를 위해, axios 통신시 interceptors 를 이용하여 헤더에 토큰 정보를 담아 보내는 token.js라는 컴포넌트를 만들었으며, token 컴포넌트를 활용하여 useAxios라는 커스텀훅을 만들어서 통신로직을 추상화하고 재사용성 및 코드 가독성을 향상시키고자 했음 🚨 문제 상황 - (1). api 요청시 헤더에 엑세스토큰을 담아 보냇으나, 403에러 발생 로그인..
📝 배경 프로젝트가 50% 정도 진행되었을때, *S3를 통해 클라이언트 빌드파일을 배포하고 테스트를 진행하였다. 서버는 EC2를 통해 배포하였음 분명 로컬에서 테스트 했을 때에는 api호출이 정상적으로 이루어졌던 상황이었음 * S3 란? Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조..
