코드의 심플 디자인에 대해서 코드에 있어서 심플 디자인이란 무엇일까?2주 전쯤, 처음으로 인프런에서 진행하는 `Simple Design` 밋업에 참가했어요. 이전부터 관심사에 있는 테크 밋업에 대해서는 모두 신청했었는데 질문에 대해서 너무 자세히 적지 않아서 그랬는지 신청하는 모든 밋업에 참석하지 못했답니다. 하지만 이번에는 레거시 코드에 대해서 개선하는 방법과 깔끔한 코드의 본질이란 무엇인가에 대한 주제로 강의를 진행한다고 나와있어 관심사에 있는 레거시 그리고 깔끔한 코드라는 키워드가 와닿아 열심히 질문을 작성해 밋업에 당첨됐고 강의를 들으러 갈 수 있었어요. 인프런이 생각보다 회사에서 가까이 있어 놀랐어요. 판교역 근처에 있는 줄 알았는데 판교역 근처는 아니고 스타트업캠퍼스라는 건물에 위치하고 있었습니다. 제가 도착하니 이미 강..

2025. 5. 1.

개발

웹 접근성을 위한 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이 날아간다면 ? 오랜만에 사내에서 개발하고 있는 WYZYWIG 웹 에디터 관련 이슈를 처리하면서 브라우저 IME에 따른 버그가 있어 트러블 슈팅에 대해서 공유하고자 한다. 문제?아래와 같은 HTML을 사용자는 웹 에디터에서 편집하고자 한다.안녕하세요요즘 날씨가 많이 덥네요건강관리 잘 하세요~ 이 HTML은 아래와 같이 사용자에게 보일 것이다.만약 사용자가 빈 span 태그에 캐럿( 마우스를 클릭하면 깜빡이는 것 )을 위치한 채삭제(backspace/delete)를 눌렀다면 사용자가 기대하는 경험은 무엇일까 ?사용자는 빈 문단이 삭제되면서 아래에 있는 문단이 한 줄 올라오는 것을 기대할 것이다.하지만 여기서 사용자가 delete 키를 눌러 뒤의 문단을 계속적으로 삭제할 경우 어떻게 될까? 현재 Edge 브라우저 기준 ab..

2024. 8. 17.

개발

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

2024. 7. 26.

개발