직접만든 블로그에 작성하는 첫번째 글 (감격)
NextJS를 통해 풀스택 블로그 프로젝트를 진행하던중,
그럼 보람님은 Vercel Serverless를 이해하고 계신 프론트엔드 개발자이시네요? 라는 질문을 들었고,
나는 🤗 그렇죠 뭐..ㅎㅎ 라고 대답을 했다 (서버 뭐시기 🙄…?)
NextJS를 통해 풀스택 프로젝트를 만들어냈지만 그게 어떻게 가능한지에 대해 생각해본적이 없었다.
도대체 Serverless란 무엇일까
Serverless는 클라우드 컴퓨팅의 모델 중 하나로 개발자가 서버를 직접 관리할 필요가 없는 아키텍처모델을 의미한다.
개발자가 직접 서버를 구축하고 관리할 필요 없이, netlify나 vercel과 같은 hosting 플랫폼에서 서비스를 운영해 주기 때문에 초기 설정 부담이 적고, 실제 사용량에 대해서만 비용이 청구되어 경제적이며, 또 트래픽이 늘어나더라도 해당 플랫폼에서 자동 확장해주기 때문에 대처가 가능하다는 장점으로 최근 많은 개발자들이 사용한다고 한다.
- 이벤트 기반 실행: 서버리스 함수는 특정 이벤트(예: HTTP 요청, 데이터베이스 업데이트, 큐 메시지)가 발생할 때 자동으로 실행
- 자동 스케일링: 함수 실행을 필요한 만큼 자동으로 확장하고 축소
- 요청별 비용 청구: 사용한 리소스에 대해서만 비용을 지불하므로 비용 효율적
하지만 사용이 간편하다는 장점과 동시에 단점도 존재한다.
- Cold Start : 서버가 계속 운영되고 있는 것이 아니라, 클라우드 상에 요청이 올때마다 실행 준비를 하기 때문에 처음 시작하는데 시간이 걸린다.
- 실행 시간 한계 : 서버리스는 함수가 1회 호출 될 때 사용할 수 있는 메모리 및 시간에 제한이 있기 때문에 너무 오래걸리거나 무거운일을 하는 함수는 적합하지 않다.
따라서 사이드 프로젝트나 빠르게 초기 서비스를 런칭하고 싶은 경우 추천되는 개발 방식이다.
NextJS의 API Route Handler로 Rest API 만들기
Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.
NextJS 공식 문서
Next.js 공식 페이지 설명에서도 볼 수 있듯, NextJS를 통해 풀스택 프로젝트를 만들 수 있다.
Next.js는 Node.js로 react기반 프론트엔드 코드를 번들링 및 컴파일 해주고 있으며, Next.js의 API Route Handler 기능을 통해 Serverless function을 구현할 수 있기 때문이다.
Next.js 13에서 Route Handler는 임의의 http 요청에 대해 리스너를 시행시키는 것을 이야기하며 이 리스너에서 next.js에서 정의된 Response 객체를 반환하게 된다.
app/api 폴더 내부에 폴더를 생성하고,route.ts 파일 내부에 route handler 함수를 작성하면 해당 함수를 기반으로 API를 생성할 수 있다.
또한 페이지를 구성하는 것 처럼 경로에 [slug] 를 이용하여 다이나믹 세그먼트를 활용할 수 있다.
그래서 나의 경우 username에 접근해야 하는 api의 경우 [user]라는 상위 폴더를 두고 하위에 api 폴더들을 추가해 주었다.
route handler function은 GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS 와 같은 HTTP 메서드 이름을 함수명으로 설정하여 해당 HTTP 메서드 요청을 할 수 있다. 매우 직관적😁
export async function GET(request: Request) {}
이렇게 생성한 함수들은 vercel에 배포하면 등록되어, 별도의 서버를 운영하고 있지 않아도 마치 서버처럼 해당 api 경로로 요청이 들어오면 함수에서 작성된 내용대로 (ex. 데이터베이스에서 사용자 정보 꺼내오기) 행동하게 된다.
Vercel Serverless Function
생성한 api는 Vercel Deployment Summary에서 각 end point들이 정상적으로 등록된 것을 확인할 수 있다. 이제 해당 api에 요청하면, NextJS route handler로 등록한 함수가 동작하게 된다.
api 설계
현재 기능에 대한 굉장히 많은 api들을 만들어놨는데, 조금은 지저분하게 느껴진다.
나 혼자만의 블로그로만 만들었다면 훨씬 깔끔한 api 구조가 되었겠지만,
다른 사람들도 함께 쓸 수 있는 블로그이기 때문에, 전체 데이터와 특정 사용자의 데이터를 구분 짓는 과정에서 구조를 작성하는 것이 혼란스러웠다😂
URI 설계에 대해 조금더 고민해보면서 개선해보려고 한다.
[user]/about [user]/logs [user]/logs/[emotion] [user]/logs/log/[id] [user]/logs/log/[id]/[emotion] [user]/me [user]/me/profile [user]/posts [user]/posts/tags [user]/posts/tags/[keyword] [user]/search/[keyword] /bookmarks /comment/[id] /follow /likes /posts /posts/[id] /search/[keyword] /tags/[keyword]