본문 바로가기

분류 전체보기

 (432)
React Query: Optimistic Updates Optimistic Updates란 사용자의 동작으로 useMutation을 실행할 때, mutate가 실행되고 다시 useQuery를 실행해서 데이터를 받아오기까지 시간이 걸린다. 그런데 이 시간동안 웹 화면상에서는 변화가 없으니 유저들은 변화가 있기 짧은 시간동안 기다리게 된다. 이 불편함을 없애기 위해 사용되는 것이 react query의 Optimistic Updates다. 왜 이름이 Optimistic(낙관적인) Updates냐 하면, state를 optimistically(낙관적으로)하게 업데이트하기 때문이다. 즉, 무조건 성공했다고 가정하고 state 값을 변화시켜버린다. 그래서 낙관적인 업데이트다. 하지만 업데이트가 실패할 가능성도 있다. 그래서 실패한 경우에는 변경되기 이전의 데이터를 다..
절대 경로 설정하기 (craco + typescript + storybook) craco + typescript 1. craco 설치 yarn add @craco/craco yarn add craco-alias -D 2. craco.config.js 세팅 const CracoAlias = require("craco-alias"); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", tsConfigPath: "tsconfig.paths.json", }, }, ], }; 3. tsconfig.json 세팅 { ..., "extends": "./tsconfig.paths.json" } 4. tsconfig.paths.json 세팅 { "compilerOptions": { "baseUrl": ..
스토리북에 폰트 적용하기 스토리북 공식 홈페이지에 의하면, preview-head.html 파일을 만들고, html 태그를 추가하라고 설명하고 있다. 1. preview-head.html 을 추가한다. 2. 태그로 폰트를 가져오고, 폰트를 적용시켜준다. 3. 적용 확인하기 before after 끝!
axios interceptors 원래 각 api마다 headers에 accessToken을 일일히 작성해주었는데, 스마일게이트에서 코드 리뷰 피드백을 받던 중 axios의 interceptors를 알게 되어서 interceptors를 사용하여 axios 코드를 리팩토링하였다. interceptors를 사용하면 공통적으로 넣을 내용을 한꺼번에 적용할 수 있으므로 코드의 양을 줄일 수 있다. - interceptors를 활용하여 변경한 코드 import axios from "axios"; const baseURL = process.env.REACT_APP_BASE_URL; const accessToken = localStorage.getItem("accessToken"); const clientApi = axios.create({ base..
[230427] 과일 장수 문제 https://school.programmers.co.kr/learn/courses/30/lessons/135808 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1~k, 1점 bad, k점 good 사과 한 상자 가격: 가장 낮은 점수p * 사과개수m 풀이 첫 번째 풀이 (실패) function solution(k, m, score) { let answer = 0; score.sort((a, b) => b - a); while(score.length >= m) { const min = score[m - 1]; answer += min * m sco..
[230424] 프로세스 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 내 풀이 큐의 가장 큰 수 max 를 구한다. 큐에 하나만 남으면 return answer + 1 큐의 맨 앞을 뺀다(shift) (= process) process 가 max 와 동일하면, answer + 1 만약 location이 0이면(뺀 앞이라면) return answer max가 바뀌므로, max를 바꿔준다 process와 max이 동일하지 않다면, 큐에 process 를 뒤에 추가한다 (push) location 을 앞으로 당긴다. -1을 하는데, location === -1 이 된다면 ..
[230423] 소수 만들기 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 내 풀이 (실패) 삼중 for문에다가 전에 ‘소수 찾기’ 문제랑 동일하게 풀이했다. function solution(nums) { const answer = [2, 3, 5]; for(let i = 0; i < nums.length - 2; i++) { for(let j = i+1; j < nums.length - 1; j++) { for(let k = j+1; k < nums.length; k++) { const sum = nums[i] + nums[j] + nums[k] let flag = tr..
[230423] 연속 부분 수열 합의 개수 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 내 풀이 처음에 문제를 이해하는데 시간이 조금 걸렸다. linked list로, 끝과 앞이 연결된 형태라 생각하고 연속된 숫자의 합이 중복 없이 총 몇 가지가 나올 수 있는지 묻는 문제였다. 나는 slice를 이용해서 풀이했다. function solution(elements) { const answer = [...elements]; for(let i = 2; i elements.length) { sliceArr = elements.slice(j).concat(elements.slice(0, (i ..
반응형

티스토리툴바