Merge : 회원가입 통신 코드

[future9061]

• axios로 서버랑 통신한다. Close 회원가입 post 요청 #29

PR 체크리스트

아래 항목을 확인해 주세요:

• 커밋 메시지가 우리의 가이드라인을 따르고 있는지 확인하세요
• 변경 사항에 대한 테스트가 추가되었는지 확인하세요 (버그 수정 / 기능 추가)
• 문서가 추가되거나 업데이트되었는지 확인하세요 (버그 수정 / 기능 추가)

PR 유형

이 PR은 어떤 종류의 변경을 가져오나요?

• 버그 수정
• 새로운 기능 추가
• 코드 스타일 업데이트 (서식, 로컬 변수)
• 리팩터링 (기능 변경 없음, API 변경 없음)
• 빌드 관련 변경
• CI 관련 변경
• 문서 내용 변경
• 애플리케이션 / 인프라 변경
• 기타... 설명:

관련 이슈

이슈 번호: #29

새로운 동작은 무엇인가요?

사용자에게 이메일과 비밀번호를 입력받아 서버와 통신하여 저장해 회원가입 기능을 구현

• 회원가입 폼을 전부 작성하지 않으면 회원가입을 진행할 수 없다.
• 이메일 형식에 맞춰 작성하지 않으면 사용자에게 에러 문구를 노출한다.
• 비밀번호를 영소문자, 대문자,숫자,특수 기호를 포함하여 8자 이상 20자 이하로 작성하지 않으면 에러 문구를 노출한다.
• 비밀번호 재확인 시 작성한 비밀번호와 상이하면 에러 문구를 노출한다.
• 개인정보동의서를 읽고 동의에 체크하지 않을 시 회원가입을 진행할 수 없다.
• 회원가입이 완료되면 완료 알림과 함께 자동으로 로그인 페이지로 이동한다.

이 PR은 호환성 변경을 도입하나요?

• 예
• 아니요

기타 정보

참고 게시글

https://velog.io/@ckm960411/react-hook-form-TypeScript-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85-%ED%8F%BC-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B3%BC-%ED%83%80%EC%9E%85-%EC%A3%BC%EA%B8%B0

snapshot

적용한 라이브러리

axios(1.6.5)
react-hook-form(7.49.2)

코드 리뷰

• 통신 코드는 apis 폴더를 만들어 별도로 모아놨습니다.
• baseurl을 저장해두고 url으로 import 해 와 통신 코드로 사용했습니다.

// src > apis > BaseUrl.ts
import axios from 'axios';

export default axios.create({ baseURL: 'https://api.doit-toeic.xyz' });

//src > apis > FetchRegister.ts

import { RegisterData } from '../types/RegisterData';
import url from './BaseUrl';

export const FetchRegister = async (register: RegisterData) => {
  const data = { email: register.email, password: register.password };

  const headers = {
    'Content-Type': 'application/json',
  };

  try {
    const res = await url.post('/auth/register', data, { headers });
    res && alert('회원가입이 완료되었습니다.');
    return res.data;
  } catch (error) {
    alert('회원가입이 실패하였습니다.');
    throw new Error();
  }
};

[sheepdog13]

수고하셨습니다

[sheepdog13]

수고하셨습니다 headers는 왜 필요한가요?

[future9061]

데이터 양식이 유효하지 않다는 422 에러 때문에 넣었었는데요!
대부분 json 형식의 데이터를 주고 받으니 앞으로는 axios defaults 값으로 넣으려고 합니다!