<div id="readability-page-1" class="page"><div>Next.js 는 백엔드 API 쪽에 대한 지원이 참 빈약하다. Logger 도 기본 제공이 되지 않고, 라우팅도 HTTP Method 에 따라 분기해줄 수 있는 <code>app.post</code> 과 같은 함수도 없다. 2022년에 <code>if</code> 또는 <code>switch</code> 문을 써서 <code>req.method === 'POST'</code>를 검사해 분기를 해주어야 하다니..
또 하나 빠져있는 주요한 기능이 Request Body 에 대한 검사다. 다행히 header의 Content-Type을 검사해서 <code>request.body</code> 객체를 만들어주는 건 해준다. 빠진 건, 이 Request body 의 타입을 검사하는 부분이다.
이전 글인 <a href="https://velog.io/@byron1st/Go-%EC%96%B8%EC%96%B4%EB%A1%9C-HTTP-API-%EC%84%9C%EB%B2%84%EC%97%90-%ED%95%84%EC%9A%94%ED%95%9C-%EA%B2%83%EB%93%A4">Go 언어로 HTTP API 서버에 필요한 것들</a>에서 소개한 <a href="https://github.com/go-playground/validator">go-validator</a> 같은 라이브러리가 JavaScript 에도 있다. <a href="https://www.npmjs.com/package/ajv">ajv</a> 라는 라이브러리인데, 주간 다운로드 수도 8,000만이 넘고, express 의 뒤를 잇는 차세대 웹 서버 프레임워크인 <a href="http://fastify.io/">Fastify</a>에서도 Request Body 를 파싱하는데 사용하고 있다.
ajv의 타입 검사는 크게 다음 단계로 진행된다.
<ol>
<li><code>new Ajv()</code> 를 통해 <code>validator</code> 객체를 만든다.</li>
<li><code>validator</code> 객체는 <code>compile</code> 이라는 함수를 갖고 있는데, 이 함수는 미리 자바스크립트 객체로 작성된 Schema 를 입력받아 해당 Schema 를 검사하는 <code>validate</code> 함수를 출력값으로 준다.</li>
</ol>
-- 여기까지는 전역변수로 미리 정의해둔다. 아래 부분은 API 가 호출 될 때마다 실행하면 된다 --
<ol start="3">
<li>2단계에서 만든 <code>validate</code> 함수에 검사하고자 하는 객체를 넣는다. 출력값으로 <code>true</code> 또는 <code>false</code>가 나온다.</li>
<li><code>false</code>가 출력될 경우, 검사에 실패하고 뭔가 에러가 있다는 말이다. 해당 에러들은 <code>validate.errors</code> 를 통해 접근할 수 있다. <code>validate</code> 는 함수이지만, <code>errors</code> 라는 프로퍼티도 갖고 있다. 아주 자바스크립트다운(?) (거지같은) 구현이다. 이 <code>errors</code> 배열의 아이템은 객체인데, <code>message</code> 프로퍼티가 예쁘게 에러 메세지를 만들어준다.</li>
</ol>
코드를 보면 바로 이해가 된다.
<pre><code>import Ajv, { ValidateFunction, Schema } from 'ajv'

// 1. validator 객체를 만든다.
const validator = new Ajv()

// 2. Schema 는 미리 정의되어 있다.
const createSessionBodySchema: Schema = {
 type: 'object',
 properties: {
 idToken: { type: 'string' },
 },
 required: ['idToken'],
}

// 2. compile 을 하여, validate 함수를 만들어준다.
const validate = validator.compile(createSessionBodySchema)

async function createSession(req: NextApiRequest, res: NextApiResponse) {
 // 3. validate 함수에 검사하고자 하는 req.body 를 넣어준다.
 if (!validate(req.body)) {
 // 4. 반환값이 false 일 경우, errors 프로퍼티를 이용하여 적절한 에러 메세지를 출력해준다.
 res.status(400)
 throw new Error(validate.errors?.map((error) =&gt; error.message).join(','))
 }
}</code></pre>
여기서 Schema 정의는 JSON Schema(널리 쓰임), JSON Type Definition(표준임, RFC8927) 모두 지원한다. <a href="https://ajv.js.org/guide/schema-language.html">링크</a>를 참고하자.
<code>validate</code> 함수는 깔끔하게 <code>true</code>, <code>false</code> 만 반환하기 때문에 TypeScript 의 user defined type guard 와 조합하면 <code>request.body</code> 를 타이핑할 수도 있다. 아래와 같은 함수를 만들어보자.
<pre><code>function parseBody&lt;T&gt;(validate: ValidateFunction, body: unknown): body is T {
 return validate(body)
}</code></pre>
<code>parseBody</code> 함수는 <code>validate</code> 함수와 검사하고자 하는 객체 <code>body</code>를 받아서, 만약 <code>validate</code> 결과가 <code>true</code> 라면, <code>body</code> 객체가 generic으로 지정된 <code>T</code> 타입 임을 확인한다.
이 함수를 이용하여 위의 코드를 고치면 다음과 같다.
<pre><code>import Ajv, { ValidateFunction, Schema } from 'ajv'

const validator = new Ajv()

const createSessionBodySchema: Schema = {
 type: 'object',
 properties: {
 idToken: { type: 'string' },
 },
 required: ['idToken'],
}

interface CreateSessionBody {
 idToken: string
}

const validate = validator.compile(createSessionBodySchema)

async function createSession(req: NextApiRequest, res: NextApiResponse) {
 // 3. validate 함수에 검사하고자 하는 req.body 를 넣어준다.
 if (!parseBody&lt;CreateSessionBody&gt;(validateCreateSession, req.body)) {
 res.status(400)
 throw new Error(validate.errors?.map((error) =&gt; error.message).join(','))
 }
 
 // req.body 가 parseBody 함수에 의해 이미 type guard 되었으므로, idToken 은 별도로 타입 지정을 안해줘도 자동으로 string 으로 인식한다.
 const idToken = req.body.idToken
 
 ...
}</code></pre>
여기서 코드를 좀 더 분할하면, 아래와 같이 두 파일로 분리하여 리팩토링할 수 있겠다.
<pre><code>// services/ajv.ts

import Ajv, { ValidateFunction } from 'ajv'

export const validator = new Ajv()

export function parseBody&lt;T&gt;(validate: ValidateFunction, body: unknown): body is T {
 return validate(body)
}</code></pre>
<pre><code>// pages/api/users/[userId]/sessions.ts
import { NextApiRequest, NextApiResponse } from 'next'
import { withIronSessionApiRoute } from 'iron-session/next'
import { Schema } from 'ajv'
import { parseBody, validator } from 'services/ajv'
import { sessionMaxAge, sessionOptions } from 'services/session'

...

export default withIronSessionApiRoute(async (req: NextApiRequest, res: NextApiResponse) =&gt; {
 switch (req.method) {
 case 'POST':
 await createSession(req, res)
 return
 ...
 default:
 respond(res.status(404))
 }
}, sessionOptions)

const createSessionBodySchema: Schema = {
 type: 'object',
 properties: {
 idToken: { type: 'string' },
 },
 required: ['idToken'],
}

interface CreateSessionBody {
 idToken: string
}

const validateCreateSession = validator.compile(createSessionBodySchema)

async function createSession(req: NextApiRequest, res: NextApiResponse) {
 try {
 if (!parseBody&lt;CreateSessionBody&gt;(validateCreateSession, req.body)) {
 res.status(400)
 throw new Error(validateCreateSession.errors?.map((error) =&gt; error.message).join(','))
 }

 const idToken = req.body.idToken

 ...
 } catch (err) {
	...
 }
}
</code></pre></div></div>

byron1st.log

안휘

Next.js 는 백엔드 API 쪽에 대한 지원이 참 빈약하다. Logger 도 기본 제공이 되지 않고, 라우팅도 HTTP Method 에 따라 분기해줄 수 있는 app.post 과 같은 함수도 없다. 2022년에 if 또는 switch 문을 써서 req.method === 'POST'를 검사해 분기를 해주어야 하다니..
또 하나 빠져있는 주요한 기능이 Request Body 에 대한 검사다. 다행히 header의 Content-Type을 검사해서 request.body 객체를 만들어주는 건 해준다. 빠진 건, 이 Request body 의 타입을 검사하는 부분이다.
이전 글인 Go 언어로 HTTP API 서버에 필요한 것들에서 소개한 go-validator 같은 라이브러리가 JavaScript 에도 있다. ajv 라는 라이브러리인데, 주간 다운로드 수도 8,000만이 넘고, express 의 뒤를 잇는 차세대 웹 서버 프레임워크인 Fastify에서도 Request Body 를 파싱하는데 사용하고 있다.
ajv의 타입 검사는 크게 다음 단계로 진행된다.
new Ajv() 를 통해 validator 객체를 만든다.
validator 객체는 compile 이라는 함수를 갖고 있는데, 이 함수는 미리 자바스크립트 객체로 작성된 Schema 를 입력받아 해당 Schema 를 검사하는 validate 함수를 출력값으로 준다.
-- 여기까지는 전역변수로 미리 정의해둔다. 아래 부분은 API 가 호출 될 때마다 실행하면 된다 --
2단계에서 만든 validate 함수에 검사하고자 하는 객체를 넣는다. 출력값으로 true 또는 false가 나온다.
false가 출력될 경우, 검사에 실패하고 뭔가 에러가 있다는 말이다. 해당 에러들은 validate.errors 를 통해 접근할 수 있다. validate 는 함수이지만, errors 라는 프로퍼티도 갖고 있다. 아주 자바스크립트다운(?) (거지같은) 구현이다. 이 errors 배열의 아이템은 객체인데, message 프로퍼티가 예쁘게 에러 메세지를 만들어준다.
코드를 보면 바로 이해가 된다.
import Ajv, { ValidateFunction, Schema } from 'ajv'
// 1. validator 객체를 만든다.
const validator = new Ajv()
// 2. Schema 는 미리 정의되어 있다.
const createSessionBodySchema: Schema = {
 type: 'object',
 properties: {
 idToken: { type: 'string' },
 },
 required: ['idToken'],
}
// 2. compile 을 하여, validate 함수를 만들어준다.
const validate = validator.compile(createSessionBodySchema)
async function createSession(req: NextApiRequest, res: NextApiResponse) {
 // 3. validate 함수에 검사하고자 하는 req.body 를 넣어준다.
 if (!validate(req.body)) {
 // 4. 반환값이 false 일 경우, errors 프로퍼티를 이용하여 적절한 에러 메세지를 출력해준다.
 res.status(400)
 throw new Error(validate.errors?.map((error) => error.message).join(','))
 }
}
여기서 Schema 정의는 JSON Schema(널리 쓰임), JSON Type Definition(표준임, RFC8927) 모두 지원한다. 링크를 참고하자.
validate 함수는 깔끔하게 true, false 만 반환하기 때문에 TypeScript 의 user defined type guard 와 조합하면 request.body 를 타이핑할 수도 있다. 아래와 같은 함수를 만들어보자.
function parseBody<T>(validate: ValidateFunction, body: unknown): body is T {
 return validate(body)
}
parseBody 함수는 validate 함수와 검사하고자 하는 객체 body를 받아서, 만약 validate 결과가 true 라면, body 객체가 generic으로 지정된 T 타입 임을 확인한다.
이 함수를 이용하여 위의 코드를 고치면 다음과 같다.
import Ajv, { ValidateFunction, Schema } from 'ajv'
const validator = new Ajv()
const createSessionBodySchema: Schema = {
 type: 'object',
 properties: {
 idToken: { type: 'string' },
 },
 required: ['idToken'],
}
interface CreateSessionBody {
 idToken: string
}
const validate = validator.compile(createSessionBodySchema)
async function createSession(req: NextApiRequest, res: NextApiResponse) {
 // 3. validate 함수에 검사하고자 하는 req.body 를 넣어준다.
 if (!parseBody<CreateSessionBody>(validateCreateSession, req.body)) {
 res.status(400)
 throw new Error(validate.errors?.map((error) => error.message).join(','))
 }
 // req.body 가 parseBody 함수에 의해 이미 type guard 되었으므로, idToken 은 별도로 타입 지정을 안해줘도 자동으로 string 으로 인식한다.
 const idToken = req.body.idToken
 ...
}
여기서 코드를 좀 더 분할하면, 아래와 같이 두 파일로 분리하여 리팩토링할 수 있겠다.
// services/ajv.ts
import Ajv, { ValidateFunction } from 'ajv'
export const validator = new Ajv()
export function parseBody<T>(validate: ValidateFunction, body: unknown): body is T {
 return validate(body)
}
// pages/api/users/[userId]/sessions.ts
import { NextApiRequest, NextApiResponse } from 'next'
import { withIronSessionApiRoute } from 'iron-session/next'
import { Schema } from 'ajv'
import { parseBody, validator } from 'services/ajv'
import { sessionMaxAge, sessionOptions } from 'services/session'
...
export default withIronSessionApiRoute(async (req: NextApiRequest, res: NextApiResponse) => {
 switch (req.method) {
 case 'POST':
 await createSession(req, res)
 return
 ...
 default:
 respond(res.status(404))
 }
}, sessionOptions)
const createSessionBodySchema: Schema = {
 type: 'object',
 properties: {
 idToken: { type: 'string' },
 },
 required: ['idToken'],
}
interface CreateSessionBody {
 idToken: string
}
const validateCreateSession = validator.compile(createSessionBodySchema)
async function createSession(req: NextApiRequest, res: NextApiResponse) {
 try {
 if (!parseBody<CreateSessionBody>(validateCreateSession, req.body)) {
 res.status(400)
 throw new Error(validateCreateSession.errors?.map((error) => error.message).join(','))
 }
 const idToken = req.body.idToken
 ...
 } catch (err) {
 ...
 }
}

Next.js 에서 Request Body 를 검사하기

댓글