FormData 콘솔 로그 찍으면 안찍힘.. 나는 데이터 추가가 안되는줄 알았다

FormData

단순한 객체가 아닌 XMLHttpRequest 전송을 위해 설계된 특수한 객체 형태 → 문자열화 할 수 없어서 콘솔로그 안됨

확인하고 싶으면

// FormData의 key 확인
for (let key of formData.keys()) {
  console.log(key);
}

// FormData의 value 확인
for (let value of formData.values()) {
  console.log(value);
}

와 같이 확인해야 한다..!!

그룹 생성에서 req.body에 대한 api 정리한거에서 req.file로 이거 온다고도 명시해야함

메인 화면 내 그룹 스터디 목록 불러오기

기존 코드

export default function MyGroup() {
  let myGroups;
  useEffect(() => {
    const getMyGroups = async () => {
      const res = await API.get('/group/studyGroups/users');
      myGroups = res.data.study_groups;
    };
    getMyGroups();
  }, []);
  console.log(myGroups);
  return (
    <section>
      <h2 className="font-bold text-2xl">내가 속한 그룹</h2>
      <div>
        <Swiper slidesPerView={3} spaceBetween={10} className="swiper_custom">
          {myGroups?.map((item, index) => (
            <SwiperSlide key={index} className="">
              <GroupItem imagePath={item.group_image_path} subject={item.name} />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
}

이렇게 하면

이 코드에서 myGroups 변수는 useEffect 함수 내에서 선언되고, getMyGroups 함수 내에서 비동기 방식으로 데이터를 가져오는데 사용됩니다. 그러나 getMyGroups 함수가 비동기로 동작하고, useEffect 함수도 비동기 작업이 완료되기 전에 실행됩니다. 이로 인해 myGroups 변수가 초기화되기 전에 console.log(myGroups) 및 JSX에서 **myGroups**를 사용하려고 시도할 수 있으며, 결과적으로 **myGroups**는 **undefined**로 출력됩니다.

이런 문제가 발생할 수 있음!

아직도 변수에 대한 개념이 헷갈리나보다,,,

useState 사용해서 처리해야함 ㅜㅜ

메인 화면에서 내가 속한 그룹 사진 불러올때 profileImg에서 불러오고 있음 groupImg로 수정해야함