[에러 일지] bundle.js에서 찍히는 console.log & stack overflow api에서 IP 차단

uxolrv·2022년 10월 29일

❗️ 문제 1 : bundle.js에서 console.log가 찍히는 문제

Stackoverflow API에서 Tag값을 받아오는 과정에서 console.log가 여러 번 찍히는 현상을 발견하였다.

🔎 시도

처음에는 useEffect를 안써서 렌더링이 여러번 되는구나 싶어서 useEffect를 추가하였다.

  useEffect(() => {
    fetch('https://api.stackexchange.com/2.3/tags?order=desc&sort=popular&site=stackoverflow')
      .then(res => res.json())
      .then(data => console.log(data));
  }, []);

그러나 여전히 console.log가 여러 번 찍히는 것을 확인...🥲
심지어 자세히 보니 작업하던 파일에서 찍히는 것도 아니고 bundle.js에서 찍히고 있었다.

우선 bundle.js에서 console.log가 찍히는 문제부터 해결하고자, 구글링해보니 webpack.config.js 파일에 아래의 코드를 추가하면 된다고 하여 추가해보았다.

module.exports = {
  devtool: '#eval-source-map',
};

그러나... 실패

✨ 해결

개발자도구 - 환경설정 - 소스 - 자바스크립트 소스 맵 사용 설정을 체크하니 bundle.js에서 console.log가 찍히는 문제가 해결되었다!

❗️ 문제 2 : console.log가 여러 번 찍히는 문제

useEffect로 한번만 렌더링 되도록 설정을 했는데 왜 여러번 찍히는 걸까 고민하다가,

왜 하필 8번이 찍힐까???
20번 찍힐 수도 있고, 100번 찍힐 수도 있는데 왜 하필 8번???
왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번???? 왜??? 8번????

생각하다가 깨달았다....

✨ 해결

function SearchTag() {
  useEffect(() => {
  fetch('https://api.stackexchange.com/2.3/tags?order=desc&sort=popular&site=stackoverflow')
    .then(res => res.json())
    .then(data => console.log(data));
  }, []);

  return (
    <Container>
      <Nav />
      <ContentContainer>
        <TagsHeader />
        <TagBoxGrid>
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
          <TagBox />
        </TagBoxGrid>
      </ContentContainer>
    </Container>
  );
}