[React]Api 명세서 알아보기

Api 명세서 알아보기

api 명세서

- debri 개발을 하면서 사용했던 코드를 다룸

- npm, async-await, axios를 사용

api 명세서 작성 탬플릿

api 이름

• ‘강의 검색 API’ 이면
• 프론트도 ‘searchLectures’ 이런 식으로 작성함

Method

• GET : 데이터 조회
• POST : 데이터 등록
• PUT : 데이터 수정
• PATCH : 데이터 부분 수정
• DELETE : 데이터 제거

Header

• Name : ACCESS-TOKEN

  ‘ACCESS-TOKEN’ 이 변수에 넣어 줘야함

• Desciption: 유저 jwt

  그 변수에 유저 jwt 넣어 줘야함

const headers = {
  "ACCESS-TOKEN": `${JSON.parse(localStorage.getItem("userData")).jwt}`,
  Accept: "application/json",
  "Content-Type": "application/json",
};

Body

(1.5 이메일 인증 API 참고)

`URL`,JSON.stringify({변수:값, 변수:값, 변수:값})

async function postData(id) {
  try {
    const response = await axios.post(
      `/api/auth/authEmail`,
      JSON.stringify({
        email: id, //이 부분이 body, 변수는 email
      }),
      { headers }
    );
  } catch (error) {
    console.error(error);
  }
}

Query String

(7.5.1 로드맵 상세 조회 API 참고)

`URL?변수=${값}&변수=${값}&변수=${값}`

const getRoadmapDetail = async (mod) => {
  try {
    const response = await axios.get(
      `/api/lecture/roadmap/view?mod=${mod}`, //이 부분이 Query String, 변수는 mod
      { headers }
    );
    setRoadmap(response.data.result[0]);
  } catch (e) {
    console.log(e);
  }
};

Path Variable

(2.1 게시판 즐겨찾기 생성 API 참고)

`URL/${변수}`

async function scrapBoard(boardIdx) {
  try {
    const response = await axios.post(
      `/api/board/scrap/${boardIdx}`, //이 부분이 Path Variable
      JSON.stringify({}),
      { headers }
    );
  } catch (error) {
    console.error(error);
  }
}

리액트 전체 코드

1. 변수 선언 (결과값, 로딩 중, 에러)
2. Header 코드
3. async-await, axios로 api 호출
4. useEffect 사용하여 제일 먼저 api 호출되게 함

예시 : Query String + Path Variable
(3.7.2 [특정 게시판(키워드 검색)] 게시물 리스트 조회 api 참고)

function Timetable() {
  const [searchResult, setSearchResult] = useState(null);
  const [loading, setLoading] = useState(false); // 로딩되는지 여부
  const [error, setError] = useState(null); //에러

  const headers = {
    //Header 코드
    "ACCESS-TOKEN": String(JSON.parse(localStorage.getItem("userData")).jwt),
    Accept: "application/json",
    "Content-Type": "application/json",
  };

  const SearchPost = async (boardIdx, key) => {
    try {
      setError(null);
      setLoading(true);
      const response = await axios.get(
        `/api/post/boardPostList/${boardIdx}/${pageNum}?key=${key}`, //${boardIdx}/${pageNum}는 Path Variable, ?key=${key}는 Query String
        { headers }
      );
      setSearchResult(response.data.result);
    } catch (e) {
      setError(e);
    }
    setLoading(false);
  };

  if (loading) return <div>로딩중..</div>;
  if (error) return <div>에러 발생!!</div>;

  useEffect(() => {
    SearchPost(); //useEffect 안에 있는 코드가 제일 먼저 실행됨
  }, []);
}
export default Timetable;