🌐

API 통신 찍먹하기

•

일자 : 2022년 12월 19일

•

강연자 : 승연

1. 실습 진행 전 알아야 할 지식

HTTP 요청 구조

2. 실습 진행

2-1. 포스트맨으로 API 테스트 하기

2-2. axios로 서버와 통신 해보기

axios 실습 코드

1. 실습 진행 전 알아야 할 지식

HTTP 요청 구조

이미지 출처: HTTP Request / Response 메시지 구조

2. 실습 진행

2-1. 포스트맨으로 API 테스트 하기

회원 가입 (O)

로그인 (O)

프로필 정보 불러오기 (O)

게시글 쓰기 (O)

게시글 좋아요 (O)

게시글 좋아요 취소 (O)

2-2. axios로 서버와 통신 해보기

로그인 해보기 (O)

내가 쓴 게시글 목록 확인하기 (O)

상대방 게시글에 댓글 달아보기 (O)

axios 실습 코드

import axios from 'axios';
import React from 'react';

const TestAPI = () => {
  const loginAPITest = () => {
    // TODO: 서버와 통신해서 로그인 진행
    const option = {
      url: 'https://mandarin.api.weniv.co.kr/user/login',
      method: 'POST',
      headers: { 'Content-type': 'application/json' },
      data: {
        user: {
          email: 'daengnyang@market.com',
          password: 'daengnyang2022',
        },
      },
    };

    axios(option)

      .then((res) => {
        if (res.data.status === 422) {
          console.log('아이디랑 비밀번호를 확인해주세요');
          return;
        }

        console.log(res.data.user.username + '님 안녕하세요!');
      })
      .catch((err) => {
        console.error(err);
      });
  };

  const getPostAPITest = () => {
    // TODO: 나의 게시글 목록 가져오기
    const option = {
      url: 'https://mandarin.api.weniv.co.kr/post/daengnyang/userpost',
      method: 'GET',
      headers: {
        Authorization:
          'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzOWVlNjE3MTdhZTY2NjU4MWM2ZTY1MCIsImV4cCI6MTY3NjYwMjYyOSwiaWF0IjoxNjcxNDE4NjI5fQ.4EOM-mFmyW2UVgmrPub-f9bafRAhAPe4XXBj64zMqEg',
        'Content-type': 'application/json',
      },
    };

    axios(option)
      .then((res) => {
        if (res.data.post.length === 0) {
          console.log('게시글이 없어요!');
        } else {
          const userPost = res.data.post;

          console.log(userPost);

          userPost.map((post) => {
            console.log('작성자 : ' + post.author.username);
            console.log('글 내용 : ' + post.content);
          });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  const writeCommentAPITest = () => {
    // TODO: 게시글에 댓글 달기
    const option = {
      url: 'https://mandarin.api.weniv.co.kr/post/639fbef317ae666581c736d7/comments',
      method: 'POST',
      headers: {
        Authorization:
          'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzOWVlNjE3MTdhZTY2NjU4MWM2ZTY1MCIsImV4cCI6MTY3NjYwMjYyOSwiaWF0IjoxNjcxNDE4NjI5fQ.4EOM-mFmyW2UVgmrPub-f9bafRAhAPe4XXBj64zMqEg',
        'Content-type': 'application/json',
      },
      data: {
        comment: {
          content: '댓글 테스트',
        },
      },
    };

    axios(option)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  };

  const readCommentAPITest = () => {
    // TODO: 댓글 확인하기
    const option = {
      url: 'https://mandarin.api.weniv.co.kr/post/639fbef317ae666581c736d7/comments',
      method: 'GET',
      headers: {
        Authorization:
          'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzOWVlNjE3MTdhZTY2NjU4MWM2ZTY1MCIsImV4cCI6MTY3NjYwMjYyOSwiaWF0IjoxNjcxNDE4NjI5fQ.4EOM-mFmyW2UVgmrPub-f9bafRAhAPe4XXBj64zMqEg',
        'Content-type': 'application/json',
      },
    };

    axios(option)
      .then((res) => {
        const commentInfo = res.data.comments;

        commentInfo.map((comment) => {
          let createdDate = new Date(comment.createdAt);
          let year = createdDate.getFullYear();
          let month = createdDate.getMonth() + 1;
          let date = createdDate.getDate();
          let hour = createdDate.getHours();
          let min = createdDate.getMinutes();
          let sec = createdDate.getSeconds();

          console.log('작성자 : ', comment.author.username);
          console.log(`작성 시간 : ${year}년 ${month}월 ${date}일 ${hour}시 ${min}분 ${sec}초`);
          console.log('댓글 내용 : ', comment.content);
        });
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <>
      <button onClick={loginAPITest}>로그인 API 테스트</button>
      <button onClick={getPostAPITest}>게시글 목록 API 테스트</button>
      <button onClick={writeCommentAPITest}>게시글에 댓글 달기 테스트</button>
      <button onClick={readCommentAPITest}>댓글 목록 확인하기</button>
    </>
  );
};

export default TestAPI;
JavaScript
복사