치춘짱베리굿나이스

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..

Throttle & Debounce 예제에 useEffect가 들어가서 React 관련 게시글로 뺄까 고민해봤는데 그냥 자바스크립트 / 타입스크립트로 지정하였다 Throttle 지정된 시간 동안 함수를 최대 한 번만 호출하도록 한다 (일정 시간이 지나기 전까지 재호출을 방지한다) 특정 함수를 한번 호출했을 경우 지정한 시간 (예를 들면 1초) 이 흐르기 전까지 재호출이 되지 않도록 막는다 구현하기 ... let timeoutValue; if (!timeoutValue) { timeoutValue = setTimeout(() => { console.log(stateValue); // 여기에 throttling으로 실행시킬 함수 및 코드 배치 timeoutValue = null; // timeoutValue..

2×n 타일링 문제 2×n 크기의 직사각형을 1×2, 2×1 타일로 채우는 방법의 수를 구하는 프로그램을 작성하시오. 아래 그림은 2×5 크기의 직사각형을 채운 한 가지 방법의 예이다. 입력 첫째 줄에 n이 주어진다. (1 ≤ n ≤ 1,000) 출력 첫째 줄에 2×n 크기의 직사각형을 채우는 방법의 수를 10,007로 나눈 나머지를 출력한다. 풀이 const twoN = () => { let n = parseInt(require("fs").readFileSync("/dev/stdin").toString().trim()); let dp = Array.from({ length: n }, (v) => 0); dp[0] = 1; dp[1] = 2; for (let i = 2; i < n; i++) { dp[i..