프론트엔드 시스템 디자인 - 9. 대규모 트래픽을 감당하는 프론트엔드 관측 아키텍처 인프런 강의인 미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해 를 참고하여 공부하며 포스트로 정리하고 있습니다. 처음부터 보시려면 프론트엔드 시스템 디자인 - 1. RADIO 접근법 부터..!1. 프론트엔드 관측성이 필요한 이유프론트엔드 코드는 개발자 컴퓨터에서만 실행되지 않는다. 실제 사용자의 브라우저에서 실행되며, 사용자마다 기기와 네트워크, 브라우저 환경이 다르다.개발 환경에서는 정상적으로 동작하던 기능이 특정 모바일 기기에서만 실패하거나, 검색 결과가 일부 사용자에게 유독 늦게 나타날 수 있다. 결제 버튼을 눌러도 아무런 반응이 없는 상황도 마찬가지다.이런 문제는 개발 환경에서 직접 실행해 보는 것만으로 찾기 어렵다. 실제 사용자 환경에서 어떤 ..
프론트엔드 시스템 디자인 - 8. 렌더링 전략 심화 (CSR, SSR, SSG, RSC) 인프런 강의인 미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해 를 참고하여 공부하며 포스트로 정리하고 있습니다. 처음부터 보시려면 프론트엔드 시스템 디자인 - 1. RADIO 접근법 부터..!렌더링 전략은 무엇이 더 빠른가의 문제가 아니라, 어떤 비용을 서버, 빌드, 브라우저, CDN, 사용자 시간 중 어디에 둘 것인가의 문제다.1. 렌더링 전략이 정하는 네 가지CSR, SSR, SSG, RSC를 고른다는 건 아래 네 가지를 정하는 일이다.언제 데이터를 가져오는가어디서 UI를 만드는가브라우저에 자바스크립트를 얼마나 보내는가언제부터 사용자가 조작할 수 있는가이 글에서는 이 네 가지를 하나의 축으로 묶어서 본다.사용자가 화면을 보는 시점과, 화면을 조작할 ..
모듈 평가 순서 이해하기 새로고침할 때만 React Router loader가 실패했던 이유특정 페이지에 진입하면 loader에서 데이터를 정상적으로 불러오지만, 해당 페이지에서 직접 새로고침하면 errorElement가 렌더링되는 문제가 있었다.처음에는 MSW의 초기화 시점이나 요청 핸들러를 의심했다. 하지만 핸들러 자체는 정상이었고, 문제는 요청이 발생하는 시점에 있었다.이 문제를 해결하는 과정에서 React의 렌더링 시점과 JavaScript 모듈의 평가 시점을 비교하며 헷깔리던 모듈 평가를 순서대로 정리해볼 수 있었다. 1. 같은 페이지인데 왜 새로고침할 때만 실패하는 이유 문제는 두 가지 진입 경로에서 다르게 나타났다.진입경로결과메인 페이지에서 다른 페이지로 이동정상 동작해당 페이지 URL에서 직접 새로고침errorEl..
프론트엔드 시스템 디자인 - 7. 대규모 조직을 위한 마이크로 프론트엔드 (MFE) 인프런 강의인 미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해 를 참고하여 공부하며 포스트로 정리하고 있습니다. 처음부터 보시려면 프론트엔드 시스템 디자인 - 1. RADIO 접근법 부터..! 프론트엔드 아키텍처는 무엇을 위해 존재하는가사용자가 제품을 안정적으로 이해하고 조작할 수 있게 만들기 위해 존재한다. 그래서 사용자에게는 하나의 제품처럼 보여야 한다.하지만 내부적으로는 여러 팀이 동시에 개발한다. 각 팀은 자기 도메인을 빠르게 배포하고 싶어 하고, 전체 디자인과 접근성, 성능, 관측성 기준은 일관되어야 한다.대규모 프론트엔드 아키텍처의 목적은 세 가지다.One Product Experience. 하나의 제품 경험을 일관성 있게 유지한다여러 팀이 ..
프론트엔드 시스템 디자인 - 6. 통신 프로토콜 설계 인프런 강의인 미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해 를 참고하여 공부하며 포스트로 정리하고 있습니다. 처음부터 보시려면 프론트엔드 시스템 디자인 - 1. RADIO 접근법 부터..! RADIO의 Interface 단계에서 다루는 부분이다. 화면과 서버가 어떤 방식으로 데이터를 주고받을지를 정한다.핵심은 프로토콜을 외우는 것이 아니라, 화면의 사용자 경험과 데이터 흐름을 보고 어떤 통신 방식이 맞는지 판단하고 그 근거를 설명하는 것이다.각 섹션 아래의 "추가 정리"는 강의 내용에서 이어서 따로 찾아본 내용이다.통신 방식을 잘못 고르면 생기는 일불필요하게 API 호출이 많아진다실시간 기능이 느리거나 불안정해진다클라이언트 상태 관리가 복잡해진다캐..
프론트엔드 시스템 디자인 - 5. 복잡한 상태관리의 한계를 넘는 프론트엔드 FSM 설계법 인프런 강의인 미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해 를 참고하여 공부하며 포스트로 정리하고 있습니다. 처음부터 보시려면 프론트엔드 시스템 디자인 - 1. RADIO 접근법 부터..! 복잡한 UI 상태 설계는 값을 저장하는 법이 아니라, 사용자와 시스템이 어떤 상태에서 어떤 이벤트를 통해 어디로 이동할 수 있는지 설계하는 일이다. 이전 글 (프론트엔드 시스템 디자인 - 4. 대규모 상태 관리와 Data Fetching 패러다임) 에서 상태의 위치를 정하는 방법을 다뤘다면, 이번에는 그 상태가 시간에 따라 어떻게 이동하는지를 다룬다. FSM은 컴퓨터공학에서 오래 쓰인 모델이라 앞 글의 의사수식들과 달리 정식으로 정의된 개념이다. 다만 이걸 R..
프론트엔드 시스템 디자인 - 4. 대규모 상태 관리와 Data Fetching 패러다임 상태 관리는 상태의 원본과 변경 주체, 필요 범위, 만료 시점, 복구 방식을 기준으로 상태의 위치와 책임을 프론트엔드 시스템에서 설계하는 일이다. *아래 정리한 내용엔 Query Key나 Mutation처럼 다 익숙한 것들이 있다. 그런데 몇몇 표현들 때문에 이해가 안돼서 멈춰가면서 좀 뜻을 찾아보면서 들었다. 그런 부분들은 StatePlacement(S) = f(Origin, Writers, Scope, ...) 같은 표기가 나오는 부분인데 이건 정착된 표기법이라기보단 강사님이 설명용으로 만든 의사수식인 것 같다. 그러니 수식 자체를 외우기보다 그 안에 어떤 판단 기준이 들어있는지를 보자. 일단 아래 정리에서는 강사님이 쓴 표기를 그대로 옮겨두었다. 1. 상태를 함수처럼 분석하기어떤 상태 S가 있다고 ..
웹 접근성 레퍼런스 모음 tailwind-a11y를 만들고 관련 글을 쓰면서 모은 자료. 계속 업데이트 예정통계웹 전체의 현황🔗 https://webaim.org/projects/million/ WebAIM: The WebAIM Million - The 2026 report on the accessibility of the top 1,000,000 home pagesIntroduction For the eighth consecutive year, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites. The evaluation was conducted using the WAVE stand-alone API (wi..
프론트엔드 시스템 디자인 - 3. Agentic UI와 AI-native 프론트엔드 설계 인프런 강의인 미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해 처음부터 보시려면 프론트엔드 시스템 디자인 - 1. RADIO 접근법 부터..! Vite + React + TypeScript로 클라이언트를 만들고 Express 서버를 붙이고, LLM에게 목표를 전달하고 계획을 받아 실행하는 정도로 생각했지만 하나씩 붙이다 보니 생각보다 프론트엔드에서 신경 써야 할 게 많았다. 계획을 세우는 동안에는 어떤 상태여야 하는지, 사용자의 승인은 상태인지 이벤트인지, 도구 하나가 실패했을 때 전체 작업을 실패로 볼 것인지, 재시도 이후에는 어떤 데이터를 기준으로 최종 결과를 다시 만들어야 하는지 같은 고려하지 못했던 부분들이 생겨서 고민할거리들이 많았던 것 ..

티스토리툴바