WEB UI

최근 회사에서 React를 플러터 WebView에 이식한 앱을 개발할 일이 있었습니다. 처음에는 모달을 쿼리 스트링(Query String)을 활용해 관리했는데, 특정 모달을 열면 URL에 ?modal=open 같은 형식으로 쿼리스트링을 추가하고, 뒤로가기를 하면 해당 모달을 닫는 방식이었습니다. 그런데 iOS 사파리에서 문제가 발생했는데, 사파리에서는 페이지 이동 시 기본적으로 뒤로가기 애니메이션이 존재하기 때문에, 모달을 종료하기 위해서 뒤로가기를 사용하면 페이지가 변하는 애니메이션이 동작하지만, … Read more

웹 애플리케이션에서 탭(Tab) UI는 다양한 콘텐츠를 한 페이지에서 쉽게 전환할 수 있도록 도와주는 중요한 UI 요소이고 자주 사용하는 만큼, 정리를 해두면 좋을 거 같다는 생각을 했습니다. Tab UI의 구조 탭 UI는 보통 다음과 같은 구조를 가집니다. 이 구조를 구현하기 위해 상태 관리가 필요합니다. 선택된 탭을 State로 관리하고, 해당 값에 따라 콘텐츠를 동적으로 변경하면 됩니다. 기본적인 … Read more

React에서 달력을 직접 구현하는 것은 다양한 기술적 요소를 익히기에 좋은 연습이 될 수 있습니다. 달력은 단순한 UI 요소처럼 보일 수 있지만, 날짜 연산, 상태 관리, 사용자 입력 처리 등 여러 가지 개념이 포함됩니다. 본 글에서는 React를 활용하여 달력 컴포넌트를 직접 만들어보고, 구현 과정을 정리했습니다. See the Pen react-calendar by CodingCitron (@codingcitron) on CodePen. React 달력 … Read more

React에서 트리 뷰(Tree View) 컴포넌트를 구현하는 방법을 정리했습니다. 1. 트리 뷰(Tree View)란? 트리 뷰는 계층적인 데이터를 시각적으로 표현하는 UI입니다. 대표적인 예시로는 다음과 같은 것들이 있습니다. 트리 뷰의 핵심은 계층 구조 데이터를 관리하고, 이를 UI로 동적으로 렌더링하는 것입니다. 2. 트리 뷰의 데이터 구조 (JSON 형태의 계층 데이터 다루기) 트리 구조를 표현하려면, 기본적으로 다음과 같은 형태의 데이터를 … Read more

JavaScript와 Canvas로 룰렛 게임 구현하기 – 완성된 모습 spin 1. 초기 HTML 구조 작성하기 먼저, 기본적인 HTML 파일을 만들고, 룰렛을 그릴 canvas 요소와 룰렛을 돌리는 버튼을 배치합니다. <canvas>는 룰렛을 그리는 공간입니다. <button>은 룰렛을 회전시키는 버튼입니다. <script>는 자바스크립트 코드를 이곳에 작성합니다. 2. Canvas를 이용해 룰렛 그리기 이제 script 부분에서 JavaScript를 이용해 룰렛 UI를 그리는 … Read more