분류 전체보기101 7주차 WIL(Axios, Thunk, React-Query란) Axios 요약 JavaScript와 Node.js에서 HTTP 요청을 만들고 처리하기 위한 라이브러리로, 클라이언트 사이드에서 서버로 데이터를 가져오거나 보낼 때 주로 사용 장점 1. 다양한 HTTP 요청을 지원하며, 커스터마이징이 용이 2. 널리 사용되고 문서화가 잘 되어 있어, 쉽게 사용할 수 있음 단점 1. 비동기 코드 작성 및 관리가 복잡할 수 있음 2. 상태 관리를 위한 별도의 라이브러리가 필요 언제 쓰는 것이 좋은가? 1. 단순한 HTTP 요청을 처리하거나, 다른 상태 관리 라이브러리 없이 데이터를 가져와야 할 때 2. 프로젝트가 Redux나 React-Query를 사용하지 않는 경우 Thunk 요약 Redux와 함께 사용되는 미들웨어로, 비동기 작업을 처리하는 데 주로 사용 장점 1. Re.. 2023. 9. 26. 33일차 (트러블 슈팅: React-Query 사용 시 데이터 로딩 문제) 검색 기능을 구현하는 상황에서 제목과 같은 문제가 발생하였다. 처음에는 API의 URI는 /api/company?name=와 같았고, 아래와 같은 useQuery를 통해 companyName을 보내고 get 메서드를 사용해 데이터를 받아오는 방법을 사용하였다. // 상태관리 const [searchCompanies, setSearchCompanies] = useState([]) const {data} = useQuery("search", () => searchCompany(companyName), => 이후 setSearchCompanies(companyName)를 하여 searchCompanies 구성 검색 버튼을 누르자마자 데이터가 들어오기를 기대하고 사용했지만, 이전에 companyName의 데이터.. 2023. 9. 24. 32일차 (페이지네이션) 페이지네이션을 백엔드에서 구현할 수 있었지만, 프론트엔드에서도 구현할 수 있다는 사실을 알고, 미니 프로젝트를 진행하면서 구현해 보았다. 기본 설정은 yarn add react-paginate을 통해 react-paginate을 사용하였다. 상태관리하기(회사 데이터를 다루기 때문에 companies를 사용함) 데이터를 리스트에 담고 원하는 개수만큼 출력해야 하고, 한 페이지에 출력해야 하는 페이지 수를 관리해야 하기 때문에 useState를 통해서 상태관리를 하였다. // 페이지 네이션 const [companies, setCompanies] = useState([]); const [pageNumber, setPageNumber] = useState(0); useState(data)를 사용해 상태관리 u.. 2023. 9. 23. 31일차 (트러블 슈팅: 댓글 작성 이슈) 미니 프로젝트를 진행하면서 이상한 문제가 발생했다. getCookie을 사용하는 모든 page에서 로그를 찍어봤을 때 동일한 Cookie 값이 찍히는데, 새로고침을 하지 않으면 이전 아이디값으로 작성되는 문제였다. 쿠키값도 모두 동일해서 문제의 원인을 찾는데 매우 힘들었다. 몇 시간의 사투 끝에 문제점을 발견했는데, 그것은 Api에서 사용하는 getCookie의 문제였다. 새로고침을 직접 하지 않으면 Api에 token이라는 변수에 저장된 Cookie 값은 이전 값을 유지했기 때문에 발생하는 문제였다. 해결방안 // props를 통해 token 값을 넘겨준다 const addCommentsHandler = (detailId, newComments) => { if (newComments.length ===.. 2023. 9. 22. 이전 1 ··· 11 12 13 14 15 16 17 ··· 26 다음 728x90