URL 구조 (Query Parameter, Path, etc..)

쿼리스트링, 디렉토리? URL 을 결정하는 기준을 어떻게 잡아야 할까 궁금해져서 적절한 URL 구조를 생성하는 방법에 대해 찾아보았다. 간단한 URL 구조로 생성하기 ✔️ 간단하고 알기 쉬운 단어를 사용 https://en.wikipedia.org/wiki/Aviation ✔️ UTF-8...

간단한 무한 스크롤 만들어보기 with graphQL

간단한 설명 스크롤이 가장 밑에 닿으면 fetch 가 새로운 파라미터와 함께 재호출된다. 더이상 결과가 존재하지 않으면 no more data 텍스트가 보여지고 fetch 는 진행하지 않는다. 사용한 소스 :: API (thecatapi)...

material UI 에 react-hook-form 적용 시 주의할 점

문제 상황 폼 컴포넌트가 사용자의 동작으로 인해 데이터가 변경이 되어야 하는데 값이 바뀌지 않음. 세부 동작 👉 react-hook-form 의 useForm 으로 폼 데이터를 관리 (ex. select, radio, input ..) 👉...

react-query 중요한 기본 개념들 정리

기본 옵션들 👉 StaleTime useQuery 는 기본적으로 캐시된 데이터를 오래된 상태라고 간주한다. (오래된 상태라고 간주하면 새로운 데이터를 요청하게 되므로) 이 기본적으로 적용된 옵션을 막으려면 전역적으로 또는 개별적으로 useQuery 를 호출할...

Lottie Animation 리액트 프로젝트에 적용하기

리액트에서 사용 가능한 lottie 모듈 중 lottie-react 를 사용하였다. 어떤 목적으로 사용하는지에 따라 다르겠지만 토글버튼을 사용하기 위해서 프레임 조정 기능을 지원하는 모듈이 필요했다. react-lottie playSegments를 내부적으로만 사용하기 때문에 forceFlag 값을...

Typescript Exercise 10 풀어보고 정리해보기

타입스크립트 학습을 위해 TypeScript exercises 문제를 풀어보고 기억 보관 목적으로 정리해보는 글입니다. 😀 ➯ Exercise 10. 데이터를 요청하는 함수를 재실행하지 않기 위해, 기존의 코드 베이스로 Promise로 비동기 처리하는 함수를 생성해보기....