axios - post | 회원가입

우리가 보내는 요청 중에 바뀌지 않는 정보

서버의 도메인 주소
http관련 공통적으로 적용할 속성 - 캐시, 데이터 형식 등

일반적으로 인스턴스를 생성하는 것이 서버와 연결하기 편하다.
(파일로 따로 생성해야함)

인스턴스 생성

//authInstance
import axios from 'axios';

const BASE_URL = 'http://주소';

export const baseInstance = axios.create({
  // withCredentials: true,
  baseURL: BASE_URL, // 기본 URL 설정
});

//axios대신 baseInstance

baseInstance 사용하기전

const signUp = async (info: { id: string; password: string }) => {
    try {
      const response = await axios.post('http://주소/register', info);

      if (response.status === 201) navigate('/');
    } catch (error) {
      alert(error.response.data.message);
    }
  };

baseInstance를 설정했기 때문에 post('주소',정보) 이렇게 쓸 필요가 없어졌다.

회원가입

1. 비동기 처리 틀 만들기

const signUp =async (info: { id: string; password: string }) => {
    try {
      const response = await baseInstance.post('/user/signup',info);

      console.log(response); // response가 잘 들어왔는지 확인
      
    } catch (error) {
      console.log(error)
    }
  }

2. 사용자가 입력한 값을 id, password에 할당

const data = {
    id: idInput,
    password: pwInput,
  };

• 확인 버튼 눌렀을 때 위에서 할당한 값들을 signUp 함수로 전달
  signUp(data);

• id, pw 정보를 info로 받고 이 info를 post(서버에게 보냄)

• post하면 response를 받는데 그 response값을 response객체에 할당

• 그리고 그 response가 잘들어왔는지 console로 확인

간단한 듯 어려운 듯 간단한데 결론은 어려움....