프론트엔드 시스템 디자인 - 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 지난 글에서 정리한 RADI.. 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 소스코.. Tailwind-a11y 개발 기록 (라이브러리 npm 배포!) Tailwind 접근성 검사 라이브러리를 처음 만들어 npm에 배포해봤다.프론트엔드 개발자로 일하면서 언젠가는 작은 오픈소스 라이브러리 하나쯤은 직접 만들어 보고 싶다는 생각을 계속 하고 있었다.처음에는 Tailwind 관련 라이브러리를 만들어볼까 생각했다. 하지만 이미 Tailwind 생태계는 너무 성숙했고, 비슷한 라이브러리를 하나 더 만드는 건 큰 의미가 없다고 느꼈다.그래서 새로운 걸 만들기보다, 기존 도구들이 잘 해결하지 못하는 문제를 찾아서 해결해보는 방향으로 바꾸었다. 그렇게 시작해서 이번에 처음으로 두 개의 npm 패키지를 배포했다.tailwind-a11y : Tailwind CSS 프로젝트에서 접근성(WCAG)을 빌드 타임에 검사하는 CLIeslint-plugin-tailwind-a11y.. 프론트엔드 시스템 디자인 - 1. RADIO 접근법 프론트엔드를 개발하며 대규모 트래픽에서 안정적으로 동작하게 설계하는 방법 같은 질문 앞에서는 어디서부터 생각을 시작해야 할지 명확한 정리가 필요하다고 느껴왔다. 말로 설명하려면 머릿속에 완벽한 다이어그램이 그려져야하는 사람이라 한번 각잡고 정리해봐야겠다 싶었다. 그치만 백엔드 시스템 디자인 자료는 많은데, 프론트엔드 관점의 시스템 디자인을 체계적으로 다루는 자료는 의외로 찾기 어려웠다. 여기저기 뒤지다가 인프런에서 [미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해] (링크: https://inf.run/8ezQ9 ) 라는 강의를 발견했다. 한번 들어볼까 싶었다가.. 이 글은 그 강의의 앞부분, AI 시대 프론트엔드 엔지니어의 역할과 RADIO 접근법.. 이전 1 2 3 4 5 다음