November 18, 2023
서론 프로젝트를 진행 하면서 공지사항을 보여주는 컴포넌트를 구현하는 작업을 맡았다. 공지사항은 다시 일반, 고정 공지사항으로 나눠서 보여줘야 해서 url을 통해서 보여 줄 공지사항을 구분하기로 했다. 일반 : 고정 : 그리고 리액트의 Suspense를 활용해서 공지사항을 가져올 때 까지 Skeleton을 보여주는 방식으로 구현했다. 여기서, norma…
January 14, 2024
서론 위 이미지처럼 탭 버튼이 있고 탭에 해당되는 내용을 보여주는 기능을 구현하려고 할 때, Tabs 컴포넌트를 만들 수 있을 것이다. 만약, 만들고 있는 프로덕션의 규모가 커 여러 페이지에서 탭이 필요한 경우 Tabs 컴포넌트를 재사용하기 위해서 buttons : 탭 버튼들 children : 클릭한 탭 버튼에 따라서 보여져야하는 내용들 이 2가지를 …
January 28, 2024
서론 현재 프로젝트에서 카카오 지도 API를 활용해서 학교 지도 페이지를 구현 하고 있고, 지도 위 건물 번호(카카오 지도가 제공하는 커스텀 오버레이)를 클릭하면 해당 건물에 대한 정보를 보여주는 컴포넌트를 추가로 구현 중에 있었다. 커스텀 오버레이에 이벤트 프로퍼티를 추가해줘도 되지만, 지도 위 건물 번호의 렌더링 로직을 클래스로 구현 했고, 해당 …
February 06, 2024
서론 현재 진행중인 프로젝트에서 정보를 보여줄 때, 토글 기능을 사용해서 보여주는 경우가 2가지가 있었다. 지도 페이지에서 건물 정보를 보여주는 경우 FAQ 페이지에서 질문에 대한 응답을 보여주는 경우 이 2가지 경우에 대해서 각각 독립된 다른 컴포넌트를 만들기 보다 재활용 할 수 있는 컴포넌트를 만들 수 있는 방법에 대해서 고민하다 패턴을 적용해 …
June 24, 2024
🪄 동시성 렌더링? 리액트 18 버젼이 등장하면서, 동시성 기능을 지원하는 여러 훅들이 나왔다. 리액트 공식문서에서는 다음과 같이 말한다. React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can u…
August 16, 2024
재사용할 수 있는 Text 컴포넌트를 만드는 여정 UT와 주변 크루들의 디자인 피드백을 받고나서 피그마 디자인 개선 작업을 진행했다. 개선하면서 사용자들에게 정보를 알려주는 텍스트들이 많아졌고 하나의 Text 컴포넌트를 잘 만들면 여러 상황에서 유연하게 재사용할 수 있을 것 같았다. 재사용할 수 있는 유연한 Text 컴포넌트를 만들기 위해서 인터페이스…