웹 접근성을 위한 role과 aria-label의 차이점과 활용법 최근에 진행 중인 신규 프로젝트에서 웹 접근성을 고려하여 개발을 진행하였다. 하지만 웹 접근성 가운데 고려할 수 있는 스크린 리더를 위한 처리는 자세히 알지 못하였기에 스크린 리더를 고려할 수 있는 `role`과 `aira-label` 속성에 대해서 고민하게 되었고 `role`과 `aria-label`에 차이점과 활용법을 알아보려고 한다.  role , aria-label?속성역할주요 용도role요소의 역할(목적)을 지정스크린리더가 요소를 어떻게 해석할 지 결정aira-label사용자에게 제공할 설명을 추가의미 없는 아이콘이나 비표시 텍스트에 설명 부여 핵심 차이점`role`은 요소의 기능을 정의한다.`aria-label`은 사용자가 들을 수 있는 설명을 추가한다role 속성의 활용법`role` 속성은 ..

2025. 4. 4.

개발

ProseMirror 가이드 톹아보기 이전 글에서는 동시 편집을 지원하기 위한 프로토콜인 WebRTC와 WebSocket에 대해서 차이와 동작 방식을 짧게나마 알아봤다. 이번에는 WYSIWYG 리치 텍스트 에디터를 만들기 위한 도구와 개념들을 제공하는 ProseMirror를 알아보려고 한다. ProseMirror Guide ProseMirror Guidestrong "strong text with " em "emphasis"prosemirror.net ProseMirror는 현재 사내에서 사용하고 있는 협업 툴인 Jira에서도 텍스트 에디터로 사용되고 있다. 또한 예전부터 관심 있는 동시편집에 있어서 ProseMirror가 매우 좋은 성능을 발휘하고 있다고 알고 있어서  ProseMirror를 이 기회에 분석해야 겠다고 생각해 가이드 문서를..

2025. 3. 31.

개발

WebRTC 와 WebSocket의 차이 알아보기 요즘 회사에서 새로운 웹 에디터를 개발하려고 준비중이다.관련 기술을 학습해야하는 시간이 왔는데 웹 에디터에 동시 편집을 지원하기 위한 대표적인 프로토콜 방법인WebRTC와 WebSocket에 대해서 장/단점을 비교하고 동작방식에 대해서 알아보려고 한다. WebRTC (Web Real-Time Communication)란?WebRTC(Web Real-Time Communication)는 브라우저 간(P2P) 직접 실시간 데이터 통신을 가능하게 하는 기술주로 오디오/비디오 스트리밍, 실시간 파일 전송 등에 사용기본 개념: P2P 연결을 통해 클라이언트끼리 직접 데이터를 교환함.특징:낮은 지연시간 (Low Latency) → 서버를 거치지 않고 직접 통신오디오/비디오 스트리밍 지원 → 실시간 화상 채팅, 라이..

2025. 3. 28.

개발

크로미움 브라우저에서 p 내부 span을 삭제할 때 span이 날아간다면 ? 오랜만에 사내에서 제품으로 관리하고 있는 웹 에디터 유지보수 이슈를 진행하면서 겪은 일을 공유해보자 한다. 문제아래와 같은 HTML을 사용자는 웹 에디터에서 편집하고자 한다.안녕하세요요즘 날씨가 많이 덥네요건강관리 잘 하세요~ 이 HTML은 아래와 같이 사용자에게 보일 것이다.만약 사용자가 빈 span 태그에 캐럿( 마우스를 클릭하면 깜빡이는 것 )을 위치한 채삭제(backspace/delete)를 눌렀다면 사용자가 기대하는 경험은 무엇일까 ?사용자는 빈 문단이 삭제되면서 아래에 있는 문단이 한 줄 올라오는 것을 기대할 것이다.하지만 여기서 사용자가 delete 키를 눌러 뒤의 문단을 계속적으로 삭제할 경우 어떻게 될까? 현재 Edge 브라우저 기준 about:blank에서 body에 contentedi..

2024. 8. 17.

개발

Zustand에 대해서 알아보기 개요요즘 관심있게 살펴보는 부분이 리액트의 상태관리인데 예전부터 공부해보고 싶다고 생각했던 Zustand를 공부할 일이 생겨서 공부 + 정리를 하고자 한다. Zustand란 ?- 간소화된 Flux 원칙을 사용하고 작고 빠르게 확장 가능한 barebone 상태 관리 솔루션barebone의 뜻더보기더보기- Zustand란 독일어로 state룰 뜻한다- Zustand는 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션 Zustand의 특징- 상용구(boilerplate) 코드 감소- Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링한다- 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다- Hooks를 사용하여 상태를 사용한다- 컨텍스트 제공을 필..

2024. 7. 26.

개발

Docker 시작하기 개요이전 글에서 자바스크립트로 개발된 프로젝트를 리액트 환경으로 지원될 수 있도록 진행한 프로젝트를 끝 마쳤다고 했다. 이번에는 리액트 환경도 지원을 하면서 도커 환경에서도 실행해야 하는 임무를 맡게 되었다..도커의 ㄷ과 docker의 d을 모르는 나에겐 걱정스럽기만한 임무여서 스프린트 일정을 짜는 것 자체가 너무 어려웠다. 뭘 알아야 스프린트 일정을 짜겠는데 모르겠어서 옆 팀의 백엔드 개발자 분들의 바짓가랑이를 붙잡고 물어봤고 겨우 계획을 세웠다. 도와주신 분들에게 감사.. 압도적 감사다.도커(docker)란 ?도커의 개요도커란 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다.도커는 소프트웨어 컨테이너라는 표준화된 유닛으로 패키징 하며, 이 컨테이너에는 라이브러리, 시스템..

2024. 7. 8.

개발