본문 바로가기

전체 글

(214)
[번역] Selective dependency resolutions Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com yarn은 선택적 버전 resolutions를 지원하므로 package.json 파일의 resolutions 필드를 통해 의존성 내에서 사용자 지정 패키지 버전 또는 범위를 정의할 수 있습니다. 일반적으로 이 기능을 사용하려면 yarn.lock 파일에서 수동으로 수정해야합니다. Why would you want to do this? - 당신의 프로젝트는 새롭게 잘 업데이트 되지 않는 패키지에 의존하고 있을 수 있습니다. 이 패키지는 중요한 업데이트가된 다른 패키지를 포함하고 있을 수 있죠. 이 경우에, 직접 의존성에 지정된 버전 범위가 새로운 하위 의존성을 포함하지 않으면..
[번역] Disabling/Pausing Queries Disabling/Pausing Queries | TanStack Query Docs If you ever want to disable a query from automatically running, you can use the enabled = false option. When enabled is false: tanstack.com 쿼리가 자동으로 실행되지 않도록 하려면 enabled=false 옵션을 사용하면 됩니다. enabled가 false일 때: - 쿼리에 캐시된 데이터가 있는 경우 쿼리는 status === sucess 또는 isSuccess 상태로 초기화됩니다. - 쿼리는 마운트 시 자동으로 fetch하지 않습니다. - 쿼리는 백그라운드에서 자동으로 refetch하지 않습니다. - 이 쿼리는..
[번역] React Query is Loading vs isFetching(and when to use them) React Query isLoading vs isFetching (and when to use them) What's the difference between `isLoading` and `isFetching` in React Query? When would you use one and not the other? Let's figure it out and show a nice loading spinner to our users. www.codemzy.com React Query에서 isLoading과 isFetching의 차이점은 무엇인가요? 언제 어느 쪽을 사용하고 다른 쪽을 사용하지 않을까요? 이를 파악하여 사용자에게 멋진 로딩 스피너를 보여주세요. useQuery의 반환값에서 isLoading과 i..
[번역] Making setInterval Declarative with React Hooks Making setInterval Declarative with React Hooks How I learned to stop worrying and love refs. overreacted.io 당신이 React Hooks을 몇 시간 이상 사용했다면 흥미로운 문제에 부딪혔을 것입니다. setInterval를 사용해도 예상대로 작동하지 않는다는 것입니다. 많은 사람들이 hook에 setInterval를 사용하는 것은 리액트의 약점이라고 지적했습니다.(Ryan Florence) 솔직히 이 분들 말이 일리가 있다고 생각합니다. 처음에는 혼란스럽습니다. 하지만 저는 이 문제를 Hook의 결함이라기보다는 React 프로그래밍 모델과 setInterval 사이의 불일치라고 생각하게 되었습니다. 클래스보다 React..
[번역] The Sexiness of Headless UI Components Joshua Britz | The Sexiness of Headless UI Components Something I enjoy doing most on the web is creating things that help other developers to be more productive. I especially love creating component libraries and core development kits that can be used to make project bootstrapping and deveopment easier. As a www.joshbritz.co 웹에서 제가 가장 좋아하는 일은 다른 개발자의 생산성을 높이는 데 도움이 되는 것을 만드는 것입니다. 특히 프로젝트 부트스트랩..
2020 카카오 인턴쉽 수식 최대화 연산자와 피연산자를 적절하게 나누는 것이 포인트였다. 나눴을 경우 문제의 조건에 따라 계산을 적용하기 수월했다. 나는 groupA, groupB로 나눴다. 그 다음 연산자의 순서를 표현하기 위해 0을 *, 1을 +, 2를 -로 표현한 후 backTracking으로 순서를 표현했다. const map = { 0: "*", 1: "+", 2: "-", } const visited = Array(3).fill(false) function backTracking(curr) { if (curr.length === 3) { order.push(curr) return } for (let i = 0; i < 3; i++) { if (visited[i]) continue visited[i] = true backTrack..
2022 KAKAO TECH INTERNSHIP 행렬과 연산 이 문제는 정확성과 효율성이 존재했다. 정확성을 다 맞춘다는 생각으로 구현하면 그냥 배열 회전, inqueue, dequeue만 하면 되기 때문에 우선 정확성을 맞추기 위해 아래 코드를 작성했다. function solution(rc, operations) { for (const op of operations) { if (op === "ShiftRow") { shift() } else { rotate() } } function shift() { rc.unshift(rc.pop()) } function rotate() { const temp = rc[0][0] for (let i = 1; i < rc.length; i++) { rc[i-1][0] = rc[i][0] } for (let i = 1; i < ..
[번역] useTransition useTransition – React The library for web and native user interfaces react.dev useTransition은 UI를 block하지 않고 상태를 업데이트할 수 있는 React Hook이다. 컴포넌트 최상위 수준에서 useTransition을 호출하여 일부 상태 업데이트를 트랜지션으로 표시한다. import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition(); // ... } useTransition은 두가지 항목이 있는 배열을 반환한다. - 보류 중인 전환이 있는지 여부를 알려주는 플래그 isPendin..