2023.4.18.

1.CORS 오류

  const [tagData, setTagData] = useState([]);
  useEffect(() => {
    setTagData(data.data);
  }, []);
  console.log(tagData);
    const [data, setData] = useState(null);
    useEffect(() => {
      axios
        .get(
          'url/tags?page=1&size=20&sortBy=tagId'
        )
        .then(function (response) {
          // 성공한 경우 실행
          setData(response.data);
          console.log(data);
          console.log('wkfwkrehdgksek');
        })
        .catch(function (error) {
          // 에러인 경우 실행
          console.log('왜...에러났지...?');
          console.log(error);
        });
    }, []);

백엔드측에서 서버를 열어주셔서 이런식으로 데이터를 받아오려고 했는데, 계속 오류가 떴다.

 

오류내용과 챗gpt의 답변

서버측에서 Access-Control-Allow-Origin 헤더를 설정해주거나 클라이언트에서 프록시서버를 이용해야 한다는 답변이 왔다.

백엔드측에는 내일 말하기로 하고 일단 프록시서버를 이용해봤는데 또 에러가 났다 ㅜㅜ

알고보니 서버측에서도 프록시서버에 관한 설정이 필요함!!

즉 내가 혼자 고칠 수 있는 것은 없고, 백엔드측과 협의가 필요하다.

 

게다가 포스트맨에서는 연결이 잘 되는데 로컬에서는 연결이 안돼서 고민을 많이 했는데 원래 그렇단다. 방법은 역시 Proxy서버 이용하는것,.,,,

이따 백엔드분들이랑 얘기해서 proxy서버 연결을 고민해봐야할것같다..! 

 

2. 진짜 난리났던 CSS그리드 오류...ㅠㅠㅠ

나는 1:1:1:1로 설정했는데 왜 지 맘대로 비율 바뀌고 난리....???? 별것도 아닌데 힘들었다...

그리고 나는 1050px보다 작아지면 4개의 열을 3개의 열으로 바꾸라고 코드를 짰는데 지 맘대로 850쯤에서 바뀌고 난리난리였다.

챗지피티한테 물어보니 이렇게 해결해줌...

 

나는 챗지피티가 없으면 코드를 짤 수 없다...