2024.08.31(토) TIL

시나리오 자바스크립트를 들으며 궁금하거나 새로 배운 내용을 정리했습니다.

Serverless 함수

Serverless란?

개발자가 직접 서버를 관리하는 걸 신경쓰지 않아도 되는 클라우드 시스템을 의미한다. 클라우드는 서버관리의 하드웨어적인 부분을 다른 회사의 서비스에서 빌려 사용할 수 있도록 한다. 즉, 다른 회사가 보유하고 있는 서버 시스템을 돈을 내고 사용하는 것이다.

하지만 여전히 소프트웨어적인 부분은 개발자가 따로 관리를 해야한다. 이때 기존엔 서버에 사용자의 유입량이 얼마나 되든 시간당 결제를 해야했다. 하지만 서버리스 컴퓨팅이 등장하면서 사용자 요청이 오지 않는 시간에는 휴식 상태에 들어가 있다가, 사용자 요청이 발생하는 경우에만 서버가 깨어나면서 그 부분에 대해서만 결제를 하면된다.

더불어 유저 유입이 증가하더라도 할당하는 함수를 증가시키기 때문에 개발자는 소프트웨어적인 서버 관리도 신경쓸 필요가 없게 되었다.

Serverless 함수란?

Serverless 환경에서 실행되는 함수를 의미한다.

Vercel에서 제공하는 서버리스 함수

• api 폴더를 만든다.
• api 폴더 내부에 URL 경로를 의미하는 파일을 만든다. (Next.js와 비슷)
• nodeJS 문법으로 response와 request를 처리하는 함수를 만든다.

export function GET(request: Request) {
  return new Response(`Hello from ${process.env.VERCEL_REGION}`);
}

이전에 사용했던 것...

이전에 vercel의 serverless 기능을 네트워크 요청을 숨기기 위해 사용했던 적이 있다.

• 프론트엔드 요청 -> serverless 요청
• serverless 요청 -> 원래 api 요청

의 형태로 이뤄지기 때문에 원래 사용하는 URL과 key를 숨길 수 있다.

Form 데이터를 가져오는 법

1. input의 name 프로퍼티를 통해 가져오기

const form = document.querySelector('form');

const email = form.email; //  <input name='email' value='qwer@qwer.com' />
const password = form.password; // <input name='password' value='123asd' />

2. FormData 객체를 사용해서 가져오기

const form = document.querySelector('form');

const formData = new FormData(form);
formData.get('email'); // qwer@qwer.com
formData.get('password'); // 123asd

Zod 라이브러리

input의 유효성 검사를 해주는 라이브러리이다.

import { z } from 'zod';

// string에 대한 스키마를 생성한다
const myStringSchema = z.string();

// 파싱
myStringSchema.parse('tuna'); // tuna
myStringSchema.parse(123) // throws ZodError

myStringSchema.parse('tuna'); // { suceess: true, data: 'tuna' }
myStringSchema.parsE(123) // { success: false, data: ZodError } 

import { z } from 'zod';

const User = z.object({
    username: z.string(), 
})

User.parse({ username: 'suyeon' });

// infer 타입을 추출할 수 있다.
typeUser = z.infer<typeof User>;
// { username: string }

import { z } from 'zod';

const emailSchema = z.string().email(); // 브라우저에서 제공해주는 validation도 가능

Vanilla JS에서 Form submit 시 주의할 점

유효성 검사하기

브라우저가 지원하는 유효성 검사기능을 사용하지 않을 경우 error 처리를 일일이 해주기

submit 요청 중인 경우 처리해주기

1. submit 이벤트가 두번 발생하지 않도록 submit을 하자마자 disabled 적용해주기
2. button의 Label을 바꿔서 submit 상태임을 알리기

그런데 2번의 경우... Repaint, Reflow 등 렌더링을 고려하는 것도 중요해보인다...!

---

참조

Serverless 개념 참조