미리보기

• Cloud APM 기능 개발 및 유지보수: 클라우드 애플리케이션 성능 모니터링(APM) 기능을 추가하고 지속적으로 유지보수하여 시스템의 성능과 안정성을 높였습니다.

• 통합 대시보드 개발: 다양한 데이터 소스를 하나의 대시보드에 통합하는 기능을 개발하고 유지보수하여 사용자에게 일관된 모니터링 환경을 제공했습니다.

• 코드 품질 향상: 코드 리뷰 프로세스를 도입하고 Husky를 활용하여 린트와 테스트를 자동화해 코드 품질과 안정성을 향상시켰습니다.

• Webpack에서 Vite로 마이그레이션: 기존 프로젝트를 Vite로 마이그레이션하여 빌드 속도를 크게 개선하고 개발자 생산성을 높였습니다.

• API 타입 제네레이터 도입: 타입 제네레이터를 도입하여 API 요청 및 응답 타입을 자동 생성함으로써 타입 작성 시간을 줄이고, 타입 정확도를 향상시켰습니다.

• npm에서 pnpm으로 마이그레이션: 프로젝트의 패키지 매니저를 npm에서 pnpm으로 전환하여 패키지 설치 속도를 개선하고 프로젝트의 전체 용량을 줄였습니다.

기술 스택: React, Redux, Styled Componet, Spring Boot

OPENMARU Cloud APM은 예전에 완성된 프로젝트로, 저는 이 프로젝트에서 기능 추가와 유지보수를 담당했습니다. 프로젝트는 React, Redux, Styled Components, 그리고 Spring Boot로 구축되어 있었는데, 수정사항을 반영할 때마다 빌드 시간이 약 7분이나 걸리는 문제가 있었습니다. 이는 Webpack을 사용하여 빌드하기 때문이었으며, 이로 인해 개발 워크플로우가 지연되고 있었습니다.

이 문제를 해결하기 위해 빌드 속도를 개선할 수 있는 방안을 모색하던 중, Vite가 모듈 핫 리로딩과 빌드 속도 측면에서 우수하다는 것을 확인했습니다. 이에 따라 Vite로 마이그레이션을 진행하기로 결정했고, 기존 Webpack 설정을 Vite에 맞게 최적화했습니다. 이 과정에서는 모듈 로딩 방식과 빌드 프로세스를 면밀히 검토하여 전환 작업을 수행했습니다.

결과적으로, Vite로의 마이그레이션을 통해 빌드 시간을 기존 7분에서 3분으로 크게 단축하였습니다. 이를 통해 개발 주기가 단축되고, 팀원들이 코드 변경에 대한 즉각적인 피드백을 받을 수 있게 되어 전반적인 생산성이 향상되었습니다. 이 프로젝트를 통해 기존 프로젝트의 성능 개선과 빌드 시스템 최적화에 대한 전문성을 쌓을 수 있었습니다.

기술 스택: React, React-query, Zustand, Emotion, Spring Boot

OPENMARU 대시보드는 수십 대에서 수백 대에 이르는 OPENMARU APM을 연결하여 통합 모니터링을 제공하는 프로젝트입니다. 이 프로젝트에서 가장 중요한 부분은 대량의 데이터를 효율적으로 캐싱하고 관리하는 것이었습니다. 이를 위해 데이터 캐싱 전략을 세우는 것이 핵심 과제였고, 불필요한 API 요청을 최소화하고 데이터를 효과적으로 캐싱할 수 있는 도구를 찾고자 했습니다.

React Query는 서버 상태 관리에 최적화되어 있으며, 자동으로 데이터 캐싱, 동기화, 갱신 기능을 제공한다는 점에서 유용해 보였습니다. 이를 통해 데이터 요청을 최적화하고 반복되는 데이터를 캐싱하여 대시보드의 성능을 향상시킬 수 있을 것이라는 가설을 세웠습니다. 실제로 React Query를 도입한 결과, 불필요한 API 호출이 크게 줄어들었고, 사용자에게 최신 데이터를 신속하게 제공할 수 있었습니다. 이를 통해 대시보드의 데이터 로딩 시간을 단축하고 서버 부하를 줄이는 데 성공했습니다.

또한, 프로젝트에서는 공통으로 사용하는 컴포넌트가 많았고 비슷한 디자인의 컴포넌트를 재사용해야 하는 상황이 많았습니다. React의 컴포넌트 기반 아키텍처는 이러한 요구에 부합하며, 컴포넌트의 재사용성과 유지보수성을 높였습니다. 이와 함께, 초기 렌더링보다는 이후의 렌더링 속도가 중요한 상황이었기에 Client-Side Rendering(CSR)을 적용하여 사용자 경험을 개선했습니다.

스타일링 측면에서는 Emotion을 활용했습니다. 이 라이브러리는 스타일 컴포넌트의 재사용을 용이하게 하고 외부 UI 라이브러리의 커스터마이징을 쉽게 해주기 때문에 프로젝트의 디자인 시스템을 일관되게 유지하면서도 유연한 스타일링을 가능하게 해주었습니다.

이 프로젝트를 통해 데이터 캐싱 전략을 수립하고 적용하는 능력을 키웠으며, 서버 상태 관리와 컴포넌트 재사용성에 대한 깊은 이해를 갖게 되었습니다. 또한, UI 라이브러리의 효율적인 사용과 커스터마이징 경험을 통해 사용자 경험을 향상시키는 데 기여했습니다.

기술 스택: React, Express, Zustand

사내 반복 업무를 자동화하는 프로젝트를 혼자 맡게 되었고, 이 프로젝트에서 가장 중요한 것은 기술 스택을 신중하게 선택하는 것이었습니다. 처음에는 서버 측 로직을 구현할 백엔드 프레임워크를 선택해야 했습니다. 여러 옵션을 고려했지만, 가장 가벼우면서도 러닝 커브가 낮은 Express를 선택했습니다. Express는 미들웨어 구성과 라우팅을 간편하게 설정할 수 있어 빠르게 서버를 구축하고 API를 개발할 수 있었습니다. 이 프로젝트에서는 빠른 개발 주기가 요구되었기 때문에, 이 선택이 프로젝트 진행에 큰 도움이 되었습니다.

프론트엔드에서는 렌더링이 자주 필요했고, 사용자 인터페이스를 동적으로 업데이트할 필요가 있었습니다. 이를 위해 React를 선택했는데, React의 컴포넌트 기반 구조는 재사용성과 유지보수 측면에서 큰 이점을 제공했습니다. 특히, 렌더링 로직을 컴포넌트 단위로 분리하여 관리함으로써, 변화에 유연하게 대응할 수 있었습니다. React의 가상 DOM을 활용해 렌더링 최적화를 쉽게 구현할 수 있었고, 이로 인해 사용자 경험이 향상되었습니다.

상태 관리 측면에서는 전역 상태의 사용 빈도가 낮았기 때문에, 복잡한 상태 관리 라이브러리보다는 가볍고 효율적인 솔루션이 필요했습니다. 이에 따라 Zustand를 선택했습니다. Zustand는 다른 전역 상태 관리 라이브러리들에 비해 용량이 작고 간단한 API를 제공하여 빠르게 프로젝트에 적용할 수 있었습니다. 이를 통해 불필요한 복잡성을 줄이고, 프로젝트의 성능을 최적화하는 데 집중할 수 있었습니다.

이 프로젝트를 통해 신속한 기술 결정과 적합한 도구 선택이 프로젝트의 성공에 얼마나 중요한지 배웠습니다. Express를 통해 백엔드 API 개발 시간을 단축하고, React를 활용해 유연하고 동적인 UI를 구축하며, Zustand로 간단한 상태 관리 솔루션을 적용하여 최적의 성능을 달성했습니다. 이러한 경험을 통해 빠른 개발 환경에서 효율적으로 일하는 능력을 향상시켰고, 적절한 기술을 선택하고 이를 효과적으로 적용하는 역량을 강화했습니다.

기술 스택: ReactNative, EXPO, Zustand, Styled-Componet, EAS, Doppler

Url: GitHub, AppStore, PlayStore

책을 통해 상대를 연결해주는 소개팅 어플을 개발하며 처음으로 프론트엔드 팀을 리드하게 되었습니다. 팀 리드로서 기술 스택 선택에 큰 책임이 있었는데, 프로젝트의 성공과 팀의 효율성을 고려하여 제가 가장 자신 있는 언어와 기술 스택을 선택하는 것이 중요하다고 판단했습니다. 이를 바탕으로 하이브리드 어플리케이션 개발에 강점이 있는 React Native를 선택했습니다. React Native는 하나의 코드베이스로 iOS와 Android를 모두 지원할 수 있어 개발 효율을 높일 수 있었습니다.

프로젝트 팀원 중에는 대학생들도 포함되어 있었기 때문에, 러닝 커브가 낮고 빠르게 습득할 수 있는 기술을 사용하는 것이 중요했습니다. 스타일링 측면에서는 Styled Components를 선택했습니다. 이 라이브러리는 CSS를 컴포넌트화하여 관리할 수 있어 코드의 재사용성과 유지보수성을 높일 수 있었고, CSS 문법을 자바스크립트 코드 내에서 사용할 수 있어 팀원들이 쉽게 적응할 수 있었습니다. 또한, 자바스크립트의 모든 기능을 활용해 동적 스타일링이 가능해 다양한 UI 요구사항에 유연하게 대응할 수 있었습니다.

상태 관리는 앱의 전역 상태 사용 빈도가 낮았기에 복잡한 상태 관리 라이브러리보다는 간단하고 가벼운 것을 선택하는 것이 효율적이라고 판단했습니다. 그래서 용량이 작고 러닝 커브가 거의 없는 Zustand를 선택했습니다. Zustand는 간단한 API를 제공하면서도 필요한 기능을 빠르게 구현할 수 있어, 팀원들이 쉽게 이해하고 활용할 수 있었습니다.

환경 변수 관리는 사이드 프로젝트에서 특히 중요했는데, 개발 환경을 안정적으로 유지하고 민감한 정보를 안전하게 공유하는 것이 필요했습니다. 이를 위해 Doppler를 도입했습니다. Doppler는 환경 변수 관리 및 보안에 특화된 도구로, 각 팀원들에게 안전하게 환경 변수를 공유할 수 있었습니다. 이를 통해 개발 과정에서 발생할 수 있는 환경 변수 관련 문제를 사전에 방지하고, 팀원들이 환경 설정에 집중하지 않고 개발에만 집중할 수 있도록 했습니다.

이 프로젝트를 통해 다양한 기술 선택의 배경과 결과를 경험하면서, 팀의 역량과 프로젝트의 요구 사항에 맞는 기술을 선정하는 능력을 키울 수 있었습니다. React Native를 통해 하이브리드 앱을 효율적으로 개발하고, Styled Components와 Zustand를 활용해 빠른 개발 주기를 유지할 수 있었습니다. 또한, Doppler를 활용해 환경 변수를 안전하게 관리함으로써 프로젝트의 안정성을 확보하는 데 기여했습니다. 이 경험은 프로젝트의 전체적인 아키텍처 설계와 팀 리드로서의 책임감을 높이는 중요한 기회가 되었습니다.