Projects/Project2 (3) 썸네일형 리스트형 [ project2 / zustand ] '더보기'가 계속 10개만 보여준다?(feat.STAR) 총 50개의 데이터를 가져오는데, 한번에 다 나열하는 것에서 10개씩 보여주는 방식으로 바꿨다. 그런데 상세 페이지를 들렸다가 목록 페이지로 돌아오면 다시 10개만 보여주는 것이다. 즉 useState Hook이 reset되는 현상내용요약최초 10개만 보여주는 결과 목록 페이지를 component가 reset되도 그대로인 상태를 유지함으로써, 사용자 사용성 번거로움을 최소화 데모 사이트 체험해 보기 STAR1. Situation- component reset 현상으로 목록 페이지로 돌아왔을 시, 결과목록 페이지의 보여지는 개수가 초기화 2. Task- Component가 reset되도 값이 그대로 유지 3. Action- 고려해 본 사항 1) 전역으로 변수 이동 2) Browser storage에 저.. [ React / project2 ] 기존 프로젝트 변경하기 Vanilia => Type 이 글은 기존 JSX를 TSX로 바꾸는 과정을 정리한 글이다.TypeScript는 여러가지 이점을 가지고 있다.1. type이 정해져 있기 때문에 잠재적 애러를 감소 시킨다. vanilia의 경우 type 불일치가 종종 일어난다.2. 정확한 type 정의는 코드을 읽기 쉽게 만든다. 내가 만든 것이라면 크게 상관없을지 모르지만 다른 사람들과 공유하는/되는 코드는 모든 사람들이 읽기 쉽게 작성하는 것이 좋다. 1. github Clonegit clone -b {branch_name} --single-branch {저장소 URL} {폴더명} 예전에 클론해본다고 하루 날린적이 있는데, 선행학습이 돼서 다행이다.참조https://life-explorer.tistory.com/406본격적인 시작 2. type 정.. [ React / Project2 ] 기존 프로젝트 재구성(re-factor) with React Query React Query 를 접하고 전역 데이터 state 관리할 수 있는 걸 알게 됐다. 따라서 redux와 같은(상태 관리 프로그램 등)을 대체할 수도 있다는 것을 확인 했다. 기존 code : server를 통해서 데이터 핸들링 및 reduxClient에서 Server로 request를 보내면 공공도서관 API로 대신 정보를 보내준다. Server는 받은 정보를 다시 Client로 보낸다. (*공공도서관 API는 하루 500개 무료이다.) 변경한 Code : React Query with useQuery dependent Query이번에 커피챗을 하면서 React Query를 써보라는 권유를 받아서 사용해볼 목적과 기존 프로젝트를 보수해 볼 목적으로 사용했다. 보수 목적1. fetch data가 다른.. 이전 1 다음
