쿠팡이츠 클론코딩(ft.프론트엔드)

이번 시리즈는 쿠팡이츠 클론코딩(ft.백엔드) 편에 이어서 쿠팡이츠 클론코딩(ft.프론트엔드)편으로 진행됩니다. 프로젝트 전반에 대한 설명은 쿠팡이츠 클론코딩 시작하기(ft.백엔드)를 참고해주시면 감사하겠습니다. 그렇다면 이번시간에는 바로 본론으로 들어가 프로젝트 생성

GraphQL Code Generator를 사용하여 React 프로젝트에서 Apollo Client와 함께 타입스크립트 타입을 자동 생성하는 과정을 단계별로 정리합니다. 이 과정은 GraphQL 스키마에 기반하여 필요한 타입스크립트 인터페이스와 훅스를 생성하여, API

React Router는 React 기반 애플리케이션에서 라우팅을 구현하기 위한 필수 라이브러리입니다. 싱글 페이지 애플리케이션(SPA)의 사용자 경험을 향상시키는 이 라이브러리는 페이지를 리로드하지 않고도 동적으로 클라이언트 사이드의 라우트를 관리합니다. 최근 출시된

쿠팡이츠는 React Router v6를 활용하여 사용자의 로그인 상태에 따라 다른 경험을 제공하는 동적 웹 애플리케이션을 구현하고 있습니다. 이 구현은 로그인 상태일 때와 로그아웃 상태일 때로 구분하며, 로그인한 사용자는 그들의 역할(고객, 사장, 배달기사)에 따라

웹 애플리케이션에서 헤더는 사용자가 가장 먼저 접하는 중요한 인터페이스 요소 중 하나입니다. 쿠팡이츠의 헤더 컴포넌트는 로고 클릭을 통한 홈페이지 접근, 계정 관리 기능, 그리고 로그인 상태 확인을 통한 다양한 사용자 역할에 따른 인터페이스 제공 등, 사용자 경험을 향

웹 애플리케이션에서 로그인 시스템을 효과적으로 구현하는 것은 사용자 경험과 보안 모두를 보장하는 데 중요합니다. 이 튜토리얼에서는 Apollo Client를 사용하여 React 애플리케이션에서 사용자 인증을 처리하는 방법을 보여주며, 데이터 처리에는 GraphQL을 활

React와 Apollo 클라이언트는 현대 웹 개발에서 중요한 도구이며, 여러 내장 Hooks를 통해 애플리케이션의 상태 관리와 데이터 통신을 효율적으로 할 수 있습니다. 이번 포스팅에서는 useForm, useNavigate, useMutation, useEffect

Apollo 클라이언트는 GraphQL 애플리케이션에서 클라이언트 측 캐시를 관리하고 조작하는 데 강력한 도구를 제공합니다. 이러한 도구 중 writeFragment와 refetch는 이메일 검증과 같은 변동 사항 후 캐시를 업데이트하는 서로 다른 접근 방식을 제공합니

이 블로그 포스트에서는 Apollo Client를 사용하여 React 애플리케이션에서 페이징을 구현하는 방법을 보여주며, 불필요한 네트워크 요청을 피하고 성능을 향상시키는 강력한 캐싱 메커니즘을 활용하는 방법을 설명합니다.Apollo Client는 서버에서 쿼리 결과

이 블로그 포스트에서는 React Router와 Apollo Client를 통합하여 React 애플리케이션에서 검색 기능을 관리하고 효율적으로 탐색하는 방법에 대해 살펴보겠습니다. 특히, URL 조작을 처리하기 위해 React Router의 navigate 함수와 데이

웹 애플리케이션에서 데이터의 업데이트 및 동기화를 관리하는 것은 사용자의 작업(예: 추가 또는 업데이트) 후에 원활한 사용자 경험과 데이터의 일관성을 유지하는 데 매우 중요합니다. Apollo Client는 데이터 패칭과 캐시 상호작용을 관리하기 위한 강력한 도구를 제

이번 포스트에서는 백엔드에서 구현된 uploads 기능을 활용하여 프론트엔드에서 AWS로 이미지를 업로드하는 과정을 단계별로 살펴보겠습니다. 주로 FormData 인터페이스를 사용하여 파일을 처리하고, 실제 이미지 업로드를 진행하는 방법을 설명합니다.FormData

블로그 글에서 React.js, GraphQL, Apollo를 활용하여 음식 추가, 수정, 삭제 기능을 개발하는 과정을 세부적으로 소개하겠습니다. 이 포스팅은 코드의 핵심 부분을 중심으로 기술적인 내용을 깊이 있게 다루며, 개발자들이 쉽게 이해할 수 있도록 설명합니다.

현대 웹 애플리케이션에서 실시간 데이터 처리는 특히 동적이고 상호작용적인 플랫폼에서 중요한 기능이 되었습니다. 오늘은 GraphQL 구독과 Apollo 클라이언트의 subscribeToMore 함수를 사용하여 주문 추적 시스템에서 실시간 업데이트를 관리하는 방법을 효과

현대 웹 애플리케이션에서 위치 기반 서비스의 중요성은 날이 갈수록 증가하고 있습니다. Google Maps API를 활용한 구현은 사용자에게 직관적이고 효율적인 인터랙션을 제공할 수 있습니다. 이 글에서는 Google Maps API와 React를 결합하여 실시간 위치

이번편에서는 배포에 대해서 알아보고자 합니다. 이전의 백엔드 배포편을 꼭 먼저 진행해주시길 바랍니다. 쿠팡이츠, Render로 백엔드 배포하기 프론트엔드 배포는 Netlify를 통해서 진행될 예정입니다. 그리고 이 역시 백엔드와 마찬가지로 원활한 진행을 위해서 GitH