[JS] API 만들기

API란

Application Programming Interface의 약자이다. 우리가 프로그래밍을 할 때 지켜야 할 규칙을 가진 모듈이라고 이해하면 간단하다.

API는 대부분 RESTFul하게 작성이 된다. 우리의 프로그램이 무언가를 요청하거나 변화(CRUD)를 요청할 때, 그에 알맞게 URL에 대응(Method)을 해주어 만들어지는 자원(Resource)을 얻는 것을 RESTful하다고 한다.

로그인 API를 만들기 위해서는 다음과 같은 과정을 거쳐 유저를 만들게 된다.

• 1. api method가 POST인지 확인을 한다.
• 2. request의 body에 필요한 값(email, password 등)이 전부 들었는지 확인한다.
• 3. 패스워드를 검사한다.
• 4. 추가된 유저의 정보와 token을 전달한다.

pages/api/auth/login.ts 경로에 파일을 만들게 하고 코드를 작성해보자.

//pages/api/auth/login.ts
const login = async ({ request, response }) => {
  if(request.method === "POST"){
    try{
      const { email, password } = req.body;
      if(!emiail || !password) {
        res.statusCode = 400;
        return res.send("필수 데이터가 없습니다.");
      }
      
      const user = getUser({ email }); //이메일을 가진 유저의 정보를 가져온다.
      //입력된 비밀번호와 유저 비밀번호를 복호화해서 비교한다.
      const isPasswordMatched = passwordFunc(password, user.password); 
      if(!isPasswordMatched) {
        res.statusCode = 403;
        return res.send("비밀번호가 일치하지 않습니다.");
      }
      
      const token = jwt.sign(String(user.id), process.env.JWT_SECRET!);
      //현재 시각을 기준으로 3일 뒤 만료되는 토큰을 /라는 경로에 쿠키로 저장한다. 
      res.setHeader(
        "Set-Cookie",
        `access_token=${token}; path=/; expires=${new Date(
          Date.now() + 60 * 60 * 24 * 1000 * 3 //3일
        )}; httponly`
      );
      
      //Partial과 Pick으로 password의 타입이 StoredUserType의 부분집합이게 설정.
      const userWithoutPassword: Partial<Pick<StoredUserType, "password">> = user;

      //응답할 유저 정보에서 password를 제거한다. (보안때문에!)
      delete userWithoutPassword.password;
      res.statusCode = 200;
      return res.send(user);
    }
  }
}

이제 만든 API를 사용하기 좋게 함수로 만들어주자!

// lib/api/auth.ts
export const loginAPI = (body: { email: string; password: string }) => 
  axios.post<UserType>("/api/auth/login", body);

아주 간단하게 이제 loginAPI를 사용할 수 있다. 로그인 버튼을 눌렀을 때 email과 password를 이용하여 사용하는 함수를 만들어보자.

const onSubmitLogin = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        if(!email || !password) {
            alert("이메일과 비밀번호를 입력해주세요.");
        } else {
            const loginBody = { email, password };

            try {
                const { data } = await loginAPI(loginBody);
                console.log(data);
            } catch (e) {
                console.log(e);
            }
        }
    };

로그인 폼에서 이메일과 비밀번호를 바르게 입력했다면, 콘솔 창에 유저 정보가 뜨는 것과 쿠키에 access_token 값으로 token값이 저장되어 있는 것을 확인할 수 있다!

어렵게 생각했던 API를 따라 만들어보고 글도 작성하면서 이해가 잘되었다. 다른 api도 순서대로 만들 수 있을 것 같으니 성공적인 학습이었다!