연락처 폼을 생성하는 방법: Resend, AWS Lambda, React.js 사용

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자, 특히 React.js, AWS Lambda, Serverless Framework, 이메일 API 사용에 관심 있는 중급 이상 개발자
• 프론트엔드/백엔드 연동이 필요한 프로젝트를 진행 중인 개발자

핵심 요약

• AWS Lambda 와 Resend API 를 활용한 서버리스 이메일 전송 구현
• React.js 와 Tailwind CSS 를 사용한 클라이언트 측 폼 개발
• Zod 라이브러리로 입력 데이터 스키마 검증 수행
• Serverless Framework 를 통해 AWS Lambda 서비스 배포 및 환경 변수 설정

섹션별 세부 요약

1. 프로젝트 준비

• Serverless Framework 설치: npm i serverless -g
• AWS 계정 설정 및 인증 정보 구성 필요
• 프로젝트 생성: serverless 명령어 사용, 템플릿 선택 (AWS/Node.js/HTTP API)

1. 백엔드 구현

• handler.js 파일에서 AWS Lambda 함수 정의
• Zod 라이브러리로 입력 검증:

```javascript

const schema = z.object({

name: z.string().min(2),

email: z.string().email(),

subject: z.string().min(10),

message: z.string().min(20),

});

```

• Resend API를 통해 이메일 전송:

```javascript

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({ from, to, subject, html });

```

1. 환경 설정 및 배포

• .env 파일에 RESEND_API_KEY 설정
• serverless.yml 파일 구성:

```yaml

provider:

name: aws

runtime: nodejs20.x

region: ap-south-1

functions:

hello:

handler: handler.hello

environment:

RESEND_API_KEY: ${env:RESEND_API_KEY}

```

• 배포: sls deploy 명령어 실행, 배포 URL 생성

1. 프론트엔드 구현

• React.js에서 useState 훅으로 폼 상태 관리
• handleSubmit 함수에서 API 호출 및 검증 수행:

```javascript

const handleSubmit = async (e) => {

e.preventDefault();

const response = await fetch(import.meta.env.VITE_MAIL_ENDPOINT, { method: "POST", body: JSON.stringify(formData) });

}

```

• 입력 필드: 이름, 이메일, 제목(10단어 이상), 메시지(20단어 이상)

결론

• AWS Lambda와 Resend API를 사용한 이메일 전송 구현 시, 환경 변수 및 CORS 설정을 필수로 포함해야 함
• Vercel의 서버리스 함수를 사용해 무료로 호버 프로젝트 개발 가능
• 입력 검증과 배포 프로세스에서 에러 처리 및 보안 고려사항을 철저히 검토해야 함