[LAB-5] firebase에서 데이터를 불러오는 문제 (with localhost → 127.0.0.1 구동 이슈)

문제 상황

처음 카드 클릭시에는 괜찮으나, 두번째부터 카드 클릭시 콘솔창에 에러가 뜨는데 해결이 안됩니다.. (mapData는 지도데이터 변수를 뜻합니다) twice

검색 전, 카드 클릭시에는 콘솔창에 에러가 떴지만 그래도 UI화면은 나왔으나,
검색을 한 후에 카드를 클릭하면 모달창에 UI가 아예 뜨지를 않고, 아까 떴던 동일한 콘솔창 에러가 뜹니다... search

다른 팀원들은 구글로그인이 잘되는데, 저만 저런에러가 나면서 로그인이 되지 않았는데 해결을 했습니다..! => 주소를 http://127.0.0.1:3000/이 아닌 localhost:3000으로 바꾸니까 작동이 되는데,
npm start구동할때 자동으로 localhost:3000으로 주소가 뜨게하는 방법이 있을까요?
저는 자꾸 디폴트 값이 127로 시작하는 ip주소가 됩니다..

프로젝트 저장소 URL

현재 파일 위치

src파일 : src.zip

로그인은 구글로그인 혹은 아이디 : babjo@naver.com / 비번: aaaa1111 입니다.

.env파일에 작성하시면 되는 코드를 아래에 적어드립니다.

VITE_API_KEY = AIzaSyB-16F5fhuvgb5lKC6618iuSZPvEOwWhLk VITE_AUTH_DOMAIN = calkolab5.firebaseapp.com VITE_PROJECT_ID = calkolab5 VITE_STORAGE_BUCKET = calkolab5.appspot.com VITE_MESSAGE_SENDER_ID = 869641050054 VITE_APP_ID = 1:869641050054:web:0d0b56dac5093949fdc4c7 VITE_MEASUREMENT_ID = G-LCH8VZEKV3 VITE_SERVICE_KEY=M4E1Vdrm%2Ba%2FjVfatJPdEbBibLbYBeDaGm7tgF%2BxisSinPYTEEBDkFgSO0gmqjAZGOzfrSffYbsOF3XshtdL6lg%3D%3D VITE_KAKAO_API_KEY=ebf9334d7db030f4f026a0d53f08a62a

문제 원인

데이터를 참조하는 변수가 null 또는 undefined일 가능성을 고려하지 않고 코드를 작성했기 때문입니다. 🥺
localhost가 아니라, 127.0.0.1로 구동되는 이유는 사용 중인 Node.js 버전이 17보다 낮기 때문입니다. 😳

문제 해결

데이터를 참조하는 변수가 null 또는 undefined일 가능성을 고려해 설계하세요. 🤔

AuthContext

useEffect(() => {
  const unSub = onAuthStateChanged(auth, (user) => {
    setCurrentUser(user);

    // user가 존재하지 않을 수 있으므로 존재할 경우에만 로컬 스토리지에 저장한다.
    if (user) {
      localStorage.setItem('navUid', user.uid);
    }
  });

  return unSub;
}, []);

ShowCard

useEffect(() => {
  async function fetchAndSetCard() {
    // cards[0] 데이터가 undefined일 가능성이 있으므로 아래와 같이 조건 처리한다.
    if (cards[0]) {
      const mapPosition = cards[0].mapData;
      setMapData(mapPosition);
    }
  }
  fetchAndSetCard();
}, [cards, setMapData]);

수정된 코드를 기반으로 작동하는 애플리케이션 영상입니다. cards[0] 데이터가 undefined일 경우, 정상적으로 작동되지 않습니다. 해당 문제는 cards 데이터 흐름을 분석해 해결해보세요.

https://user-images.githubusercontent.com/1850554/230697290-245511f3-27ff-4485-9b4b-c0b24586f212.mp4

Node.js 버전 업그레이드

Vite 서버 옵션(Server Options) 문서를 참고하면 Node.js 버전이 v17 미만인 경우 기본적으로 DNS로 확인된 주소 결과를 재정렬 합니다. localhost에 접근할 때 웹 브라우저는 DNS를 사용해 주소를 확인하며, 해당 주소는 Vite가 수신하고 있는 주소와 다를 수 있습니다.

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인해보세요. 😃

React-Project-lab5__confirm-by-yamoo9.zip

yamoo9 / likelion-FEQA