항해99 8주차 WIL / api연결

실전 프로젝트가 시작됨으로써 걱정했던 부분은 현실이 되가는거같고
ㅠㅠ
프론트 고인물들 사이에서 뉴비 김정후는 꼬르르르륵....

백 3: 프론트 3 구성으로
해외에서 유학하는 한국인 유학생들을 위한 커뮤니티를 만들기로 했고
한인회 및 학생회장을 뽑을 수 있는 투표기능을 넣ㅇ어 만들기로했다

세계 모든 학교가 아닌 일부 학교만을 우선 시작했다(미국,영국,호주,베트남,캐나다)

디자이너가 주는 프레임워크 받기전에 일단 기능 구현부터 했다

백엔드와 통신은 axios를 통해서 했다

// Axios 인스턴스 설정
const instance = axios.create({
    baseURL: "https://yzkim9501.site/",
    // baseURL: "https://api.ufo.town/",
});

baseURL을 설정해주고 나서
url + api연결을 했다

export const univBoardApi = {
    //UnivBoard 목록 불러오기
    getList: data => {
        return instance.get("/univ/post", {
            params: {
                pageNum: data.pageNum,
                pageSize: data.pageSize,
                univ_id: data.univ_id,
                category: data?.category,
            },
        });
    },

그다음에 비동기처리를 위해 try/catch문을 사용했다

export const getUnivBoardDB = createAsyncThunk(
    "univBoard/getUnivList",
    async (data, thunkAPI) => {
        try {
            // 게시물 조회 요청
            const response = await univBoardApi.getList(data);
            if (response.data.ok) {
                return response.data;
            } else if (!response.data.ok) {
                return thunkAPI.rejectWithValue(response.data.message);
            }
        } catch (error) {
            Swal.fire(
                "에러",
                "네트워크 오류가 발생했습니다. 다시 시도해주세요",
                "error",
            );
            history.push("/");
            return thunkAPI.rejectWithValue(error.response.data.message);
        }
    },
);

그 다음에는
이 api연결이 필요한 컴포넌트에서

import { getUnivBoardDB } from "../../Redux/Async/univBoard";

import를 해주고
page에 들어오면 useEffect가 되도록 코드를 만들었다

// 현재 페이지가 변하면 useEffect 발동, 다음 페이지 대학 게시글 요청
    useEffect(() => {
        // 유저가 대학교 아이디 값을 가지고 있을 경우에만 실행
        if (univId) {
            if (selectedTag === null) {
                const univBoardQueryDB = {
                    pageSize: 10,
                    pageNum: page,
                    univ_id: univId,
                };
                dispatch(getUnivBoardDB(univBoardQueryDB));
            } else {
                const univBoardQueryDB = {
                    pageSize: 10,
                    pageNum: page,
                    univ_id: univId,
                    category: selectedTag,
                };
                dispatch(getUnivBoardDB(univBoardQueryDB));
            }
        }
    }, [dispatch, page, univId, selectedTag]);

pageSize, pageNum, univ_id 값을 서버에 보내줘야해서 data값에 실어 보내준다.
이게 univBoard 리스트 불러오는 api통신이였고

이번주는 이거만 쩔쩔 맷어서 이거만 기억난다
많이 해봐야지!!