[새싹X코딩온] 2차 프로젝트 (4)

Sohee Kwon·2024년 1월 4일

부트캠프 새싹 코딩교육 코딩온 프로젝트

[SeSAC] 풀스택 웹 개발자 과정

목록 보기

12/17

2024-01-03 (9일차)

📌 To Do

유기동물 API

💡 Try

공공데이터 API

유기동물 현황 API : https://www.data.go.kr/data/15098931/openapi.do#/tab_layer_detail_function

공공데이터를 이용해 유기동물 정보를 axios get요청으로 받아서 정보를 가공해서 프론트에 넘겨줌

현재는 get 요청으로 받은 정보를 그대로 보내주는 거라 DB에 저장은 하지 않았는데 만약 데이터를 활용한다면 저장 할 예정(?)

originData 로 원본 데이터를 받고, 불필요한 정보나 문자열을 없애기 위해 filter 함수와 replace 함수를 사용

async function apiAnimal() {
const data = [];
const apiUrl = `https://apis.data.go.kr/1543061/abandonmentPublicSrvc/abandonmentPublic?bgnde=20211201&endde=20211231&pageNo=1&numOfRows=100&serviceKey=${apiKey}&_type=json`;

try {
  const getApi = await axios.get(apiUrl);
  const originData = getApi.data.response.body.items.item;
  const parsedData = originData
    .filter((item) => item.kindCd.startsWith("[개]"))
    .map((item) => {
      const onlyDogKindCd = item.kindCd.replace("[개] ", "");
      return {
        kindCd: onlyDogKindCd,
        sexCd: item.sexCd,
        age: item.age,
        happenPlace: item.happenPlace,
        popfile: item.popfile,
        specialMark: item.specialMark,
      };
    });
  data.push(...parsedData);
} catch (error) {
  throw error;
}

return data;
}

📃 기록

공공데이터는 이번에 처음 사용해봤는데, 데이터를 단순히 불러오는 것은 인증키만 발급하면 사용하는 방법은 나름(?) 간단했던 것 같다.

원래는 서울시에서 제공하는 공공데이터를 사용하려 했는데, 유기동물 정보와 유기동물 이미지가 나뉘어져 있어 두 데이터를 join해서 사용하려고 보니 없는 이미지가 생각보다 많아서 위에 데이터를 사용하게 되었다.

서울시에서 제공하는 데이터가 더 최신화가 되어 있어서 잘 이용하지 못 한점이 아쉬웠다.

2024-01-04 (10일차)

📌 To Do

session 연결 오류 수정
채팅방 전체 조회

💡 Try

채팅방 조회

프론트분께서 채팅방 리스트를 UI를 만들고 계셨는데, API 명세서를 보시다가 채팅방 메세지 조회는 있는데 채팅방 조회하는 API가 어떤거냐고 물어보셔서 봤는데.....없었다😮 ~~그럼 만들면 되지ㅎ~~
채팅메세지 조회처럼 단순하게 그냥 findAll 함수 사용하면 되겠지 하고 그냥 작성하고 있었는데,
user가 참여하고 있는 모든 채팅방을 다 띄워야 하기 때문에, 먼저 user가 어떤 채팅방들을 참여하고 있는지 userJoinChat 에 push하고
chatRoomList 에 userJoinChat 와 일치하는 채팅방 정보를 push해서 res.send() 로 채팅방 정보를 보냄

// 채팅방 조회
exports.ChatRoomList = async (req, res) => {
  try {
    const userJoinChat = await Chat_Member.findAll({
      where: { user_id: req.session.user },
    });

    let chatRoomId = [];
    for (let chat of userJoinChat) {
      chatRoomId.push(chat.chat_id);
    }

    const chatRoomList = await Chat_Room.findAll({
      where: { chat_id: chatRoomId, chat_category: req.body.chat_category },
    });

    res.send(chatRoomList);
  } catch (error) {
    console.log(error);
    res.send({ result: false, message: "서버 오류 발생" });
  }
};

💣 트러블 슈팅

session cookie

로그인을 하면 session이 생겨서 웹페이지에 애플리케이션에 connect.sid 가 생겨야 하는데, 서버에는 정상적으로 세션이 생성되는데, 프론트에는 세션이 생기지 않는 오류 발생😡
- cors 설정에서 쿠키 허용 설정을 안 해서 발생 -> 쿠키 허용 설정 해결
  💥
Back-End 측

app.use(cors({ origin: true, credentials: true }));

Front-End 측

const response = await axios.post(‘http://localhost:8000/user/signin’, user, {
        withCredentials: true,
});

도메인이 다른 클라이언트가 쿠키 값을 보내고 싶으면, 클라이언트에선 credentials 옵션 설정을 넣어주어야 하고, 서버에서도 cors 설정에서 credentials: true 로 옵션을 둘다 설정해주어야 한다.
axios에서도 도메인이 다른데, 쿠키를 공유해야 하는 경우 withCredentials: true 옵션으로 요청을 보내야 한다.