프론트엔드 시스템 디자인 - 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에게 목표를 전달하고 계획을 받아 실행하는 정도로 생각했지만 하나씩 붙이다 보니 생각보다 프론트엔드에서 신경 써야 할 게 많았다. 계획을 세우는 동안에는 어떤 상태여야 하는지, 사용자의 승인은 상태인지 이벤트인지, 도구 하나가 실패했을 때 전체 작업을 실패로 볼 것인지, 재시도 이후에는 어떤 데이터를 기준으로 최종 결과를 다시 만들어야 하는지 같은 고려하지 못했던 부분들이 생겨서 고민할거리들이 많았던 것 .. Tailwind-a11y 개발 기록 4편 (출시 2주 뒤 ! 2300+ download 라니) tailwind-a11y를 처음 만들기 시작한 지 2주 정도 됐다.처음에는 그냥 AI 가 CSS 라이브러리로 많이 채택하는 Tailwind 의 접근성 문제를 조금 더 빨리 잡아보고 싶어서 만든 스크립트같이 간단한 레포였는데,, 이것저것 붙이다 보니 지금은 CLI도 있고, ESLint 플러그인도 있고, VS Code 익스텐션도 있고, 최근엔 GitHub Action까지 마켓플레이스에 배포했다. (이건 쓰임이 많을 것 같진 않다 ㅎㅎ) 시간 날때마다 조금씩 라이브러리를 업데이트 하는게 재미지다. 그리고 npm 다운로드가 2,300을 넘었다.(!) pr 이 올라오거나 연락이 오는게 아니니 사실 나에게 와닿는 건 없지만..내가 만든 패키지를 누가 실제로 설치해서 쓰고 있다는 게 잘 안 믿기긴 한다. 업데이트.. 프론트엔드 시스템 디자인 - 2. 자동완성 검색창 인프런 강의인 미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해 를 참고하여 공부하며 포스트로 정리하고 있습니다. 처음부터 보시려면 프론트엔드 시스템 디자인 - 1. RADIO 접근법 부터..! 프론트엔드 시스템 디자인 - 1. RADIO 접근법프론트엔드를 개발하며 대규모 트래픽에서 안정적으로 동작하게 설계하는 방법 같은 질문 앞에서는 어디서부터 생각을 시작해야 할지 명확한 정리가 필요하다고 느껴왔다. 말로 설명하려면 머kimhaeun.com 지난 글에서 정리한 RADIO 프레임워크 적용사례로, 주제는 자동완성 검색창이다.Input과 Dropdown만 있는 작은 UI지만, 요구사항을 제대로 짚어보면 생각보다 다룰 게 많다. 문제 정의구글 검색창을 예로.. Tailwind-a11y 개발 기록 3편 공부 많이 된다 어제 vscode 어댑터도 추가하고, cli, eslint, vscode 가 동시 배포되는 워크플로도 세팅해서 버전 올라가는 pr 이 머지될 경우 action 이 돌아서 한번에 배포되게끔 세팅을 해두었다.이쯤에서 내가 라이브러리를 개발하면서 얻은 인사이트를 정리하고 가면 좋을 것 같아서 글을 적게 되었다. 라이브러리를 처음 만들며 찾은 다른 점들웹앱은 내가 부르는 코드를 내가 실행하는 구조라 자유롭다. 반면 라이브러리는 내가 모르는 남의 코드가, 내가 모르는 타이밍에, 내가 정해둔 규칙대로 내 코드를 불러 쓰는 구조다. 이 차이는 알고 있었지만 실제로 개발을 해보니 또 새로운 인사이트가 많았던 것 같다. 모르는게 많았던 만큼 클로드랑 토론도 많이 하고 다른 오픈소스나 ESlint, Prettier 들 구.. Tailwind-a11y 개발 기록 2편 (Babel AST로 Tailwind 접근성 분석기 만든 과정) https://kimhaeun.com/136 Tailwind-a11y 개발 기록 (라이브러리 npm 배포!)Tailwind 접근성 검사 라이브러리를 처음 만들어 npm에 배포해봤다.프론트엔드 개발자로 일하면서 언젠가는 작은 오픈소스 라이브러리 하나쯤은 직접 만들어 보고 싶다는 생각을 계속 하고 있었다kimhaeun.com1편에서는 tailwind-a11y를 만든 계기나 전반적인 내용을 적었다면 이 글은 기술적인 부분을 기록하는 것이 주가 될 예정이다. JSX를 파싱하는 부분, Tailwind 클래스를 CSS 값으로 변환하는 로직, 그리고 같은 패턴으로 두 번 발생한 미탐 버그의 원인을 코드와 함께 정리했다.분석 구조tailwind-a11y의 분석 과정은 세 단계로 나뉜다.파싱: Babel로 JSX 소스코.. 이전 1 2 3 4 ··· 13 다음