티스토리

hyunjin

검색하기

블로그 홈

hyunjin

hyunjinee.tistory.com/m

현진이에오 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

[번역] Why You Need React Query https://tkdodo.eu/blog/why-you-want-react-query Why You Want React QueryLet's take a look at why you'd want a library like React Query, even if you don't need all the extra features it provides...tkdodo.eu 저는 React 애플리케이션에서 비동기 상태와 상호 작용하는 방식을 간소화하는 React Query를 좋아합니다. 그리고 많은 동료 개발자들도 같은 생각을 하고 있다는 것을 알고 있습니다. 하지만 가끔 서버에서 데이터를 가져오는 것과 같은 간단한 작업에는 필요하지 않다고 주장하는 게시물을 보게됩니다. React Query가 제공하는 모든 추.. 공감수 1 댓글수 0 2024. 5. 8.
[번역] Preserving and Resetting State https://react.dev/learn/preserving-and-resetting-state Preserving and Resetting State – React The library for web and native user interfaces react.dev 상태는 컴포넌트간에 격리된다. React는 UI 트리에서 어떤 컴포넌트가 어떤 상태에 속하는지를 추적한다. 언제 상태를 보존할지, 언제 리렌더링할지 제어할 수 있다. State is tied to a position in the render tree React는 UI 컴포넌트 구조에 대한 렌더 트리를 빌드한다. 컴포넌트 state를 전달할 때, state가 컴포넌트 내부에 "존재"한다고 생각할 수 있다. 하지만 state는 실제로 Reac.. 공감수 0 댓글수 0 2024. 4. 10.
[번역] Making magic: Reimagining Developer Experience for the World of Serverless https://blog.cloudflare.com/making-magic-reimagining-developer-experiences-for-the-world-of-serverless Making magic: Reimagining Developer Experience for the World of Serverless Today I’m going to talk about TTFD, or time to first dopamine, and announce a huge improvement to the Workers development experience — wrangler dev. blog.cloudflare.com 이번 주에는 전 세계 200개 이상의 도시에서 콜드 스타트 없이 lightweight iso.. 공감수 2 댓글수 0 2024. 4. 9.
[번역] Relay Docs https://relay.dev/docs/ Home | Relay Relay documentation landing page relay.dev Relay는 GraphQL로 데이터를 가져오고 업데이트할 수 있는 React용 데이터 관리 라이브러리이다. 기본적으로 뛰어난 성능을 제공하면서 코드의 안정성과 유지보수를 유지하기 위한 수년간의 학습을 구현한다. Relay는 데이터 불러오기에 React 컴포넌트의 composability를 제공한다. 각 컴포넌트는 자체적으로 필요한 데이터를 선언하고, Relay는 이를 효율적인 pre-load 쿼리로 결합한다. 설계의 모든 측면은 컴포넌트를 작성하는 자연스러운 방식이 가장 성능이 좋도록 하는 것이다. Features - 선언적 데이터: 각 컴포넌트에 필요한 데이터를.. 공감수 2 댓글수 0 2024. 4. 6.
[번역] The Query Options API https://tkdodo.eu/blog/the-query-options-api The Query Options API v5 brought a new, powerful API, especially if you're using React Query with TypeScript... tkdodo.eu 약 3개월 전에 React Query v5가 출시되었고, 라이브리리 역사상 가장 큰 '획기적인' 변화가 있었다. 이제 모든 함수는 여러개의 인수가 아닌 하나의 객체만 전달받는다. 이 객체는 쿼리를 만드는데 필요한 모든 옵션이 포함되어 있으므로 쿼리 옵션이라고 부른다. - useQuery( - ['todos'], - fetchTodos, - { staleTime: 5000 } - ) + useQuery({ + q.. 공감수 3 댓글수 0 2024. 2. 24.
[번역] Optimistic Updates https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates Optimistic Updates | TanStack Query Docs tanstack.com React Query는 mutation이 완료되기 전에 UI를 낙관적으로 업데이트하는 두가지 방법을 제공한다. onMutate 옵션을 사용하여 캐시를 직접 업데이트하거나, 반환된 변수를 활용하여 useMutation 결과에서 UI를 업데이트할 수 있다. Via the UI 이것은 캐시와 직접 상호작용하지 않기 때문에 더 간단한 변형이다. const { isPending, submittedAt, variables, mutate, isError } = useMutatio.. 공감수 2 댓글수 0 2024. 2. 12.
[번역] useSyncExternalStore useSyncExternalStore – React The library for web and native user interfaces react.dev useSyncExternalStore는 외부 스토어를 구독할 수 있는 리액트 훅이다. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) 컴포넌트의 최상위 레벨에서 (훅의 조건) useSyncExternalStore를 호출하여 외부 데이터 스토어에서 값을 읽을 수 있다. import { useSyncExternalStore } from 'react'; import { todosStore } from './todoStore.js'; function TodosAp.. 공감수 2 댓글수 0 2024. 1. 29.
[번역] React Query and React Context React Query and React Context Can it make sense to combine React Query with React Context ? Yes, sometimes ... tkdodo.eu React Query의 가장 큰 특징 중 하나는 컴포넌트 트리에서 원하는 곳 어디에서나 쿼리를 사용할 수 있다는 것입니다. 아래의 ProductTable 컴포넌트는 필요한 데이터를 fetch하고 이를 필요한 곳에 co-locate 시킵니다. function ProductTable() { const productQuery = useProductQuery() if (productQuery.data) { return ... } if (productQuery.isError) { return } re.. 공감수 2 댓글수 0 2023. 10. 15.
[번역] Type-safe React Query Type-safe React Query About the difference between "having types" and "being type-safe"... tkdodo.eu 타입스크립트를 사용하는 것이 좋은 생각이라는 것에 모두 동의할 것입니다. 타입 안전을 싫어하는 사람이 있을까요? 버그를 조기에 발견할 수 있는 좋은 방법이며, 앱의 일부 복잡성을 type 정의로 풀어낼 수 있으므로 머릿속에 영원히 보관할 필요가 없습니다. 타입 안정성의 수준은 프로젝트마다 크게 다를 수 있습니다. 결국 TS 설정에 따라 모든 유효한 JavaScript 코드가 유효한 TypeScript 코드가 될 수 있습니다. 또한 '타입이 있다는 것'과 '타입 안전하다는 것' 사이에는 큰 차이가 있습니다. 타입스크립트의 강력한.. 공감수 0 댓글수 0 2023. 10. 14.
[번역] 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? - 당신의 프로젝트는 새롭게 잘 업데이트 되지 않는 패키지에 의존하고 있을 수 있습니다. 이 패키지는 중요한 업데이트가된 다른 패키지를 포함하고 있을 수 있죠. 이 경우에, 직접 의존성에 지정된 버전 범위가 새로운 하위 의존성을 포함하지 않으면.. 공감수 0 댓글수 0 2023. 10. 7.
[번역] 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하지 않습니다. - 이 쿼리는.. 공감수 1 댓글수 0 2023. 10. 3.
[번역] 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.. 공감수 1 댓글수 0 2023. 9. 30.
[번역] 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.. 공감수 2 댓글수 0 2023. 9. 13.
[번역] 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 웹에서 제가 가장 좋아하는 일은 다른 개발자의 생산성을 높이는 데 도움이 되는 것을 만드는 것입니다. 특히 프로젝트 부트스트랩.. 공감수 0 댓글수 0 2023. 9. 11.
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.. 공감수 2 댓글수 0 2023. 8. 28.
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 < .. 공감수 2 댓글수 0 2023. 8. 27.
[번역] 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.. 공감수 1 댓글수 0 2023. 8. 25.
[번역] JavaScript Promises: an introduction JavaScript Promises: 소개 Promise는 지연 및 비동기 계산을 단순화합니다. Promise는 아직 완료되지 않은 작업을 나타냅니다. web.dev 프로미스는 지연(deferred) 및 비동기 연산을 간소화한다. 프로미스는 아직 완료되지 않은 연산을 나타낸다. -> 비동기 처리의 상태(pending, fulfilled..)와 결과를 나타내는 객체 개발자 여러분, 웹 개발의 역사에서 중요한 순간을 맞이할 준비를 하세요. 자바스크립트에 Promise가 생겼습니다! Browser support and polyfill 완전한 프로미스 구현이 없는 브라우저 사양을 준수하도록 만들거나 다른 브라우저 및 Node.js에 프로미스를 추가하려면 폴리필을 확인하세요. What's all the fuss .. 공감수 0 댓글수 0 2023. 8. 17.
2020 KAKAO BLIND RECUITMENT 괄호 변환 이 문제에 적힌 그대로 구현하는게 중요하다. 간단한 조건도 잘 체크하자. 먼저 '(', ')'로만 이루어진 문자열이 있을 경우 '('의 개수와 ')'의 개수가 같으면 이를 균형잡힌 괄호 문자열이라 한다. 그러면 일단 여기서 체크할 부분은 빈 문자열은 균형잡힌 괄호 문자열이 아니다. 균형잡힌 괄호 문자열을 판별하는 함수를 작성해보자. 함수 이름은 checkIsBalancedString이 좋은 것 같다. 만약 균형잡힌 문자열이라면 true, 아니라면 false를 반환한다. function checkIsBalancedString(s) { if (s === "") return false // 빈 문자열은 균형잡힌 문자열이 아니다. let left = 0 // 왼쪽 괄호의 개수 let right = 0 // 오른.. 공감수 2 댓글수 0 2023. 8. 12.
[번역] UI is a function of state UI is a function of state My very own corner of the web www.kn8.lt React는 UI 개발에 혁명을 일으켰습니다. 이것이 최종 패러다임이 아닐 수도 있고 새로운 아이디어를 탐구하지 말아야 한다는 뜻은 아닙니다. 하지만 어쨋든 React는 멋지고 사용하기 매우 재밌습니다. React의 핵심 원칙은 전체 UI가 일부 상태 (또는 단순히 데이터)를 취하고 렌더링된 전체 사용자 인터페이스를 반환하는 함수라는 것입니다. UI = fn(state) 이 아이디어를 적용하기 위해 React가 필요하지도 않습니다. React를 도입하지 않고 좀 더 자세히 살펴봅시다. 이러한 UI 함수를 구현하고 렌더링된 콘텐츠를 페이지에 삽입해 봅시다. const Header = ().. 공감수 2 댓글수 0 2023. 7. 4.
Islands Architecture https://jasonformat.com/islands-architecture/ Islands Architecture - JASON Format I’ve struggled to find references to this online, but heard the name used multiple times this year when describing the approach outlined here. To the best of my knowledge, the "Component Islands" pattern was coined by Etsy's frontend architect Katie Sylo jasonformat.com 위 글을 번역 했습니다. 온라인에서 이에 대한 자료를 찾기 어려웠지만, 올해 이 .. 공감수 0 댓글수 0 2023. 6. 13.
[번역] 웹 사이트 크기가 14KB보다 작아야 하는 이유 Why your website should be under 14kb in size Having a smaller website makes it load faster — that's not surprising. What is surprising is that a... dev.to 크기가 작은 웹 사이트일수록 로드하는 시간이 줄어든다는 것은 놀랍지 않은 일입니다. 하지만 정말 놀라운 것은 14kB의 페이지가 15kB의 페이지보다 훨씬 빠르게 로드된다는 것입니다.(아마 612ms 정도 빠를 것입니다.) 반면에 15kB 페이지와 16kB의 페이지의 차이는 아주 사소합니다. 이는 TCP의 slow start 알고리즘 때문에 발생하는 차이입니다. 이 아티클에선 이 알고리즘이 무엇인지, 어떻게 동작하는지, 그리고 왜.. 공감수 2 댓글수 0 2023. 5. 2.
[번역] useImperativeHandle useImperativeHandle – React The library for web and native user interfaces react.dev useImparativeHandle은 ref로 노출된 handle을 사용자 정의할 수 있는 React Hook이다. useImperativeHandle(ref, createHandle, dependencies?) 컴포넌트 최상위 레벨에서 useImperativeHandle을 호출하여 노출되는 ref 핸들을 커스터마이징 할 수 있다: import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperati.. 공감수 0 댓글수 0 2023. 4. 25.
[번역] ErrorBoundary Catching rendering errors with an error boundary 기본적으로 애플리케이션이 렌더링 도중 에러를 발생시키면 React는 화면에서 UI를 제거한다. 이를 방지하기 위해 애플리케이션의 UI의 일부를 에러 바운더리로 감싸면 된다. 에러 바운더리는 충돌한 부분 대신 오류 메시지와 같은 폴백 UI를 표시할 수 있는 특수 컴포넌트이다. 에러 경계 컴포넌트를 구현하려면 에러에 대한 응답으로 상태를 업데이트하고 사용자에게 에러 메시지를 표시할 수 있는 getDerivedStateFromError를 제공해야한다. 또한 선택적으로 componentDidCatch를 구현하여 로그를 기록할 수 있다. class ErrorBoundary extends React.Component { cons.. 공감수 0 댓글수 0 2023. 4. 24.
Backends for Frontends pattern 아래 글을 번역했습니다. Backends for Frontends pattern - Azure Architecture Center Explore the Backends for Frontends pattern, which creates separate backend services to be consumed by specific frontend applications or interfaces. learn.microsoft.com 특정 프론트엔드 애플리케이션이나 인터페이스에서 사용할 별도의 백엔드 서비스를 만듭니다. 이 패턴은 여러 인터페이스에 대해 단일 백엔드를 사용자 지정하지 않으려는 경우에 유용합니다. 이 패턴은 샘 뉴먼이 처음 설명했습니다. Context and problem 애플리케이션은 처음에 데.. 공감수 0 댓글수 0 2023. 4. 19.
BFF - Design Pattern with Next.js BFF - Backend for Frontend Design Pattern with Next.js Intro These days microservice architecture becoming more and more popular, and if you... dev.to 위 글을 번역했습니다. Intro 요즘 마이크로서비스 아키텍처가 점점 더 대중화되고 있으며, 이 아키텍처를 채택한 프로젝트에서 일했다면 프론트엔드 개발자로서 다음 시나리오 중 하나에 직면했을 것입니다. - 여러 플랫폼(웹, 모바일 앱, 스마트워치)을 지원하며 각 플랫폼마다 특정 데이터 요구 사항이 존재합니다. - 여러 서비스에서 API를 호출하여 하나의 사용자 인터페이스를 구축합니다. - 여러 API 호출의 응답을 조작, 혼합 및 일치시켜.. 공감수 1 댓글수 0 2023. 4. 19.
[번역] The BFF Pattern: An Introduction The BFF Pattern (Backend for Frontend): An Introduction Get to know the benefits of using BFF pattern in practice blog.bitsrc.io 마이크로 서비스를 사용하여 전자상거래 애플리케이션을 구축해야 하는 시나리오를 상상해보세요. 고객, 주문, 제품, 장바구니등을 위한 마이크로 서비스가 있을 수 있습니다. 마이크로 서비스는 프론트엔드에서 사용할 API를 노출합니다. 그러나 마이크로 서비스가 프론트엔드로 반환하는 데이터는 프론트엔드에서 표현해야 하는 정확한 방식에 따라 형식이 지정되거나 필터링되지 않았을 수 있습니다. 이 경우 프론트엔드에 자체적으로 이러한 데이터의 형식을 다시 지정하는 로직이 있어야 합니다. 프론트.. 공감수 1 댓글수 0 2023. 4. 18.
[번역] useDefferedValue useDeferredValue – React The library for web and native user interfaces react.dev useDefferedValue는 UI의 일부 업데이트를 지연시킬 수 있는 React 훅이다. const deferredValue = useDeferredValue(value) 해당 값의 지연된 버전을 얻으려면 컴포넌트의 최상위 레벨에서 useDeferredValue를 호출한다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query.. 공감수 1 댓글수 0 2023. 4. 17.
Past, Present, and Future of React State Management 아래 글을 번역했습니다. Past, Present, and Future of React State Management Learn about the history of state management in React and what the preferred solutions are today. leerob.io React는 2013년 5월에 소개되었습니다. 이 패러다임의 변화는 UI가 상태의 함수라는 것이었습니다. 어떤 컴포넌트 상태가 주어지면 React는 컴포넌트의 모양을 결정할 수 있습니다. React는 state라는 개념을 기반으로 합니다. 하지만 상태는 오랫동안 React 애플리케이션을 구축할 때 가장 어려운 부분 중 하나였습니다. React의 상태 관리를 견고한 도구 벨트라고 상상해 봅시다. 수년동.. 공감수 1 댓글수 0 2023. 4. 10.
커스텀 이벤트 디스패치 https://ko.javascript.info/dispatch-events 커스텀 이벤트 디스패치 ko.javascript.info 커스텀 이벤트는 그래픽 컴포넌트를 만들 때 사용됩니다. 자바스크립트 기반 메뉴가 있다고 가정해봅시다. 개발자는 메뉴의 루트 요소에 open(메뉴를 열었을 때 실행됨), select(항목을 선택했을 때 실행됨)같은 이벤트를 달아 상황에 맞게 이벤트가 실행되게 할 수 있습니다. 이렇게 루트 요소에 이벤트 핸들러를 달아놓으면 바깥 코드에서도 이벤트 리스닝을 통해 메뉴에서 어떤 일이 일어났는지를 파악할 수 있습니다. 자바스크립트를 사용하면 새로운 커스텀 이벤트 뿐만 아니라 목적에 따라 click, mousedown 같은 내장 이벤트를 직접 만들 수도 있습니다. 이렇게 만든 내장 .. 공감수 0 댓글수 0 2023. 3. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.