전체 글 (4) 썸네일형 리스트형 HOC(고차 컴포넌트)를 서비스에 적용하여 로직 재사용성 높이기 배경2024년 9월에 있었던 일입니다.당시에도 그렇고 지금도 저는 웹뷰 기반의 하이브리드 앱 개발 환경에서 웹 프론트엔드 개발을 담당하고 있습니다.어느 날, 회사에서 신 서비스 기획서를 검토하는 과정에서 앱 업데이트를 하지 않으면 해당 서비스 이용 시 이슈가 있을 것으로 판단하여 앱 버전을 업데이트한 유저만 해당 서비스 화면을 노출하도록 구현하였습니다. 설명에 대한 이해를 돕기 위한 예시 코드는 아래와 같습니다. // ServiceMainPage.tsximport { useEffect, useState } from 'react';const SERVICE_VERSION = '3.1.2';const ServiceMainPage = (): React.ReactElement | null => { const [.. 눈길을 달리는 JavaScript, TypeScript 스노우체인 장착기 배경2025년 8월에 있었던 일입니다.우리 회사는 모든 웹뷰 프론트 개발을 JS로 진행하고 있었습니다.서비스를 개발하면서 JS의 동적 type 등 자유로운 언어의 특성 상 유지보수의 불편한 점이 있었지만 할 만했습니다. 하지만 최근에 하나의 서비스의 개선 작업이 잦아지면서 코드 수정이 빈번해지기 시작했고 그 과정에서 불편함은 커져가 TS 도입의 목마름이 커져가기 시작했습니다.JS로 작업하면서 불편했던 점은 아래와 같습니다. 작성한 코드의 버그, 에러 여부를 런타임 후 인지상태관리 시 enum스럽게 관리하기 힘든 점API 응답 값 명세 파악의 한계간단하게 코드로 표현해봤으며 코드 예시는 React입니다. 작성한 코드의 버그, 에러 여부를 런타임 후 인지const Past = ({ curAge }) => {.. ApexCharts.js 대신 D3.js로 데이터 시각화하기 배경이직 후 입사한지 3개월째 되던 해(2024년 2월)에 있었던 일입니다.당시 우리 팀에서 "관리비 조회" 서비스 개편 작업을 담당하게 되었고 그 중 관리비 내역을 시각화하는 차트 영역을 개발하게 되었습니다.프로젝트에는 이미 ApexChart.js라는 패키지가 설치되어 있어 해당 패키지로 개발을 진행할 수 있다고 생각했습니다.ApexChart.js란?웹 페이지에서 깔끔하게 반응형으로 시각화 UI를 만들 수 있도록 돕는 고수준의 모던 차트 라이브러리링크 : https://apexcharts.com/ 하지만 이후 기획팀으로부터 공유받은 차트 관련 요구사항을 보고 ApexChart.js가 아닌 D3.js로 개발하는 것이 유지보수 측면에서 용이하다고 판단하였습니다.우선, ApexChart.js의 한계점을 설명.. 사내 라이브러리 표준화와 운영으로 로직 재사용성 높이기 배경당시 첫 회사에서 신입으로 입사한지 4개월이 된 2022년 5월에 있었던 일입니다.Front-End 팀에서 관리하는 프로젝트는 3개 중 2개 모두 React를 도입하여 관리하고 있었습니다.3개의 프로젝트를 넘나들며 개발을 하면서 발견한 점은 다음과 같았습니다. 중복된 비즈니스 로직 존재이메일 인풋 값이 이메일 형식인지 검사하고 결과에 따라 인풋 테두리를 빨간색으로 표시하는 기능이 있습니다.CRM 대시보드(좌)와 회사 소개 사이트(우)에서 각각 중복으로 동일한 함수를 선언하여 사용하고 있습니다.타 프로젝트와 동일한 UI를 제공하는 공통 컴포넌트가 각 프로젝트에 존재Input 컴포넌트에서 비밀번호 가시성 토글 버튼을 제공합니다.우측 아이콘을 클릭하면 값이 plain text로 잠시 노출되고, 재클릭 시 .. 이전 1 다음
