REACT (21) 썸네일형 리스트형 React 상태 초기화 vs 원복, 뭐가 다른 걸까? React를 쓰다 보면 상태 초기화, 상태 원복(되돌리기)을 다루게 되는 경우가 꽤 많다.예를 들어…사용자가 어떤 폼을 열었을 때 기본값으로 초기화하고 싶을 때사용자가 입력하던 중 “취소” 버튼을 눌러서 원래 값으로 되돌리고 싶을 때겉보기엔 비슷해 보이지만, 이 두 개는 의도와 동작이 엄연히 다르다.이번 글에서는 "초기화"와 "원복"을 구분하는 이유,그리고 실무에서 이걸 헷갈려 생긴 문제와 해결 방법을 정리해본다. ---초기화 vs 원복, 뭐가 다를까?구분 초기화 (Reset) 원복 (Restore) 초기화원복목적상태를 기본값으로 되돌림특정 시점의 데이터를 다시 불러옴시점폼을 새로 열거나 처음 접근했을 때수정 중 취소하거나 롤백할 때기준값"기본값" 상수나 최초 정의된 값실제 API에서 받아온 값 (.. 모바일에서만 영상이 안 나와? 내 삽질기 (ft. Range 헤더) Node.js로 구성된 환경에서 나는 영상을 가져오는 기능을 담당하는 api를 개발했다.정말 그냥 http://localhost/file/test.mp4하면 아래처럼 영상을 보여주는 api다.. PC에선 잘 보이는 영상이, 모바일에선 깨져서 나오거나 재생이 안 되는 경우가 있다.영상 스트리밍에 필요한 HTTP Range 요청과 206 Partial Content 응답을 서버가 제대로 지원하지 않으면 모바일 브라우저에서 재생 실패한다.이 글은 내가 직접 겪은 삽질 과정을 정리한 글이다. 혹시 같은 문제로 고생 중이라면 도움이 되기를,,.(과연?) Node.js 기반의 API에서 아래처럼 단순히 동영상을 반환하는 기능을 만들었다.GET http://localhost:8080/file/test.mp4.. BFF(Backend For Frontend)? 요즘 프론트엔드와 백엔드가 분리된 구조가 당연해지고, 서비스가 커지면 자연스럽게 MSA(마이크로서비스 아키텍처)로 넘어가는 경우가 많아졌다.이런 흐름 속에서 등장한 개념 중 하나가 바로 **BFF(Backend For Frontend)**다.처음엔 이게 뭔가 싶었는데, 알고 보면 꽤나 실용적인 패턴이었다.한 마디로 말하면, 프론트엔드가 더 편하게 일할 수 있도록 도와주는 백엔드라고 보면 된다.BFF가 뭐지?기존의 백엔드는 하나의 공통된 API 서버를 통해 프론트의 요청을 처리했다. 웹이든, 모바일이든, 똑같은 API를 사용해야 했고, 거기에 맞춰 데이터를 가공해서 써야 했다.근데 이제는 웹, 모바일, 태블릿 등 사용자 환경이 다양해지다 보니 모두에게 딱 맞는 API 하나를 만드는 게 점점 어려워지고 있다.. Zustand란? Zustand는 리액트에서 사용할 수 있는 가벼운 상태 관리 라이브러리다. 단순한 API 기반으로 작동하며, create 함수 하나만으로도 커스텀 훅을 생성할 수 있어 사용법이 간결하다.Redux와 비교했을 때 불필요한 설정이 없고, 모듈화도 편해서 최근 프로젝트에 종종 사용하게 된다.Redux와의 차이Redux는 상태 관리를 위해 createStore, combineReducers, Reducer 등을 설정해야 한다.import { combineReducers } from "redux";import nameTag from "./nameTag";import location from "./location";import excel from "./excelData";const rootReducer = comb.. Redux Toolkit - RTK Query 사용 후기 및 정리 Redux Toolkit 공식 문서에 따르면, RTK Query는 강력한 데이터 패칭(fetching)과 캐싱(caching) 도구이다.나 역시 약 3개월간 RTK Query를 사용하면서 직접 느낀 장점들이 있었다.RTK Query 장점API로부터 호출된 데이터가 자동으로 캐싱된다.일반적으로 조건이 변경될 때마다 API를 재호출해야 하지만,RTK Query는 이전 조건으로 돌아가면 캐싱된 결과를 그대로 활용해 API 재요청을 줄여준다.API 응답 상태 관리를 자동화한다.Redux-thunk에서는 loading 상태를 직접 설정해야 했다.하지만 RTK Query는 isLoading, status 등의 프로퍼티를 기본 제공해 상태 관리가 간단하다.const { data, error, isLoading } =.. React로 Intersection Observer 없이 Viewport 감지 구현하기 Intersection Observer API는 특정 엘리먼트가 viewport에 보일 때 관찰할 수 있게 해준다. 주로 페이지 성능 개선을 위해 Lazy Image Loading 등에 사용한다. 하지만 여기서는 Intersection Observer를 사용하지 않고, React와 TypeScript로 비슷한 기능을 직접 구현해보자.1. 화면 크기 구하기 및 이벤트 감지엘리먼트가 화면에 보이는지 관찰하려면, 먼저 window의 width, height를 알아야 한다. 화면 크기가 변할 때마다 관찰 함수를 실행하도록 resize 이벤트 핸들러를 추가한다. 또한, 스크롤이 발생할 때도 엘리먼트 위치를 재확인해야 하므로 scroll 이벤트 핸들러도 등록한다.// useEffect 예시useEffect(() =.. JSX에서 줄바꿈이 안되는 이유와 해결법 JSX에서는 일반적으로 문자열 내의 \n이 줄바꿈으로 동작하지 않고, 오히려 오류를 발생시키거나 무시된다.즉, 아래와 같이 작성하면 줄바꿈이 되지 않는다.const text = "첫 번째 줄\n두 번째 줄";return {text}; 하지만 CSS에서 white-space 속성을 pre-line으로 지정해주면, 문자열 내 \n을 줄바꿈으로 인식하게 되어 의도한 대로 출력할 수 있다. 예시: {"첫 번째 줄\n두 번째 줄"}이렇게 하면 실제 화면에서 아래처럼 줄바꿈이 적용된다.첫 번째 줄두 번째 줄 이미지 비교 슬라이더 구현 (Before / After) 두 개의 이미지를 겹쳐 놓고, 슬라이더(막대)를 X축 방향으로 이동시켜가며 전후 이미지를 비교할 수 있도록 구현했다. 중심 아이디어는 다음과 같다. 두 이미지를 같은 위치에 겹쳐 놓는다.슬라이더 막대(ref 부여)를 마우스로 드래그할 수 있게 만든다.이미지를 clip 속성으로 잘라서, 슬라이더 기준으로 보여질 영역을 조정한다. 이미지 2개 겹치기 두 개의 이미지를 position: absolute로 완전히 겹치게 만들고, 슬라이더 막대는 중앙에 배치한다.막대 드래그 로직ref로 막대 DOM에 접근마우스 이벤트로 position.x 좌표값 변경transform: translateX를 통해 실시간 이동const onMouseMove = useCallback((event) => { if (pres.. 이전 1 2 3 다음
