API란 무엇인가요

이번에 팀 프로젝트로 웹 서비스를 개발하면서, API에 대한 지식이 필요하다고 느껴 공부해본 바를 적고,

실제 팀 프로젝트에서 어떻게 활용했는지 기록함

API의 정의

API는 Application Programming Interface의 줄임말로, 두 어플리케이션의 구성 요소가 서로 통신할 수 있게 하는 메커니즘.

인터페이스는 두 어플리케이션 간의 서비스 계약이라고 보면됨.

즉, 두 어플리케이션이 서로 통신하는 방법을 정의하고, API문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 있다.

클라이언트와 서버

API는 일반적으로 클라이언트와 서버 측면에서 설명됨.

요청을 보내는 쪽을 Client, 응답을 보내는 쪽을 Server라고 한다.

REST API

API의 4가지 작동 방식 중 하나이다.

Representational State Transfer의 줄임말로, REST는 클라이언트가 서버 데이터에 액세스하는 데 사용할 수 있는 함수 집합을 정의한다. 클라이언트와 서버는 HTTP를 사용하여 데이터를 교환한다.

클라이언트가 서버에 요청을 데이터로 전송하고, 서버가 이 클라이언트의 입력을 사용하여 내부 함수를 시작하고, 출력 데이터를 다시 클라이언트에 반환한다.

 

---

팀 프로젝트에서 회원가입 기능 만들어봄(API 호출)

웹 서비스 개발 시 가장 기본적인 기능 중 하나는 회원가입과 로그인 기능으로 알고있음.

이번에 프로젝트를 진행하면서 처음 만든 기능이 회원가입 기능이다.

목표는 간단쓰 ㅋ

1. 프론트엔드에서 폼을 이용해, 사용자로부터 유저 데이터를 받는다.
2. API를 호출한다.
3. 백엔드 서버로 데이터를 전송해, DB에 저장한다.

나는 React를 담당하므로 프론트 코드 일부분만 보여드림

  const [userID, setuserID] = useState("");
  const [userPW1, setuserPW1] = useState("");
  const [userPW2, setuserPW2] = useState("");
  const [userNickName, setuserNickName] = useState("");
  const [userName, setuserName] = useState("");
  const [userTrack1, setuserTrack1] = useState("");
  const [userTrack2, setuserTrack2] = useState("");

  const navigate = useNavigate();

  //서버로 데이터 보내는 함수(예시로 작성한 것임)
  async function sendUserInfo() {
    //비동기 처리(async)
    try {
      const response = await axios({
        url: "/api/members/register",
        method: "post",
        data: {
          username: userID,
          password: userPW1,
          nickname: userNickName,
          name: userName,
          track1: userTrack1,
          track2: userTrack2,
        },
        baseURL: "http://localhost:8080",
      });

      if (response.data) {
        console.log("회원가입 성공");
        //회원가입 성공 시, 로그인 페이지로 리디이렉션
        navigate("/login");
      } else {
        console.log("회원가입 실패");
        //회원가입 실패 시, 오류 메시지 표시
        alert(response.data.message);
      }
      console.log(response.data);
    } catch (error) {
      console.error("Error sending user info: ", error);
      alert("회원가입 중 오류가 발생. 다시 시도 바람");
    }
  }

 

React 프레임워크를 사용했고, Axios라는 API라이브러리를 사용했다.

 

API를 요청하는 부분을 봐보면..

const response = await axios({
  url: "/api/members/register",
  method: "post",
  data: {
    username: userID,
    password: userPW1,
    nickname: userNickName,
    name: userName,
    track1: userTrack1,
    track2: userTrack2,
  },
  baseURL: "http://localhost:8080",
});

1. url : API 엔드포인트의 URL을 지정한다
2. method : HTTP메소드를 지정한다. 여기서는 post방식임
3. data : 서버로 전송할 데이터를 객체 형태로 지정
4. baseURL : 기본 URL을 지정한다.

여기서의 API호출은 'axios'라이브러리를 사용하여 비동기적으로 수행되고,

서버로부터의 응답을 response변수에 저장함.

 

엔드포인트 : 요청을 처리하는 서버의 경로, 여기선 "/api/members/register"이 처리하는 서버 경로

POST요청 : HTTP프로토콜의 한 종류, 클라이언트가 서버로 데이터를 전송하도록 요청할 때 사용