`
피드태그기업 블로그팀
⌕
글쓰기로그인
BACKTICK · 개발자의 글쓰기© 2026 백틱 · Built by theo·kkw.theo@gmail.com
피드태그팀MY

#react

관련 글 49건

  • velog수집됨 · 26일 전

    (~08.25) 한입 시리즈 전체 강의 50% 할인 안내

    단 하루! 전체 강의 50% 할인 쿠폰 발급

    reactclaudecodenext♡ 5
  • 강경원강경원· 27일 전 · 3분 읽기

    React와 TypeScript로 구현한 동적 폼 생성기 개발 — 4개월간의 시행착오와 성공 사례

    동적 폼 생성기는 다양한 데이터 입력을 유연하게 처리할 수 있는 유용한 도구다. React와 TypeScript를 사용해 이를 구현하는 과정에서 여러 시행착오를 겪었다. 이 글에서는 그 경험을 공유하고, 직면한 문제와 해결 방법을 정리해보겠다. 프로젝트 초기 설정 프로젝트를 시작할 때,

    react동적 폼개발 경험
    `React와 TypeScript로 구현한 동적 폼 생성기 개발 — 4개월간의 시행착오와 성공 사례
  • 강경원강경원· 8월 21일 · 3분 읽기

    AI와 React를 활용한 사용자 맞춤형 추천 시스템 개발 경험 - 3개월간의 시행착오와 성과

    사용자 맞춤형 추천 시스템은 많은 기업에서 중요한 역할을 하고 있다. 특히, AI와 React를 활용하면 사용자 경험을 크게 향상시킬 수 있다. 하지만 이 시스템을 개발하는 과정은 생각보다 복잡하고 많은 시행착오를 겪게 된다. 지난 3개월간의 경험을 바탕으로, 내가 겪은 트레이드오프와

    aireact추천 시스템
    `AI와 React를 활용한 사용자 맞춤형 추천 시스템 개발 경험 - 3개월간의 시행착오와 성과
  • velog수집됨 · 8월 19일

    도서사이트 - 알라딘 API 연결

    서버 / 깃허브URL: 알라딘 API링크에 들어가서 확인해보면 요청 URL이 http:// 로 시작하는 것을 확인할 수 있었다. 하지만 301 에러가 나는 것을 확인하고 https:// 로 요청을 해봤는데 200 ok를 확인할 수 있었다.200 ok가

    reactopen apitypescript♡ 1
  • 강경원강경원· 8월 19일 · 3분 읽기

    React에서의 비동기 데이터 패칭 최적화 - 5가지 실제 사례와 성과 분석

    비동기 데이터 패칭은 현대 웹 애플리케이션에서 필수적인 작업이다. React를 사용하여 비동기 데이터를 처리할 때 성능과 사용자 경험을 최적화하는 것은 매우 중요하다. 이 글에서는 실제 사례를 통해 비동기 데이터 패칭을 최적화하는 방법과 그 성과를 분석해보겠다. 1. React Quer

    react성능 최적화비동기 데이터 패칭
    `React에서의 비동기 데이터 패칭 최적화 - 5가지 실제 사례와 성과 분석
  • 강경원강경원· 8월 18일 · 3분 읽기

    Java와 React를 활용한 AI 챗봇 개발 — 실제 프로젝트에서 얻은 5가지 인사이트

    AI 챗봇 개발은 요즘 많은 기업에서 관심을 갖는 분야다. Java와 React를 활용해 챗봇을 개발하는 과정에서 얻은 경험과 인사이트를 공유하고자 한다. 이 글에서는 프로젝트 진행 중 마주친 주요 트레이드오프와 함정을 중심으로 다뤄보겠다. 1. 기술 스택 선택의 트레이드오프 Java는

    aireact챗봇
    `Java와 React를 활용한 AI 챗봇 개발 — 실제 프로젝트에서 얻은 5가지 인사이트
  • 강경원강경원· 8월 17일 · 3분 읽기

    LLM과 함께하는 React 애플리케이션 디자인 패턴 — 5가지 혁신적 접근법과 적용 사례

    React 애플리케이션을 개발하다 보면 다양한 디자인 패턴을 접하게 된다. 특히 최근에는 LLM 대규모 언어 모델 을 활용한 접근법이 주목받고 있다. 이 글에서는 LLM과 함께 하는 혁신적인 React 애플리케이션 디자인 패턴을 5가지 소개하고, 각 패턴의 적용 사례를 통해 실제 개발에

    llmreact디자인 패턴
    `LLM과 함께하는 React 애플리케이션 디자인 패턴 — 5가지 혁신적 접근법과 적용 사례
  • 강경원강경원· 8월 15일 · 3분 읽기

    React와 LLM의 통합 — 4개월간의 최적화 과정과 사용자 경험 개선 효과

    React와 LLM의 통합은 요즘 많은 개발자들 사이에서 화두가 되고 있다. 특히 사용자 경험을 극대화하기 위한 다양한 시도들이 이루어지고 있다. 이번 글에서는 4개월간의 최적화 과정을 통해 얻은 인사이트와 사용자 경험 개선 효과를 다뤄보겠다. React와 LLM 통합의 필요성 LLM

    llmreact프론트엔드
    `React와 LLM의 통합 — 4개월간의 최적화 과정과 사용자 경험 개선 효과
  • 강경원강경원· 8월 13일 · 3분 읽기

    AI를 활용한 React 앱의 동적 콘텐츠 생성 — 3개월 사용 후기와 성과 분석

    최근 몇 년간 AI 기술이 급격히 발전하면서, 웹 개발에서도 AI를 활용한 다양한 시도가 이루어지고 있다. 특히 React 앱에서 동적 콘텐츠를 생성하는 데 AI를 적용하는 것은 흥미로운 결과를 가져올 수 있다. 본 글에서는 3개월간 AI를 활용한 React 앱의 동적 콘텐츠 생성 경험

    aireact동적 콘텐츠
    `AI를 활용한 React 앱의 동적 콘텐츠 생성 — 3개월 사용 후기와 성과 분석
  • 강경원강경원· 8월 12일 · 3분 읽기

    사용자 행동 분석을 통한 React 앱 개선 — 6개월간의 데이터 기반 통찰

    사용자 행동 분석을 통한 React 앱 개선 — 6개월간의 데이터 기반 통찰 최근 6개월간 내 React 애플리케이션의 사용자 행동을 분석한 결과, 여러 가지 인사이트를 얻었다. 이 글에서는 데이터 기반으로 앱을 개선하기 위해 어떤 접근을 했는지, 그리고 그 과정에서 마주한 트레이드오프

    react사용자 경험데이터 분석
    `사용자 행동 분석을 통한 React 앱 개선 — 6개월간의 데이터 기반 통찰
  • 강경원강경원· 8월 12일 · 4분 읽기

    React와 AI 통합 — 실제로 만들어본 LLM 기반 챗봇의 성능과 개선 사항

    최근 AI 기술이 급격히 발전하면서, React와 같은 프론트엔드 프레임워크와의 통합이 활발히 이루어지고 있다. 이 글에서는 LLM 대규모 언어 모델 기반 챗봇을 React로 구현한 경험을 바탕으로 성능과 개선 사항에 대해 다뤄보고자 한다. 실제로 개발하면서 마주친 트레이드오프와 함정들

    aillmreact
    `React와 AI 통합 — 실제로 만들어본 LLM 기반 챗봇의 성능과 개선 사항
  • velog수집됨 · 8월 11일

    뒤로가기 눌렀는데 참여 전 화면이 나온다 — 이벤트 페이지와 브라우저 히스토리 씨름한 기록

    잡았다 요놈 두유노 후아이엠

    2026javascriptreact♡ 1
  • velog수집됨 · 8월 11일

    이미지 캐시 하나 만들었다고 피드 노출이 2초 → 0.7초가 된 이야기

    세상에 나쁜 plcaeholder는 없다.

    2026reactfront end♡ 3
  • velog수집됨 · 8월 11일

    [Clean Architecture 적용기 2편] 도메인은 fetch를 모른다 — port 하나, 어댑터 둘

    시리즈: 토이 프로젝트에 Clean Architecture 입혀보기1편 문제 인식 → 2편(이 글) → 3편 기능은 한 폴더에 → 4편 UseCase가 0개인 이유 → 5편 두 겹 검증원 출처: gi_balja님의 리액트 아키텍처 3편의 개념을 bible-map에 적용

    javascriptreacttypescript♡ 1
  • velog수집됨 · 8월 11일

    [Clean Architecture 적용기 1편] 잘 돌아가는 토이 프로젝트, 왜 손대기 싫어졌나

    시리즈: 토이 프로젝트에 Clean Architecture 입혀보기1편(이 글)

    cleanarchitecturejavascriptreact♡ 3
  • 강경원강경원· 8월 10일 · 3분 읽기

    React 서버 컴포넌트에서 데이터 패칭 최적화 — 실제 성능 개선 사례 3가지

    React 서버 컴포넌트는 클라이언트와 서버 간의 경계를 허물어주는 혁신적인 기능이다. 그러나 이 기능을 제대로 활용하기 위해서는 데이터 패칭 최적화가 필수적이다. 이번 글에서는 실무에서 경험한 성능 개선 사례를 통해 데이터 패칭 최적화의 중요성과 그 방법에 대해 알아보겠다. 1. 서버

    react서버 컴포넌트성능 최적화
    `React 서버 컴포넌트에서 데이터 패칭 최적화 — 실제 성능 개선 사례 3가지
  • 강경원강경원· 8월 9일 · 2분 읽기

    useOptimistic으로 낙관적 업데이트 제대로 쓰기

    좋아요 버튼을 눌렀는데 0.5초 뒤에 하트가 채워진다면, 그 0.5초는 사용자에게 "고장났나?"의 시간이다. 낙관적 업데이트는 서버 응답을 기다리지 않고 UI를 먼저 바꾸는 기법이고, React 19의 useOptimistic은 이걸 공식 패턴으로 만들었다. 수동 구현의 함정 useSt

    reactuseoptimisticux♡ 1
    `useOptimistic으로 낙관적 업데이트 제대로 쓰기
  • velog수집됨 · 8월 8일

    (React Native) 두 앱을 하나로 합치면서 번들은 나눈 이유

    앱은 하나로 합쳤습니다. 번들까지 하나로 묶지는 않았습니다.

    module federationre.packreact♡ 13
  • velog수집됨 · 8월 5일

    React 쓰면서 VDOM diff 과정 설명 못 했던 사람? (저요…)

    React를 사용할 줄 알면 VDOM도 아는 걸까요? (절레절레...)

    javascriptreactvdom♡ 16
  • velog수집됨 · 8월 5일

    Vanilla JavaScript로 VDOM 구현하기

    React를 사용할 줄 알면 VDOM도 아는 걸까요? 직접 vanilla js프로젝트에 VDOM을 도입해봤어요.

    javascriptreactvdom♡ 5
  • 강경원강경원· 8월 3일 · 1분 읽기

    React Server Components 1년 써보고 정리하는 멘탈 모델

    RSC를 처음 접하면 "서버에서 렌더링되는 컴포넌트"라는 설명이 오히려 혼란을 준다. SSR과 뭐가 다른데? 1년 운영해 보고 정착한 멘탈 모델을 공유한다. HTML이 아니라 데이터를 만든다 SSR은 HTML 문자열을 만들어 보낸다. RSC는 컴포넌트 트리를 직렬화한 데이터 RSC 페이

    reactnextjsrsc
    `React Server Components 1년 써보고 정리하는 멘탈 모델
  • velog수집됨 · 7월 12일

    리액트 너머, 공유 요소 트랜지션을 직접 구현해봤습니다

    인스타그램이나 구글 포토에서 사진을 누르면, 방금 누른 이미지가 다음 화면까지 이어집니다. 예전에는 앱에서 주로 보던 움직임인데 요즘은 웹에서도 어렵지 않게 만날 수 있습니다. Airbnb 웹에서 숙소 카드를 누를 때도 목록의 사진이 상세 화면까지 자연스럽게 이어집니다

    reactshared animationtransition♡ 13
  • 강경원강경원· 2월 10일 · 1분 읽기

    React 폼 상태 관리 전략

    React에서 폼을 관리할 때 useState 만으로 처리할지, 라이브러리를 쓸지, 어디까지 커스텀 훅으로 뽑을지에 대한 기준을 정리하는 글입니다. 1. 컨트롤드 vs 언컨트롤드 각 방식의 장단점과, 실제로 어떤 화면에서 무엇을 선택하는 게 좋은지 간단한 예시와 함께 비교합니다. 2.

    reactforms
    `React 폼 상태 관리 전략
  • 강경원강경원· 2월 10일 · 3분 읽기

    React Testing Library - 사용자 중심 테스트 작성하기

    React Testing Library는 사용자가 컴포넌트를 어떻게 사용하는지 를 중심으로 테스트를 작성하도록 유도하는 테스트 도구입니다. 구현 세부사항보다는 사용자 관점의 동작을 검증하는 것이 핵심 철학입니다. 1. 기본 사용법 screen.getByRole , screen.getBy

    reacttestingtesting-library
    `React Testing Library - 사용자 중심 테스트 작성하기
  • 강경원강경원· 2월 10일 · 1분 읽기

    React 코드 스플리팅과 Suspense 패턴

    번들 크기를 줄이고 초기 로딩 속도를 개선하기 위해 코드 스플리팅과 Suspense 를 어떻게 조합할지에 대한 간단한 메모입니다. 1. lazy와 Suspense 기본 React.lazy 와 Suspense 를 이용해 라우트 단위, 위젯 단위로 코드를 분리하는 패턴을 정리합니다. 2.

    reactcode-splittingsuspense
    `React 코드 스플리팅과 Suspense 패턴
  • 강경원강경원· 2월 10일 · 4분 읽기

    React Concurrent Features - useTransition과 useDeferredValue

    React 18의 Concurrent Features는 우선순위에 따라 렌더링을 조절 할 수 있게 해줍니다. useTransition 과 useDeferredValue 를 사용하면 사용자 입력을 즉시 반영하면서도, 무거운 업데이트는 지연시킬 수 있습니다. 1. useTransition으

    reactconcurrentusetransition
    `React Concurrent Features - useTransition과 useDeferredValue
  • 강경원강경원· 2월 10일 · 3분 읽기

    React Server Components - 서버에서 렌더링되는 컴포넌트

    React Server Components RSC 는 서버에서만 실행되고, 클라이언트로 JavaScript 번들을 전송하지 않는 새로운 컴포넌트 모델입니다. Next.js 13+ App Router에서 기본으로 사용되며, 성능과 번들 크기 최적화에 큰 도움을 줍니다. 1. Server

    reactserver-componentsnext.js
    `React Server Components - 서버에서 렌더링되는 컴포넌트
  • 강경원강경원· 2월 10일 · 3분 읽기

    React 성능 최적화 - 렌더링 최소화와 메모이제이션 전략

    React 애플리케이션의 성능을 개선하려면 불필요한 렌더링을 줄이고 , 비용이 큰 계산을 메모이제이션하는 것이 핵심입니다. 이 글에서는 실무에서 자주 사용하는 성능 최적화 기법들을 정리합니다. 1. React.memo로 컴포넌트 메모이제이션 props가 변경되지 않으면 리렌더링을 건너뜁

    optimizationreactperformance
    `React 성능 최적화 - 렌더링 최소화와 메모이제이션 전략
  • 강경원강경원· 2월 10일 · 1분 읽기

    React 상태 파생(derived state) vs memo - 어디에 두는 게 맞을까?

    React에서 자주 생기는 실수는 “계산 가능한 값”을 별도 state로 들고 가면서 동기화 버그 를 만드는 것입니다. 이 글은 derived state를 피하는 기준과, useMemo /계산 함수를 어디에 둘지 판단하는 실무 규칙을 정리합니다. 1. 결론부터 파생 가능한 값은 stat

    reactstateusememo
    `React 상태 파생(derived state) vs memo - 어디에 두는 게 맞을까?
  • 강경원강경원· 2월 10일 · 6분 읽기

    Storybook으로 React 컴포넌트 문서화

    Storybook을 사용해 React 컴포넌트를 카탈로그처럼 정리하고, 디자인 시스템에 가까운 구조를 만드는 과정을 기록하는 글입니다. 1. 기본 세팅과 스토리 작성 프로젝트에 Storybook을 설치하고, 버튼/입력 같은 기본 컴포넌트에 스토리를 작성하는 흐름을 정리합니다. 2. Co

    reactstorybookui
    `Storybook으로 React 컴포넌트 문서화
  • 강경원강경원· 2월 10일 · 1분 읽기

    React 컴포넌트 합성과 재사용 패턴

    컴포넌트를 합성해서 재사용성을 높이고, prop drilling이나 거대한 컴포넌트를 피하는 패턴들을 간단히 정리합니다. 1. Children 기반 합성 children 과 렌더 props를 활용해 레이아웃과 로직을 분리하는 패턴을 예시와 함께 정리합니다. 2. Compound Comp

    reactcomponents
    `React 컴포넌트 합성과 재사용 패턴
  • 강경원강경원· 2월 10일 · 3분 읽기

    React ref와 forwardRef - DOM 접근과 컴포넌트 간 ref 전달

    React에서 DOM 요소에 직접 접근하거나, 자식 컴포넌트의 메서드를 호출할 때 ref 를 사용합니다. 이 글에서는 useRef , forwardRef , useImperativeHandle 의 사용법과 실무 패턴을 정리합니다. 1. useRef 기본 사용법 ref.current 는

    reactrefforwardref
    `React ref와 forwardRef - DOM 접근과 컴포넌트 간 ref 전달
  • 강경원강경원· 2월 10일 · 3분 읽기

    React Hooks 베스트 프랙티스 - 실무에서 자주 놓치는 포인트

    React Hooks는 함수 컴포넌트에서 상태와 생명주기를 다루는 강력한 도구입니다. 이 글에서는 useState , useEffect , useCallback , useMemo 등을 실무에서 올바르게 사용하는 방법과 자주 발생하는 실수들을 정리합니다. 1. useState 초기값과 함

    reacthooksbest-practices
    `React Hooks 베스트 프랙티스 - 실무에서 자주 놓치는 포인트
  • 강경원강경원· 2월 10일 · 3분 읽기

    React Portal - DOM 트리 밖으로 컴포넌트 렌더링하기

    React Portal은 컴포넌트를 부모 컴포넌트의 DOM 계층 구조 밖 에 렌더링할 수 있게 해주는 기능입니다. 모달, 툴팁, 드롭다운 같은 UI 요소를 z index 문제 없이 구현할 때 유용합니다. 1. Portal 기본 사용법 createPortal children, contai

    reactportaldom
    `React Portal - DOM 트리 밖으로 컴포넌트 렌더링하기
  • 강경원강경원· 2월 10일 · 1분 읽기

    Framer Motion으로 React 애니메이션 다루기

    Framer Motion을 사용해서 React 컴포넌트에 자연스러운 모션을 추가할 때 기본적으로 알아 두면 좋은 개념들을 메모합니다. 1. motion 컴포넌트 기본 motion.div 와 animate , initial , transition 속성으로 단순한 등장/퇴장 애니메이션을 만

    reactanimationframer-motion
    `Framer Motion으로 React 애니메이션 다루기
  • 강경원강경원· 2월 10일 · 3분 읽기

    React Error Boundary - 에러 처리와 사용자 경험 개선

    React에서 컴포넌트 렌더링 중 발생한 에러를 우아하게 처리 하고, 앱 전체가 크래시되지 않도록 보호하는 방법을 Error Boundary로 구현할 수 있습니다. 이 글에서는 Error Boundary의 기본 개념과 실무에서 활용하는 패턴을 정리합니다. 1. Error Boundary

    reacterror-handlingerror-boundary
    `React Error Boundary - 에러 처리와 사용자 경험 개선
  • 강경원강경원· 2월 10일 · 1분 읽기

    React Context 성능 최적화 - 리렌더 줄이는 실전 패턴

    Context는 전역 상태처럼 편하지만, 설계가 나쁘면 작은 변경에도 트리 전체가 리렌더될 수 있습니다. 이 글은 Context 사용 시 성능을 안정적으로 유지하는 패턴만 짧게 정리합니다. 1. 문제가 되는 구조 큰 객체를 한 Context에 몰아 넣기 Provider value가 렌더

    contextreactperformance
    `React Context 성능 최적화 - 리렌더 줄이는 실전 패턴
  • 강경원강경원· 2월 10일 · 1분 읽기

    React 접근성(a11y) 가이드

    React로 UI를 만들 때 기본적인 접근성 a11y 원칙을 지키기 위한 체크리스트를 정리해 둔 글입니다. 1. 시맨틱 마크업 div 남용 대신 적절한 HTML 태그를 쓰는 기준과, 스크린 리더가 어떻게 읽는지 간단한 예를 메모합니다. 2. 포커스 관리 모달, 드롭다운, 토스트 등에서

    reactaccessibility
    `React 접근성(a11y) 가이드
  • 강경원강경원· 2월 10일 · 1분 읽기

    React Router 베스트 프랙티스

    React Router로 라우팅을 구성할 때 자주 부딪히는 문제들을 정리하고, 실무에서 많이 쓰는 패턴을 간단히 메모해 둔 글입니다. 1. 라우트 구조 설계 중첩 라우트, 레이아웃 컴포넌트, 코드 스플리팅을 어떻게 배치할지에 대한 기준을 잡습니다. 2. URL 설계 원칙 자원 중심 RE

    reactrouter
    `React Router 베스트 프랙티스
  • 강경원강경원· 2월 10일 · 1분 읽기

    Zustand로 가벼운 React 상태 관리하기

    Redux만 쓰기엔 부담스럽고, Context만으로는 아쉬울 때 쓸 수 있는 가벼운 상태 관리 라이브러리인 Zustand를 간단히 정리합니다. 1. 기본 스토어 정의 작은 예제로 create 함수로 스토어를 만들고, 컴포넌트에서 훅으로 사용하는 패턴을 기록합니다. 2. 상태 분리와 구조

    reactstatezustand
    `Zustand로 가벼운 React 상태 관리하기
  • 강경원강경원· 1월 28일 · 4분 읽기

    React 18 정리 - Concurrent Rendering과 실무 포인트

    React 18은 Concurrent Rendering 과 자동 배칭 , Suspense 개선 등을 통해 UI를 더 부드럽게 만들고, 서버 렌더링을 강화한 버전입니다. Next.js 13+ / 16 같은 프레임워크에서도 React 18 기능을 전제로 설계되어 있기 때문에, 핵심 개념은

    reactreact18
    `React 18 정리 - Concurrent Rendering과 실무 포인트
  • 강경원강경원· 1월 28일 · 4분 읽기

    Next.js 16 정리 - React 18 시대의 풀스택 프레임워크

    Next.js 16은 React 18을 기반으로 하는 풀스택 웹 프레임워크 로, 서버 컴포넌트 App Router , 스트리밍, 캐시, 미들웨어 등 프론트엔드와 백엔드를 모두 아우를 수 있는 기능을 제공합니다. 이 글에서는 Next.js 16에서 핵심적으로 알아야 할 개념과, 실무에서

    reactapp-routernext.js
    `Next.js 16 정리 - React 18 시대의 풀스택 프레임워크
  • 강경원강경원· 1월 24일 · 5분 읽기

    React Query 심화 - 캐싱 전략과 무한 스크롤, 에러 핸들링

    React Query는 클라이언트에서 서버 상태 데이터 를 관리하는 데 특화된 라이브러리입니다. 이 글에서는 기본 useQuery / useMutation 에서 한 단계 나아가, 캐싱 전략, 무한 스크롤, 에러 핸들링 을 중심으로 정리합니다. 1. 캐시 전략: staleTime, cac

    reactreact-querynext.js
    `React Query 심화 - 캐싱 전략과 무한 스크롤, 에러 핸들링
  • 강경원강경원· 11월 29일 · 7분 읽기

    React에서 getBoundingClientRect 활용하기

    React에서 getBoundingClientRect 활용하기 getBoundingClientRect 는 DOM 요소의 크기와 화면에서의 위치를 정확히 파악할 수 있는 메서드입니다. 이 메서드는 React에서 특정 요소가 화면에 보이는지 감지하거나, Lazy Loading, 애니메이션

    react
    `React에서 getBoundingClientRect 활용하기
  • 강경원강경원· 11월 28일 · 7분 읽기

    Next.js에서 Utterances 댓글 시스템 구현하기

    Next.js에서 Utterances 댓글 시스템 구현하기 Utterances는 GitHub 이슈를 활용하여 웹사이트에 간단하게 댓글 시스템을 추가할 수 있는 오픈 소스 프로젝트입니다. Next.js 프로젝트에 Utterances를 삽입하는 방법과, 테마 전환 시 깜빡임이 발생하는 방식

    reactutterancesnext.js
    `Next.js에서 Utterances 댓글 시스템 구현하기
  • 강경원강경원· 11월 28일 · 4분 읽기

    React useMemo, useCallback, memo 차이점

    useCallback , useMemo , 그리고 memo 는 모두 React에서 성능 최적화를 위해 사용되는 도구이지만, 각각의 목적과 사용 사례가 다릅니다. 아래에서 그 차이점을 설명하겠습니다. 1. useCallback 목적 : 함수를 메모이제이션하여 불필요한 재생성을 방지. 사용

    reactusememousecallback
    `React useMemo, useCallback, memo 차이점
  • 강경원강경원· 11월 26일 · 4분 읽기

    Next.js App Router 정리

    Next.js의 App Router 는 13버전부터 도입된 새로운 라우팅 방식으로, 기존의 Pages Router 보다 더 현대적이고 유연한 기능을 제공합니다. App Router를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 관리하며 React 18의 기능을 최대한 활용할 수

    reactnext.js
    `Next.js App Router 정리
  • 강경원강경원· 11월 26일 · 3분 읽기

    React Query useMutation

    React Query useMutation 사용법 React Query는 React 앱에서 데이터를 fetch하고 캐시하는 것을 간단하게 만들어주는 라이브러리입니다. useMutation은 React Query에서 제공하는 함수 중 하나로, 데이터를 create, update, dele

    reactreact-query
    `React Query useMutation
  • 강경원강경원· 11월 26일 · 3분 읽기

    React Query useQuery

    react query v4 설치 react query 브라우저 호환 아무 버전이나 다 되는 줄 알았는데, 호환하는 브라이저가 있는걸 알았다. react query 설정하기 1. quertClient를 모든 컴포넌트가 접근하는 CRA는 app.tsx, Next.js는 \ app.tsx에

    reactreact-querynext.js
    `React Query useQuery