미리보기

앱의 결제 허들을 웹으로 무너트리자!

• 커머스 서비스의 기본 기능 구축

• 웹 결제 환경 구축 및 소셜 로그인 구축

• 프로모션 페이지 웹뷰 개발

• Google Tag Manager를 통한 트래픽 및 사용자 행동 분석

• 판매자 백오피스 유지보수 (Vue.js)

• 운영진 백오피스 유지보수 (Vue.js)

실시간 코드 분석이 가능한 IDE 개발 및 형상관리 서비스

• 실시간 코드 분석 가능한 IDE 개발

• Editor의 자동완성, 파일트리, 에러마킹 개발

• Tree-sitter / Lezer / Antlr4 비교 분석 및 연구

탄소배출권 거래 플랫폼

• 배출권을 거래할 수 있는 웹 환경 개발

• 유저간 실시간 채팅을 통해 거래할 수 있는 환경 개발

• React Native를 사용하여 앱에서도 거래와 채팅을 가능하도록 개발

• 배포 중 CSS 깨짐 현상 : 배포가 진행되는 순간 서비스에 접속하게 되면 CSS가 깨지는 현상이 발생하여 static 폴더를 S3 Bucket에 업로드 하여 CloudFront를 통해 정적파일을 제공하여 유저의 경험을 개선하였습니다.

• 이미지 업로드 사이즈 이슈 : 모바일에서 촬영한 파일을 바로 업로드 하려고 할 경우 서버에서 제한해 놓은 사이즈를 대부분 초과하여 프론트에서 이미지를 리사이징하여 사용자가 촬영을 하고 바로 업로드를 할 수 있는 환경을 만들었습니다.

• 카카오 로그인 이슈 : Sentry의 로깅과 사내 QA를 통해 애플의 비공개 릴레이가 켜져있을 경우 로그인되지 않는 이슈를 발견하였습니다. REST API를 사용하는 카카오 로그인의 경우 로그인 실패이유가 불친절 하였지만 SDK로 변경하여 비공개 릴레이를 끄도록 유도하는 화면이 노출되도록 수정을 진행하였습니다.

• Husky와 CommitLint를 활용 : 혼자 개발하는 환경이기 때문에 놓칠 수 있는 컨벤션을 강제하도록 하여 서비스의 확장으로 추가 채용을 대비하여 미리 컨벤션을 지키면서 개발을 진행하였습니다.

• 컴포지션 API로 마이그레이션 : 리액트로 마이그레이션과 뷰를 사용하며 유지보수를 진행할지 고민 후 이미 많은 기능이 있고 안정적으로 서비스 되고 있는 서비스였기 때문에 뷰를 지속적으로 사용하며 컴포지션 API를 점진적으로 마이그레이션을 진행하며 유지보수하고 있습니다.

• 어드민 테이블 공통화 : 어드민에서 공통으로 사용하고 있는 테이블 컴포넌트를 모듈화하여 사용편의성을 높여 개발 속도를 향상하였습니다.

• Tree-siiter / lezer / antlr4 비교 분석 : 실시간 코드 분석을 위해 현재 개발 상황에 맞는 paser를 비교 분석하여 발표를 통해 팀과 공유하였습니다. 또한 직관적으로 tree를 비교하기 위해 자체 playground를 만들어 공유하여 팀원들이 직접 사용해보고 선택하는데 도움을 주었습니다.

• React Query 도입으로 서버 상태 관리 개선: 서버 상태와 클라이언트 상태의 구분 없이 store가 비대해지고, 사이드 이펙트를 예측하기 어려운 문제를 해결하기 위해 React Query를 도입을 고려 서비스 특성상 모든 api가 웹소켓으로 이루어져있어 Promise 객체 반환 구조로 변경하여 React Query를 적용 가능하게 변경 후 애플리케이션의 안정성과 성능을 개선했습니다.

• Git 브랜치 전략 수립: 기존에 명확한 Git 브랜치 전략이 없어 개발 효율성과 안정성에 문제가 있었습니다. Feature와 Hotfix 대응을 위한 Git 브랜치 전략을 수립하고 적용하여, 팀의 협업 효율성과 코드 배포의 안정성을 높였습니다.

• DDD 도입을 통한 팀 간 소통 개선: 기획자, 디자이너와의 소통 과정에서 도메인 구조와 명칭에 대한 이해도 차이로 인한 문제를 해결하기 위해 Domain-Driven Design(DDD)을 일부 도입. 보편적인 언어 사용으로 팀 간 소통 구조를 개선하고 프로젝트 진행 속도를 가속화했습니다.

• 기존 JSP에서 React로 마이그레이션

• 입력이 많은 서비스의 특성으로 Validation 처리가 많아 안정성과 개발자 편의를 위해 react-hook-form 도입 (기본적으로 비제어 컴포넌트 방식으로 구현되어 렌더링 이슈 해결)

• 로딩속도 및 성능 등 기존에 부족했던 부분들을 전반적으로 개선. (Lighthouse LCP 기준, 4.8s → 2.9s)

• Versioning 정책 정립을 통한 효율적 관리

• React Native로 모바일 앱 주도적으로 개발

• webScoket을 사용해 채팅 기능 구현

• 기존 Platform에서 관리가 어렵던 API들을 React-query 도입으로 개선

• Sentry 도입을 통한 보다 쉽고 빠른 에러 대응 환경 구성