전체 글 (501) 썸네일형 리스트형 [특강] ChatGPT, 인공지능의 미래 오늘 안성시 공도읍 도서관에서 주최하는 ChatGPT 관련 특강을 듣고 왔다. ChatGPT는 작년 11월에 출시된 이후로 지금까지 개발에 관심있는 모든 분들 사이에서 정말 핫한 친구다. ChatGPT를 모르면 간첩인 수준? 나는 평소 개발할 때 내가 못 보던 에러를 발견하거나, 구현하기 힘든 CSS 코드 부분에서 도움을 받고 싶을 때 ChatGPT를 사용한다. 때때로 논리정연한 글을 쓰고 싶을 때, 새로운 스택에 대한 간략한 소개를 듣고 싶을 때에도 ChatGPT를 먼저 찾을 정도로 학습에 유용하게 사용하고 있다. 이번 특강 주제에 관심이 많은 만큼 정말 큰 기대를 품고 갔었고, 기대 이상으로 많은 인사이트를 얻을 수 있었다. ChatGPT로 인해 바뀔 우리 사회의 미래, ChatGPT가 우리의 언어를.. [리트코드] 205. Isomorphic Strings - js 1. 문제 https://leetcode.com/problems/isomorphic-strings/ Isomorphic Strings - LeetCode Can you solve this real interview question? Isomorphic Strings - Given two strings s and t, determine if they are isomorphic. Two strings s and t are isomorphic if the characters in s can be replaced to get t. All occurrences of a character must be replace leetcode.com 2. 코드 이 문제는 설명을 이해하는데 조금 오래 걸렸다. Isomorphi.. 쿼리 특성 2 : select 옵션을 통한 데이터 filtering과 refetching & polling useQuery의 select 옵션으로 데이터 필터링하기 useQuery 결과에 대하여 select 옵션을 사용하여 결과를 필터링 할 수 있다 . 리액트 쿼리는 불필요한 연산을 줄이는 최적화를 하고 이를 메모이제이션이라고 한다. 리액트 쿼리는 select 함수를 삼중 등호로 비교하여 데이터와 함수가 모두 변경되었을 경우에만 실행된다. 마지막으로 검색한 데이터와 동일한 데이터이고 select 함수에도 변동이 없으면 실행되지 않는다. 따라서 리액트 쿼리가 제공하는 캐시 기능을 잘 활용하기 위해 select 함수에는 안정적인 함수가 필요하고, 이때 익명 함수를 안정적인 함수로 만들기 위해 useCallback 을 사용한다. useQuery({ select: (data) => filteredData; }); 예.. 쿼리 특성 1 : Pre-fetching과 페이지네이션 Pre-fetching(초기 데이터 채우기) 사용자에게 보여주고 싶은 데이터가 있는데 캐시에 아직 데이터가 없는 경우, 리액트 쿼리를 사용하여 새로운 데이터를 가져오기 전에 잠시 데이터를 미리 보여줄 수 있도록, 해당 데이터를 미리 가져와 캐시에 추가하는 방법에 대해 알아보자. where to use? = 미리 채우기 옵션이 사용될 리액트 쿼리 메서드 data from? = 서버 또는 클라이언트 added to cache ? = 캐시 저장 여부 where to use? data from? added to cache ? prefetchQuery method to queryClient server yes setQueryData method to queryClient client yes placeholderD.. [리트코드] 73. Set Matrix Zeroes - js (queue) 1. 문제 https://leetcode.com/problems/set-matrix-zeroes/ Set Matrix Zeroes - LeetCode Can you solve this real interview question? Set Matrix Zeroes - Given an m x n integer matrix matrix, if an element is 0, set its entire row and column to 0's. You must do it in place [https://en.wikipedia.org/wiki/In-place_algorithm]. Example 1: [https leetcode.com 2.코드 /** * @param {number[][]} matrix * @return.. 커스텀 쿼리 훅(관심사 분리) & 로딩 / 에러 처리 중앙집중화 커스텀 쿼리 훅 큰 앱들에서는 각 데이터 유형에 커스텀 훅을 만드는 것은 매우 흔하다. 커스텀 쿼리 훅을 사용할 때의 이점은 다음과 같다. 다수의 컴포넌트에서 데이터에 엑세스해야 하는 경우 useQuery 호출을 다시 작성하지 않아도 된다. 다수의 useQuery 호출을 사용했다면 사용 중인 키를 헷갈릴 수 있다. 커스텀 훅을 사용해 호출한다면 키를 헷갈릴 위험이 없다. 사용하길 원하는 쿼리 함수를 혼동할 위험이 없다. 추상화를 통해 관심사 분리를 할 수 있다. 예시 코드는 다음과 같다. api 요청 코드, useQuery 구문을 커스텀 훅 파일에 넣어 관심사를 분리한다. // useTreatments.ts import { useQuery, useQueryClient } from 'react-query'.. useInfiniteQuery 무한 스크롤 사용자가 스크롤 할 때마다 새로운 데이터를 가져오는 것이다. 한 번에 모든 데이터를 가져오는 것보다 훨씬 효율적이다. 그래서 사용자가 버튼을 클릭하거나 특정 지점을 스크롤 했을 때 데이터를 가져온다. useInfiniteQuery useInfiniteQuery는 페이지네이션과는 다른 API 포맷을 요구한다. 페이지네이션에서는 현재 페이지를 컴포넌트 상태에서 추적했었다. 사용자가 새 페이지를 열기 위해 행동을 하면 쿼리 키를 업데이트하고 쿼리 키가 데이터를 업데이트 하는 방식이였다. 반면에 useInfiniteQuery는 다음 쿼리가 무엇일지 추적한다. 이 경우에는 다음 쿼리가 데이터의 일부로 반환된다. 이 객체는 데이터 배열을 가진 결과라는 프로퍼티를 가진다(results). 또한, 데이터의.. [리트코드] 300. Longest Increasing Subsequence - js (DP) 1. 문제 https://leetcode.com/problems/longest-increasing-subsequence/description/ Longest Increasing Subsequence - LeetCode Can you solve this real interview question? Longest Increasing Subsequence - Given an integer array nums, return the length of the longest strictly increasing subsequence. Example 1: Input: nums = [10,9,2,5,3,7,101,18] Output: 4 Explanation: The longest leetcode.com 2. 코드 정답 .. 이전 1 2 3 4 5 ··· 63 다음
