전체 글105 [NextJS] NextJS에 React-Query Provider 설정 IntroductionNextJS 환경에서 React-Query를 적용하기 위해 Provider를 설정하는 방식에 대해 알아보려 한다.설치npm install @tanstack/react-querynpm 환경이기 때문에 npm을 기준으로 작성하였다.React-Query Provider 적용NextJS의 App Router에는 가장 상위 컴포넌트인 Layout 페이지에 Provider를 적용한다.const [queryClient] = useState(() => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, } } })); return ( .. 2024. 5. 16. 16948_데스 나이트 ▶ 실버 1 (BFS) 풀이BFS를 이용하는 문제이다.먼저 이동할 수 있는 경우와 없는 경우를 구분하였다. (bfs를 돌리면서 이동할 수 없는지 확인할수는 없기 때문에 미리 거르는 방식으로)규칙을 찾아보니 1) x좌표(= r) 가 2의 배수인 경우, y좌표(= c)는 2k + 1이 성립.2) x좌표(= r) 가 4의 배수인 경우, y좌표(= c)는 2k 이 성립. 인 것이 보였다.이 때, 2의 배수는 4의 배수를 포함하고 있으므로 4의 배수일 경우부터 걸러야 한다. // 도착 불가인지 확인 int tmp1 = abs(r1 - r2); int tmp2 = abs(c1 - c2); if (tmp1 % 4 == 0) { if (tmp2 % 2 == 0) { ans = bfs(r1, c1, r2, c2);.. 2024. 2. 19. [styled-components] Grid로 반응형 구현 Introduction Styled-components 를 이용하여 Grid로 반응형을 구현하는 법을 알아보려 한다. 1. theme에 break point 설정 desktop, tablet, mobile에 대한 break point를 정하고 theme에 다음과 같이 설정해준다. // PC: 1024px ~ // tablet: 768px ~ 1023.9px // mobile: ~ 767.9px const theme = { media: { desktop: '@media screen and (min-device-width: 1024px)', tablet: '@media screen and (min-device-width: 768px) and (max-device-width: 1023.9px)', mobile.. 2024. 1. 5. [Typescript] Binding element '~' implicitly has an 'any' type. 문제 발생 컴포넌트의 props에 대한 타입을 지정할 때 에러가 발생했다. return ( ~ ) // interface/main.ts export interface ReviewMainData { age: number; comments: number; content: string; endDate: string; gender: string; hashtags: string[]; hits: number; image: string; likes: number; nationName: string; regDateTime: string; regionName: string; reviewId: number; startDate: string; title: string; useProfileUrl: string; usernam.. 2024. 1. 1. [Javascript] 금액 입력 시 자동으로 콤마 삽입 Introductioninput으로 금액을 입력받을 때, input 값에서 자동으로 콤마가 삽입되도록 하는 방법을 알아보려 한다. 동작 과정1. onChange를 이용하여 현재 price 값을 갱신해야 한다.2. price의 숫자 이외의 문자는 모두 제거한다.3. 정규식을 이용하여 3자리마다 콤마를 삽입한다.4. 콤마를 삽입한 값을 setPrice로 갱신한다. ※ price의 값은 콤마가 포함된 string이므로 콤마를 제외하고 숫자로 변환하는 과정을 거쳐야 한다. placeholder="금액" value={price} onChange={(e) => { const inputPrice = e.target.value.replace(/.. 2023. 9. 21. [React] useCallback vs useMemo Introduction useMemo와 useCallback의 개념에 대해서는 알고 있었지만 이 둘의 정확한 차이점은 알지 못했기에 각각 이 둘의 쓰임과 어떤 부분이 다른지 알아보려 한다. useMemo 와 useCallback useMemo와 useCallback은 모두 성능 최적화를 위해 사용되는 리액트 훅이다. 함수의 결과를 저장하여 동일한 계산을 여러번 하지 않도록 하여 더 빠르고 효율적인 로직을 구현할 수 있다. useMemo의 기본 구조 useMemo(() => fn, [deps]) 첫 번째 인자로는 함수를, 두 번째 인자로는 실행할 조건 변수를 담은 배열의 형태이다. useMemo 사용 예시 - useMemo를 사용하지 않았을 경우 const Calculation = ({ a, b }) =>.. 2023. 9. 21. 이전 1 2 3 4 5 6 7 ··· 18 다음
