fetch3 React / 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 데이터가 들어오기 전에는 값을 출력하지 않고 다시 데이터를 요청하도록 구현하려는 기능 네비게이션에 서버에서 받아온 userdata를 활용해서 포인트와 상품 수량 출력 내가 생각한 로직 1. 서버에서 받아오는 유저 데이터는 계속해서 값이 변하기때문에 useState를 사용해서 관리한다. 2. fetch를 사용하여 서버에서 데이터를 받아온다. 3. 받아온 데이터를 state에 저장하고 각각의 데이터를 쓰임에 맞게 가공해서 변수로 선언한다. 처음 작성했던 코드 (오류 발생) useEffect(() => { fetch("http://10.58.52.169:9001/users", { method: "GET", header.. 2023. 5. 17. React / 토큰 유무에 따른 조건부 랜더링 / token undefined가 true로 인식되는 오류 해결 토큰 유무에 따른 조건부 랜더링 token undefined가 true로 인식되는 오류 해결 구현하려는 기능 토큰 유무에 따라 조건부 랜더링으로 다른 결과값 출력 내가 생각한 로직 1. 로그인 버튼을 누르면 fetch가 실행되면서 서버로 요청을 보낸다. 2. 서버로부터 받은 토큰을 localStorage에 저장한다. 3. localStorage에 저장한 토큰을 변수로 저장한다. 4. 변수로 저장된 토큰의 값으로 토큰 유무를 판별하여 조건부 랜더링을 한다. 처음 작성했던 코드 (오류 발생) const token = localStorage.getItem("TOKEN"); const loginOn = () => { fetch("http://10.58.52.169:9001/users/logIn", { metho.. 2023. 5. 17. React/ part.3 Mock Data Mock Data 이번 글에서는 이전 글인 상수데이터에 이어 Mock Data에 대한 개념과 활용방법에 대해 다룹니다. 또한 fetch 메서드를 사용해 로컬 서버에서 Mock data를 받아와 활용하는 방법에 대한 내용이 있습니다. 1. Mock Data란? 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다. UI 구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 때, 데이터가 들어오는 상황에 대비해 의도한 대로 UI가 구현되는지 확인하기 위해 사용한다. ⇒ Mock data를 fetch를 사용해 실제로 서버에서 받아오는 것처럼 사용한다. 2. Mock Data를 사용하는 이유 백엔드 API가 미완성인 경우 Mock Data를 사용하지 않.. 2023. 4. 29. 이전 1 다음
