Untitled Publication

시맨틱하게 다이얼로그 만들기

웹에서 양식을 제출하기 위한 다이얼로그를 작성할 때 시맨틱 태그를 무시하고 div 태그를 활용해 css로 스타일링을 하는 경우가 많다. 이렇게 작성할 경우, 동작에는 전혀 무리가 없지만 하지 않아도 될 스타일링 작업을 하는 데 시간을 쏟을 수 있고 웹접근성 측면에도 좋지 않다. 웹에서 다이얼로그는 모달, 대화상자, 알림창, 검사기와 같은 상호작용 가능한 컴포넌트를 말한다. HTML에서는 dialog 라는 태그를 사용하면 핵심적인 다이얼로그의 기...

Jan 13, 20262 min read

aria-label 사용 시 주의할 점

aria-label 사용 시 내부 요소가 전부 무시될 수 있다. 예를 들어, 카드 컴포넌트를 버튼으로 감싸는 경우 : const CardButton = ()=> { return <button aria-label="클릭하여 상세보기"> <div class="card"> <h3>제품명</h3> <p>가격: 29,000원</p> <span>재고 있음</span> </div> </button> } 위...

Dec 3, 20251 min read

[JavaScript] 이미지 사이즈 압축해서 용량 줄이기

이미지를 받아서 저장하는 기능을 구현하고 며칠이 지난 후 한 가지 이슈를 발견하였다. 바로 이미지 업로드가 되지 않는 아주 치명적인 문제였다! 분명 테스트도 수 없이 진행하고 배포한 후에도 잘만 동작했는데 갑자기 이런 일이 왜 벌어진걸까? 문제 해결의 원인을 찾기 위해 다양한 방법을 시도하였다: 갤럭시의 갤러리에 있는 이미지 업로드 갤럭시의 카메라로 직접 찍어서 업로드 아이폰의 갤러리에 있는 이미지 업로드 아이폰의 카메라로 직접 찍어서 ...

Nov 16, 20242 min read

[JavaScript] 이미지 수정 시 브라우저 캐싱 방지하기

웹 개발을 하면서 한 번쯤 겪어볼 수 있는 이슈가 있다. A 사용자가 이미지를 업로드하면 B 사용자가 그 이미지를 확인하고, 재업로드를 요청하는 플로우다. A 사용자가 새로운 이미지를 업로드 했는데도 B 사용자는 여전히 처음 이미지를 볼 수 있다. 이 문제는 서버 측에서 "이미지 경로는 그대로 유지하고 이미지를 덮어씌운다"는 구조와 관련이 있다. 브라우저는 URL이 동일하면 캐싱된 이미지를 가져와 네트워크 요청을 줄인다. 따라서 새로운 이미지가...

Oct 3, 20242 min read

[React] 렌더링 관점에서 보는 react-hook-form (feat. useRef)

평소 한땀한땀 기능을 만들어나가는 걸 좋아해서 유명한 라이브러리들을 사용해보지 않았는데, 회사에서 프로젝트를 진행하며 다양한 라이브러리를 사용해보았다. 그 중 React-Hook-Form을 사용하며 평소에 리액트로 폼을 작성하며 겪은 불편한 점을 많이 해소했다. 코드 길이, 예외 처리, 렌더링 등 다양한 관점에서 개선할 수 있게 되었다. 오늘은 다양한 폼 상태 관리 방법을 비교하여 React-Hook-Form의 장점을 알아보자. useState...

Sep 5, 20243 min read

[msw] 더 이상 백엔드 개발자에게 Api를 재촉할 필요가 없다

회사에서 첫번째 업무가 주어져 작업을 진행하고 있다. 공통적으로 사용될 UI 컴포넌트를 먼저 개발하고 페이지 UI 개발을 한 뒤, 마지막으로 API를 연결하여 2주 안에 작업을 끝내는 것을 목표로 하였다. 그런데 백엔드 개발자께서 쌓인 업무가 너무 많으셔서 이 업무에 대한 우선순위를 뒤로 미루셨..😭😭😭 완성된 API를 전달받고 코드에 붙이고 테스트를 하면 2주가 훌쩍 넘을 것 같아서 고민한 결과, 프로젝트에 Mock API를 도입하기로 ...

Aug 25, 20245 min read

[CSS] 둥근 모서리 링을 가진 Spinner UI 만들기

YEONSUI에 Spinner 컴포넌트를 만들기 위해 디자인을 살펴보았다. 내가 참고한 디자인은 디지털 정부서비스 UI/UX 가이드라인이다. 💫 UI 살펴보기 가운데가 뚫린 원 안에 둥근 모서리를 가진 링이 있다. 이 링이 빙글빙글 돌아가는 애니메이션도 적용할 것이다. 🔴 처음에 생각한 방식 (이렇게 하지 마세요) div 안에 Spinner를 만들고 border-bottom-color로 원의 25%를 링으로 채워야겠다. 그리고 해당 div...

Aug 11, 20242 min read

[React Query] 초간단 페이지네이션 구현하기

제작년에 자바스크립트로 페이지네이션을 한땀한땀 구현하다가 너무 구려서 때려친 기억이 있다. 그 이후론 페이지네이션을 만들 일이 없어서 잊고 살았는데... 회사에서 다음주부터 내가 담당할 기능에 대해 간단히 설명해주셨는데 페이지네이션 기능이 있는 것이다! 내 머리를 쥐나게 했던 그 놈!🤯 이 프로젝트에선 React와 React Query를 사용하기 때문에 나도 이걸 사용해서 미리 만들어보는 예습을 하고 그 과정을 간단히 정리해보고자 한다. 1....

Aug 10, 20244 min read

[React Native] 스케일링 함수로 디바이스에 따른 UI 크기 조정

요즘 막 입사해서 온보딩으로 React Native 클론코딩을 하고 있다. React Native를 배운 지 일주일 정도 밖에 되지 않아서 아직 앱 개발에 익숙하지 않지만 온보딩을 통해 조금씩 앱 생태계에 익숙해지고 있다. 🔴 모든 디바이스에서 크기가 고정되어 있는 문제 요즘엔 다양한 디바이스 크기를 고려하여 개발하는 것이 중요하다. 디바이스 크기에 맞지 않는 UI를 그려내면 가독성이 떨어지고 버튼 크기가 작아 클릭이 어려운 문제가 발생할 수...

Aug 8, 20243 min read

Command Palette

Latest articles