전체 글

Intro시작하기에 앞서 두 개의 코드 스니핏을 보여드리겠습니다. 어떤 차이가 있을까요?참고로 Counter 컴포넌트의 로직은 같습니다. 이번 글에서 다룰 내용은 아래 두 코드의 차이에 대한 설명입니다. 바로 맞추신 분들은 자신있게 뒤로가기를 누르셔도 됩니다.// 1️⃣ 삼항 연산자function Scoreboard() { const [isPlayerA, setIsPlayerA] = useState(true); return ( {isPlayerA ? ( ) : ( )} { setIsPlayerA(!isPlayerA); }}> Next player! );}// 2️⃣ && 연..

Intro리액트 공식 문서의 Escape Hatches메뉴에 5가지의 effect에 대한 문서가 있습니다. 이 개념을 위해 이렇게 많은 설명이 필요한걸까요? useEffect에서 effect는 무엇을 의미할까요? 제대로 사용하기 위한 첫 걸음은 정확한 멘탈 모델을 세우는 것입니다. 많은 문제가 여기에서 출발합니다. 그리고 이 문제들을 해결하는 쉬운 방법은 lint의 경고를 준수하는 것입니다.function Page({ url }) { const { items } = useContext(ShoppingCartContext); const numberOfItems = items.length; useEffect(() => { logVisit(url, numberOfItems); // 🔴 린트..

IntrouseState에서 useReducer로, 상태 공간을 줄이는 설계 React에서 폼 UI를 구현할 때 가장 흔한 접근은 여러 개의 useState를 조합하는 방식입니다.const [answer, setAnswer] = useState('');const [error, setError] = useState(null);const [status, setStatus] = useState('typing'); 이 세 가지 값만 보더라도 폼의 상태를 표현하는 데 필요한 정보는 충분해 보입니다.하지만 이 구조에는 한 가지 중요한 문제가 있습니다.논리적으로 불가능한 상태가 “가능”해진다UI 관점에서 다음 상태는 명백히 모순입니다.status === 'success' 인데 error !== nullstatus =..

Intro프론트엔드 개발자라면 한 번쯤 이런 상황을 겪어보셨을 겁니다.오, 이 컴포넌트랑 저 컴포넌트 모양이 비슷하네. 그냥 공통 컴포넌트로 빼자. 당장에는 좋은 판단처럼 보이지만, 겉보기의 유사성만으로 추상화를 하게 되면 시간이 흘러 여러가지 책임이 혼재된 몬스터 모듈이 되기 쉽습니다. 따라서 같은 이유로 수정되는 코드가 명확한 책임의 범위를 가질 때 추상화를 해야합니다. 좀 풀어서 이야기하면 이 모듈이 수정되어야 하는 이유는 하나이여야 하며 그러기 위해서는 모듈의 책임이 명확해야 합니다. 여러가지 역할을 책임지게 되면 모듈이 수정되는 이유가 많아지게 되고 관리가 어려워집니다. 모듈의 책임이 모호하거나 책임의 범위가 넓어도 어디까지를 이 모듈의 책임으로 봐야할지 혼동되면서 모듈이 비대해집니다. 이번 글..

1. 문제 개요Mapbox 기반 지도에서 LineString 경로가 반자오선(경도 ±180°) 을 통과할 때, 경로가 의도한 방향과 반대로 지구 반대편으로 크게 꺾여 렌더링되는 현상이 발생합니다.예를 들어 한국(127°E)에서 미국 서부(-122°W)로 이동하는 경우 태평양을 가로질러 동경으로 이동해야 하지만 대서양 방향으로 서경으로 경로가 렌더링되게 됩니다. (첨부 이미지 참고)반자오선(Antimeridian)반자오선은 지구를 반으로 가르는 자오선(경선)으로, 일반적으로 180도 자오선을 의미하며, 본초 자오선(0도, prime antimeridian)과 마주보며 지구를 동반구와 서반구로 나누고, 국제 날짜변경선의 기준이 되는 선입니다. 2. 증상좌표와 좌표 사이가 반자오선을 통과하게 되는 경우 경로..

문제 개요지도 라이브러리(Mapbox GL JS)에서 LineString으로 표현된 경로를 따라 마커 또는 포인트를 애니메이션할 때,좌표 간 거리가 큰 경우 애니메이션 포인트가 시각적으로 그려진 경로를 벗어나는 현상이 발생합니다.이 이슈는 특히 좌표 간 간격이 큰 경우 두드러집니다.문제 증상경로(이미지상 하늘색 라인, LineString)은 정상적으로 표시되나, 애니메이션 중 계산된 endPoint가 경로를 이탈결과적으로 시각적 경로와 실제 애니메이션 위치가 불일치원인 분석LineString의 시각적 표현 방식LineString은 단순히 좌표의 직선 연결 로 렌더링된다.좌표 밀도가 낮을수록 이동 경로와 애니메이션의 오차가 벌어진다.애니메이션 위치 계산 방식 (along)애니메이션의 endPoint는 다음..

IntroFeature-Sliced Design(FSD)을 이야기할 때 흔히 “어디까지 나눌 것인가”에 집중합니다.하지만 실제로 유지보수 비용을 결정짓는 요소는 폴더의 개수가 아니라 의존성의 형태와 영향 범위입니다.이 글에서는 다음 질문에 답하려 합니다.변경이 발생했을 때, 의존 관계에 있는 코드들이 같은 위치에 모여있는가? (co-location)해당 변경의 영향 범위를 구조적으로 제한하고 있는가영향 범위가 명확해졌을 때, 계층 이동이 자연스럽게 일어나는가시나리오로 보는 “응집된 의존성”장바구니(cart) 페이지를 예로 들어보겠습니다.페이지 내부에 캡슐화된 구조pages/cart ├─ ui │ ├─ CartPage │ ├─ CartSummary │ └─ FreeShippingNotice └─ mo..

Intro새로운 버전을 배포했는데 사용자가 이전 버전을 계속 사용해서 문제가 생기는 상황을 경험해 보셨나요?이 문제는 HTTP 캐시 문제일 확률이 높습니다.이 글에서는 HTTP 캐시의 원리를 차근차근 살펴보고, 브라우저와 CDN이 어떻게 캐시를 판단하고 동작하는지,그리고 실무에서 안전하게 캐시를 설계하는 방법까지 정리해보겠습니다.1. 캐시란 ?캐시는 아주 단순한 개념입니다. 실제 데이터 저장소에서 직접 가져오는 대신에 이전에 가져온 데이터를 사용하는 것이 캐시의 개념입니다.“한 번 가져온 것을 원래 위치보다 가까운 곳에 저장해두고 빠르게 다시 사용하는 것”1-1. 캐시 대상HTTP에서 말하는 리소스(Resource) 란, 브라우저가 요청할 수 있는 모든 파일을 의미합니다.종류예시캐시 중요도HTMLinde..