taystory

377. Unexpected Loading State강의에서는 사용자 추가 버튼을 클릭할 때 발생하는 깜빡임 문제를 해결하기 위해 UI 상태 관리 방식을 개선하는 과정을 다룹니다.문제 상황버튼 클릭 시 발생하는 깜빡임 현상:Add User 버튼 클릭 시, isLoading 상태가 true로 설정되면서 기존 사용자 목록이 숨겨지고, 로딩 스켈레톤이 잠깐 표시됨.이 동작은 의도한 대로 작동하지만, 사용자 경험(UI/UX) 관점에서 부적절.해결 목표:기존 사용자 목록은 유지하면서, 새로운 사용자 추가 버튼에만 로딩 상태를 나타내도록 구현.로딩 중임을 사용자에게 명확히 전달하기 위해 버튼에 스피너 표시 또는 버튼 비활성화.초기 아이디어: 상태 분리로딩 상태를 세분화하는 방법:isCreatingUser → 사용자..

import { createContext, useState, useEffect } from "react";const NavigationContext = createContext();const NavigationProvider = ({ children }) => { // 1️⃣ 초기 경로를 설정 (브라우저의 현재 URL 경로를 React 상태로 동기화) // `window.location.pathname`은 브라우저의 현재 경로를 반환 // 초기화 시 앱 상태(currentPath)가 브라우저 URL과 일치하도록 설정 const [currentPath, setCurrentPath] = useState(window.location.pathname); // 2️⃣ 브라우저의 뒤로가기/앞으로가기 버튼 ..

220. Traditional Browser Navigation 전통적인 네비게이션:브라우저에서 URL을 입력하거나 링크를 클릭하면 서버에 GET 요청을 보내고, 서버는 요청에 맞는 HTML 파일을 반환합니다.브라우저가 새로운 HTML 파일을 로드할 때 기존의 JavaScript 환경은 완전히 초기화됩니다. 즉, 기존에 선언된 변수나 상태가 모두 사라집니다.React에서의 네비게이션:React에서는 페이지가 새로 로드될 때마다 새로운 HTML 파일을 요청하고, JavaScript 환경을 초기화하기 때문에 더 많은 요청이 발생합니다. 예를 들어, 첫 페이지를 로드하려면 index.html, bundle.js, 그리고 API 요청을 위한 추가적인 HTTP 요청이 필요합니다.전통적인 HTML에서는 한 번의 요..

210. A Challenging Extra FeatureApp.js에서 Dropdown 컴포넌트를 하나 더 추가하면, 이 둘의 value는 동기화되어 같은 밸류를 나타낸다 -> 버그가 아님. 같은 state를 공유하기 때문.리얼 버그는 dropdown이 아닌 페이지의 다른 영역을 클릭했을 때 닫히지 않는 것. > User clicks outside the dropdown comp? Set ‘isOpen’ to false…이론상으로는 쉬워보이지만, 사실은 조금 복잡하다.우리는 지금까지 컴포넌트가 직접 리턴하는 HTML 요소 상에 이벤트 핸들러를 붙이고, 그에 대한 함수를 정의해서 기능을 구현했다.그런데 여기서는 dropdown 컴포넌트가 반환하는 Div가 아닌, 그 바깥에 존재하는 예를 들면 ‘클릭’ 버..

React Router와 같은 클라이언트 사이드 라우팅에서 URL의 pathname 부분만을 사용해 페이지 탐색을 구현하는 이유는, 웹 애플리케이션의 동작 방식과 배포 환경의 특성 때문입니다. 이를 하나씩 풀어서 설명하겠습니다. 1. 배포 환경이 달라질 수 있기 때문애플리케이션은 **로컬 개발 환경 (localhost:3000)**에서 동작할 수도 있고, 프로덕션 배포 환경 (예: https://myapp.com, https://example.com:8080)에서 동작할 수도 있습니다.도메인 (domain)과 포트 (port)는 배포 환경에 따라 달라질 수 있지만, 애플리케이션의 **페이지 구조 (path)**는 동일하게 유지되어야 합니다.React Router는 도메인과 포트를 신경 쓰지 않고, 오직 ..