clone coding,

Validation2

Dahna Dahna Follow Jun 25, 2024 · 2 mins read
Validation2
Share this

Validation2

Log In Validation

async : async 키워드는 함수 앞에 위치하며, 해당 함수가 비동기 함수임을 나타낸다.
비동기 함수는 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있게 해준다. async 함수는 항상 Promise를 반환한다. 예를 들어, createAccount 함수에서는 외부 API와의 통신이나 데이터베이스 조회 등 비동기 작업을 수행할 때 async를 사용하여 작업 완료를 기다릴 수 있다. 비동기 함수를 사용하면, 웹 애플리케이션에서 사용자 인터페이스가 멈추지 않고, 백그라운드에서 데이터 처리 등의 작업을 계속 수행할 수 있다.

1

사용자 입장에서 비동기 작업이 진행되는 동안 중단되지 않고 실행되는 작업의 예시

  1. 앱에서 데이터를 로드하는 동안 UI 조작
    예시: 뉴스 앱을 사용할 때, 최신 기사를 서버에서 로드하고 있는 중입니다. 비동기 작업으로 기사가 로드되는 동안, 사용자는 앱에서 다른 메뉴를 탐색하거나 이전에 로드된 기사를 읽는 작업을 할 수 있습니다. 이처럼 서버에서 데이터를 받아오는 동안에도 UI는 응답성을 유지하여 사용자가 다른 작업을 할 수 있게 됩니다.
  2. 채팅 앱에서 메시지를 보내는 동안 다른 채팅 읽기
    예시: 메신저 앱에서 메시지를 보낼 때, 메시지가 서버에 전송되고 상대방에게 도착하는 과정은 비동기적으로 처리됩니다. 이때 사용자는 메시지를 보내고 대기하는 동안에도 다른 채팅방으로 이동해 이전 대화를 읽거나 다른 메시지를 보낼 수 있습니다. 전송 중인 메시지가 완료될 때까지 앱이 멈추지 않고 다른 작업을 할 수 있게 됩니다.
  3. 파일 업로드 중 다른 페이지 탐색
    예시: 클라우드 스토리지 앱에서 큰 파일을 업로드할 때, 업로드는 백그라운드에서 비동기적으로 진행됩니다. 사용자는 파일이 업로드되는 동안 다른 파일을 탐색하거나 업로드 상태를 확인하는 작업을 할 수 있습니다. 업로드가 완료될 때까지 앱은 다른 기능을 계속 제공하여 사용자가 자유롭게 앱을 사용할 수 있게 합니다.
  4. 음악 스트리밍 앱에서 노래를 로드하는 동안 다른 노래 탐색
    예시: 음악 스트리밍 앱에서 노래를 재생할 때, 노래를 로드하는 작업은 비동기적으로 처리됩니다. 로드가 완료될 때까지 사용자는 다른 노래를 탐색하거나 재생 목록을 수정할 수 있습니다. 이 과정에서 앱은 멈추지 않고, 사용자가 끊김 없이 앱을 사용할 수 있습니다.
    이와 같은 예시들은 사용자가 비동기 작업이 완료되기를 기다릴 필요 없이 앱의 다른 기능을 계속 사용할 수 있게 해줍니다. 이는 사용자 경험을 향상시키는 중요한 요소입니다.

상수 따로 분류하는 이유
재사용성: 상수를 사용하면 여러 곳에서 동일한 값을 일관되게 사용할 수 있다.
가독성: 코드의 가독성을 높여준다.
유지보수성: 비밀번호 규칙이 변경되면 상수만 수정하면 되므로 코드의 다른 부분을 수정할 필요가 없다.
유효성 검사: 비밀번호 유효성 검사를 중앙에서 관리할 수 있다.


Coerce

  • npm i validator 설치 : 문자열에 대한 다양한 유효성 검사 기능을 제공하는 라이브러리
    여기서는 특히 전화번호가 유효한 모바일 전화번호인지 검증하는 함수를 사용한다.
  • zod 라이브러리의 coerce : 입력된 데이터를 명시된 타입으로 강제 변환하는 기능을 제공
    데이터 유형이 애플리케이션에서 필요로 하는 형식과 정확히 일치하지 않을 때 유용하게 사용된다.
export async function smsLogIn(prevState: any, formData: FormData) {  
  console.log(formData.get("token"));  
  console.log(tokenSchema.parse(formData.get("token")));  
}  
  • parce : 입력된 데이터가 스키마의 요구사항을 충족하는지 확인하고, 만약 데이터가 요구사항을 만족하지 않으면 오류를 발생시킨다. 만약 데이터가 스키마를 만족한다면, 검증된 데이터를 반환한다.


SMS Validation

2

refine : refine 메소드는 두 개의 인자를 받는다.

  1. 검증 함수: 첫 번째 인자는 실제 데이터를 검증하는 함수
  2. 오류 메시지: 두 번째 인자는 검증이 실패했을 때 반환될 오류 메시지

3

Dahna
Written by Dahna Follow
Hi, I am Dahna, the author of this blog!