웹에서 양식을 제출하기 위한 다이얼로그를 작성할 때 시맨틱 태그를 무시하고 div 태그를 활용해 css로 스타일링을 하는 경우가 많다. 이렇게 작성할 경우, 동작에는 전혀 무리가 없지만 하지 않아도 될 스타일링 작업을 하는 데 시간을 쏟을 수 있고 웹접근성 측면에도 좋지 않다. 웹에서 다이얼로그는 모달, 대화상자, 알림창, 검사기와 같은 상호작용 가능한 컴포넌트를 말한다. HTML에서는 dialog 라는 태그를 사용하면 핵심적인 다이얼로그의 기...
aria-label 사용 시 내부 요소가 전부 무시될 수 있다. 예를 들어, 카드 컴포넌트를 버튼으로 감싸는 경우 : const CardButton = ()=> { return <button aria-label="클릭하여 상세보기"> <div class="card"> <h3>제품명</h3> <p>가격: 29,000원</p> <span>재고 있음</span> </div> </button> } 위...
이미지를 받아서 저장하는 기능을 구현하고 며칠이 지난 후 한 가지 이슈를 발견하였다. 바로 이미지 업로드가 되지 않는 아주 치명적인 문제였다! 분명 테스트도 수 없이 진행하고 배포한 후에도 잘만 동작했는데 갑자기 이런 일이 왜 벌어진걸까? 문제 해결의 원인을 찾기 위해 다양한 방법을 시도하였다: 갤럭시의 갤러리에 있는 이미지 업로드 갤럭시의 카메라로 직접 찍어서 업로드 아이폰의 갤러리에 있는 이미지 업로드 아이폰의 카메라로 직접 찍어서 ...
웹 개발을 하면서 한 번쯤 겪어볼 수 있는 이슈가 있다. A 사용자가 이미지를 업로드하면 B 사용자가 그 이미지를 확인하고, 재업로드를 요청하는 플로우다. A 사용자가 새로운 이미지를 업로드 했는데도 B 사용자는 여전히 처음 이미지를 볼 수 있다. 이 문제는 서버 측에서 "이미지 경로는 그대로 유지하고 이미지를 덮어씌운다"는 구조와 관련이 있다. 브라우저는 URL이 동일하면 캐싱된 이미지를 가져와 네트워크 요청을 줄인다. 따라서 새로운 이미지가...
평소 한땀한땀 기능을 만들어나가는 걸 좋아해서 유명한 라이브러리들을 사용해보지 않았는데, 회사에서 프로젝트를 진행하며 다양한 라이브러리를 사용해보았다. 그 중 React-Hook-Form을 사용하며 평소에 리액트로 폼을 작성하며 겪은 불편한 점을 많이 해소했다. 코드 길이, 예외 처리, 렌더링 등 다양한 관점에서 개선할 수 있게 되었다. 오늘은 다양한 폼 상태 관리 방법을 비교하여 React-Hook-Form의 장점을 알아보자. useState...
회사에서 첫번째 업무가 주어져 작업을 진행하고 있다. 공통적으로 사용될 UI 컴포넌트를 먼저 개발하고 페이지 UI 개발을 한 뒤, 마지막으로 API를 연결하여 2주 안에 작업을 끝내는 것을 목표로 하였다. 그런데 백엔드 개발자께서 쌓인 업무가 너무 많으셔서 이 업무에 대한 우선순위를 뒤로 미루셨..😭😭😭 완성된 API를 전달받고 코드에 붙이고 테스트를 하면 2주가 훌쩍 넘을 것 같아서 고민한 결과, 프로젝트에 Mock API를 도입하기로 ...
YEONSUI에 Spinner 컴포넌트를 만들기 위해 디자인을 살펴보았다. 내가 참고한 디자인은 디지털 정부서비스 UI/UX 가이드라인이다. 💫 UI 살펴보기 가운데가 뚫린 원 안에 둥근 모서리를 가진 링이 있다. 이 링이 빙글빙글 돌아가는 애니메이션도 적용할 것이다. 🔴 처음에 생각한 방식 (이렇게 하지 마세요) div 안에 Spinner를 만들고 border-bottom-color로 원의 25%를 링으로 채워야겠다. 그리고 해당 div...
제작년에 자바스크립트로 페이지네이션을 한땀한땀 구현하다가 너무 구려서 때려친 기억이 있다. 그 이후론 페이지네이션을 만들 일이 없어서 잊고 살았는데... 회사에서 다음주부터 내가 담당할 기능에 대해 간단히 설명해주셨는데 페이지네이션 기능이 있는 것이다! 내 머리를 쥐나게 했던 그 놈!🤯 이 프로젝트에선 React와 React Query를 사용하기 때문에 나도 이걸 사용해서 미리 만들어보는 예습을 하고 그 과정을 간단히 정리해보고자 한다. 1....
요즘 막 입사해서 온보딩으로 React Native 클론코딩을 하고 있다. React Native를 배운 지 일주일 정도 밖에 되지 않아서 아직 앱 개발에 익숙하지 않지만 온보딩을 통해 조금씩 앱 생태계에 익숙해지고 있다. 🔴 모든 디바이스에서 크기가 고정되어 있는 문제 요즘엔 다양한 디바이스 크기를 고려하여 개발하는 것이 중요하다. 디바이스 크기에 맞지 않는 UI를 그려내면 가독성이 떨어지고 버튼 크기가 작아 클릭이 어려운 문제가 발생할 수...