도리 도리

SSE(Server Sent Event)를 사용해보자.서버에서 입력한 내용을 화면에 마크다운으로 띄워주는 프롬프터를 만들어본다.github: https://github.com/JAAAAAEMKIM/practice/tree/main/sse-practice스펙1. 서버사용자 입력을 받아 라인별로 클라이언트에 전송한다.SSE를 통해 구현한다.2. 클라이언트서버와 연결되어, 사용자 입력을 화면에 표시한다.Markdown을 사용해서 실시간으로 보여준다.서버 개발하기기술 스택: Bun, TypescriptBun 선정 이유Typescript 바로 실행 가능간단한 서버 실행서버 실행구현은 SSE 관련 내용의 bun github issue를 참고했다.https://github.com/oven-sh/bun/issues/2..

https://youtu.be/0ckOUBiuxVY React Conf 2024에서 Demystifying Accessibility in React Apps라는 발표가 있었다.이번 포스팅에서는 발표 내용을 정리하며 React 앱에서 접근성을 어떻게 구현할 수 있는지 알아본다.접근성의 정의Accessibility: 장애가 있는 사람들도 동일하게 접근하고 사용할 수 있도록 하는 것.실생활 예시: 휠체어 경사로, 점자 블록 등.디지털 환경: 스크린 리더 등이 해당됨.접근성의 동작 방식웹 문서는 HTML로 받아 DOM 트리로 파싱하고 UI로 사용자에게 보여진다.이 때, DOM 트리를 기반으로 접근성 트리(Accessibility Tree)가 생성된다.접근성 트리는 개발자 도구에서 확인할 수 있다.DOM 노드처럼..

TL;DR Suspense는 내부에서 throw된 Promise를 감지할 수 있음. 이를 통해 data loading 로직과 ui 로직을 분리할 수 있음. Tanstack Query나 Suspend React 등을 통해 간단한 예를 만들어 볼 수 있다. 소개 기존의 Suspense 이전의 Suspense는 lazy 로드된 코드를 불러올 때 fallback UI를 노출하는데에 사용되었다. 이를 통해 code splitting을 할 수 있었다. const LazyComponent = lazy(() => import('path/to/component')); React 18 버전 React 18부터는 Data fetch에 대해서도 Suspense UI를 노출할 수 있도록 하였다. 공식 문서 공식 문서를 참고하면..