치춘짱베리굿나이스

코드리뷰 + 코드예시 react-query useInfiniteQuery: 무한스크롤 구현할 때 좋음 useQuery 등의 식별자에 함수 넣지 않기 useQuery([foo, bar], ...); 웹팩으로 빌드되는 과정에서 함수명이 그대로 남아있는 게 아니라 a, b 등의 간결하고 짧은 함수명으로 바뀌어버린다 예상치도 못한 이상한 함수가 저 자리에 들어가버릴 지도 모른다… useQuery에서는 [’식별자', 변수1, 변수2…] 가 가장 정석적인 사용법이다 redux useAppSelector 주의사항 export const getTheme = (state: RootState) => state.theme; ... const theme = useAppSelector(state => state.theme); ..

그룹과제 #2 공식적인 내생각 모든 작업물을 머지하고 붙이기까지 완료했다 이제 리드미 이쁘게 작성하고 폴더구조 약간 수정하고 조금씩 다듬는 과정만 남았다 그리고 강의 추가정리까지…. 이번주는 그래도 꽤 널널한 편이었던 것 같아서… 대신 공부 외적으로 이런저런 일이 많았어서 정신없긴 마찬가지였다 다음주가 두려워진다………. 생각해보니 5월도 끝이네 슬슬 ㅎ.ㅎ;; 취업하고싶다 작업 내용 깃허브 Readme 중앙정렬 적용하기 // 내용 p 태그를 이용하면 태그 내의 문자열을 중앙정렬 할 수 있다 그냥.. 마크다운 문법 쓰면서 html 문법이 먹힌다는 걸 망각해서 기록차 적어봄 검색어 추천이 있는 검색 창 구현 p 태그 내에 h1 등 헤더 태그에는 중앙정렬이 적용되지 않으므로 h1 태그에 어트리뷰트 한번 더 지..

Redux toolkit 설치 $> npm i @reduxjs/toolkit $> yarn add @reduxjs/toolkit npm 링크 @reduxjs/toolkit @reduxjs/toolkit The official, opinionated, batteries-included toolset for efficient Redux development. Latest version: 1.8.1, last published: 2 months ago. Start using @reduxjs/toolkit in your project by running `npm i @reduxjs/toolkit`. There are 1388 other projects in t www.npmjs.com yarn 링크 Contri..

그룹과제 #2 공식적인 내생각 오늘 서로의 작업물을 다 Merge하고 합치는 작업을 진행했다 생각보다 뜬금없는 에러 (깜짝!) 가 많이 나와서 당황스러웠지만 팀원들끼리 머리 맞대고 진행하니까 나름 금방 잡혔다 필수 기능은 다 구현 및 머지해 놨으니 추가적인 기능 구현만 좀 더 생각하면 될 것 같다 겸사겸사 안 쓰는 파일 및 코드 삭제랑 린터 오류 잡기도 완료했다 다음주부턴 훨씬 바빠질 것 같아서 무섭다… 사실 4인 1팀 체제가 9인 1팀보다 조금 더 편안했던 것 같다 Github 실수로 다른 브랜치에 머지했을 때 깃허브에서 revert를 누르자 그러면 revert 브랜치가 생성되면서 (이전에 만들었던 변경사항을 무로 되돌린다) 이 브랜치를 풀리퀘스트를 날릴 수 있게 된다 만약 dev에 머지했어야 하는데 ..

react-query 설치 $> npm i react-query $> yarn add react-query npm 링크 react-query react-query Hooks for managing, caching and syncing asynchronous and remote data in React. Latest version: 3.39.0, last published: 13 days ago. Start using react-query in your project by running `npm i react-query`. There are 783 other projects in the npm registry usi www.npmjs.com yarn 링크 Contributors https://yarnpkg..

그룹과제 #2 공식적인 내생각 밤에 잠이 쏟아져서 작성하다 말고 그냥 자버렸다... 리액트 쿼리를 사용하면서 같은 단어를 검색하면 캐싱이 되도록 분명 설정을 해놨었는데 이상하게 이전에 검색했던 단어를 또 입력했음에도 불구하고 데이터를 다시 불러오는 현상이 있었다 refetch() 이 함수때문이었다 ㅡㅡ 쓰지말자 작업 내용 리액트 쿼리 훅으로 만들기 export const useFilteredQuery = () => { const searchText = useAppSelector(getSearchText); const { data, refetch } = useQuery( ["#diseaseData", searchText], () => getDiseaseDataFiltered(searchText), { re..

그룹과제 #2 공식적인 내생각 과제 요구사항 중 로컬 캐싱은 리액트 쿼리, API 호출 횟수 줄이기는 디바운싱을 사용하면 될 듯 하다 API 응답 속도는 정말 너무나도 느린데, 제공받은 XML을 JSON으로 변환한 뒤 사용하니 1900개 가량의 데이터에서 filter 작업까지 해도 아주 짧은 시간 안에 응답이 돌아와서 아무래도 검색어 출력 및 Fuzzy matching을 위해서라면 로컬 파일을 사용하는 게 나아보인다 어째 과제를 하면서 API와의 싸움 비중이 더 커 보인다…. 솔직히 Fuzzy matching이 일종의 검색어 유추 시스템인데 API 응답 속도도 느린 상황에서 사용자의 검색어를 어떻게 바로바로 예측하고 퍼지매칭이 가능한지 잘 모르겠다 로컬 파일을 사용하지 않는 퍼지매칭 구현 방법이 궁금하다..

그룹과제 #2 공식적인 내생각 react-query에 익숙해지려고 여러 인자값 넣으면서 테스트 중인데... 과제용 API가 지나치게 느려서 내가 맞게 사용하고 있는지 체크하는 데에 너무 오래걸린다 사용법 자체는 커스텀 훅처럼 사용하면 돼서 간단한듯한데 이런저런 설정값이 까다로운 것 같다 작업 내용 react-query 찍먹 const { status, data, error } = useQuery( "#diseaseData", () => getDiseaseData(searchText), // fetch 함수, 반환값은 Promise { retry: 3, onSuccess: (response: IDiseaseData) => { console.log(response); return response; }, on..