◼ API 문서

서버 API URL

https://api.example.com

회원가입

아이디, 비밀번호, 닉네임으로 DB에 회원정보를 저장.

• Request

  • Method: POST

  • URL PATH: /register

  • Body (JSON):

    JSON
    {
        "id": "유저 아이디",
    		"password": "유저 비밀번호",
    		"nickname": "유저 닉네임"
    }

• Response

  {
    "message": "회원가입 완료",
    "success": true
  }

로그인

아이디와 비밀번호 일치 시 accessToken, userId, avatar, nickname 총 4가지 유저 정보를 응답.

• Request

  • Method: POST

  • URL PATH: /login

  • Body (JSON):

    JSON
    {
      "id":"유저 아이디",
      "password": "유저 비밀번호"
    }

• Query String (선택): accessToken 유효시간 조정을 위해 사용함.
  • 미기입 시 기본 1시간 설정.
  • expiresIn 파라미터로 시간 단위(s, m, h) 지정 가능. (ex. 10s, 10m, 10h)
  • TIP: 토큰 만료 후 자동 로그아웃 로직을 테스트할 때 유용함.
  • 예시: /login?expiresIn=10m (유효시간 10분 요청)
• Response

  {
    "accessToken": "eyJhbGciOiJIUzI1Ni...",
    "userId": "유저 아이디",
    "success": true,
    "avatar": "프로필 이미지 URL",
    "nickname": "유저 닉네임"
  }

회원정보 확인

accessToken이 유효한 경우, 비밀번호를 제외한 본인 정보를 응답함.

// authorization 속성 정의
const response = await axios.get(`${BASE_URL}/user`, {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${accessToken}`,
  },
});

• Request
  • Method: GET
  • URL PATH: /user
  • Header:

    {
    	"Authorization": "Bearer AccessToken"
    }

• Response

  {
    "id": "사용자 아이디",
    "nickname": "사용자 닉네임",
    "avatar": null,
    "success": true
  }

프로필 변경

accessToken이 유효한 경우, FormData를 통해 이미지나 닉네임 수정 가능. 수정 완료 후 변경된 정보를 응답함.

// 이미지파일을 FormData에 담는 방법

const formData = new FormData();
// avatar와 nickname 중 하나 또는 모두 변경 가능
formData.append("avatar", imgFile);
formData.append("nickname", nickname);

// 요청 시 Content-Type에 유의
const response = await axios.patch(`${BASE_URL}/profile`, formData, {
  headers: {
    "Content-Type": "multipart/form-data",
    Authorization: `Bearer ${accessToken}`,
  },
});

• Request
  • Method: PATCH
  • URL PATH: /profile
  • Header:

    {
    	"Authorization": "Bearer AccessToken"
    }

  • Body (Form-Data):

    {
    	"avatar": [이미지파일],
    	"nickname": "변경할 닉네임"
    }

• Response

  {
    "avatar": "변경된 이미지 URL",
    "nickname": "변경된 닉네임",
    "message": "프로필이 업데이트되었습니다.",
    "success": true
  }

◼ Thunder Client

HTTP 요청을 보내고 응답을 확인할 수 있는 API 테스트 도구.
VS Code 내부에서 API 요청 테스트 및 디버깅 가능.

설치방법

VS Code Extensions에서 [thunder Client] 검색 후 설치 → 사이드바의 아이콘 선택

기본 사용 방법

1. New Request 클릭
2. 원하는 HTTP Method 선택 및 URL 입력
3. Payload가 필요할 경우 Body에 추가
4. [Send]를 눌러 응답 확인