미리보기

*고용승계로 입사했습니다.

[QR전용 사이트]

next-i18next 라이브러리를 사용하여 다국어 사이트를 개발했으며 MAU 10만명을 달성했습니다.

• 파일 다운로드 기능 구현

  • 회사 보안 규정상 브라우저에서 바로 다운로드하지 않고 Next.js 서버를 통해 다운로드 로직을 구현했습니다.

  • 처음엔 파일리더로 구현 했으나 성능문제가 발견되어 스트림 방식으로 변경하여 성능개선을 했습니다.

• Canvas API를 사용한 이미지 합성 기능 구현

  • Canvas API를 사용해서 사용자가 찍은 사진과 템플릿을 합성하는 기능을 구현했습니다.

  • 이 과정에서 대용량파일과 Canvas 크기 때문에 모바일 사파리 브라우저에서 메모리제한 오류가 발생했습니다.

  • Canvas와 이미지크기를 스케일링하고 사용하지 않는 Canvas객체는 바로 null 처리하여 메모리를 조금 더 확보하는 방법으로 오류를 해결했습니다.

[인생네컷 국내 앱]

인생네컷 국내앱 유지보수 및 기능개발을 담당했습니다.

• 이미지 업로드 기능 개선

  • HEIC파일을 업로드하면 서버에서 처리가 불가능한 오류를 발견했습니다.

  • HEIC파일 자체가 브라우저 호환성도 낮아 heic2any 라이브러리를 사용해서 변환 기능을 구현했습니다.

  • 이 과정에서 AOS 버전에 따라 HEIC파일 처리가 달라 발생하는 트러블 슈팅을 경험했습니다.

• 베트남 버전 개발

  • 베트남 전용 이미지 합성 사이트를 개발했습니다.

  • 사용자의 IP에 따른 국가를 확인하여 Next.js 미들웨어를 통해 국가 접속 제한 기능을 구현했습니다.

[Betrip]

Next.js & Flutter 웹뷰 환경으로 유지보수 및 기능 추가를 담당했습니다.

• API요청 횟수 75% 감소

  • 유저정보와 배너 같이 변동성이 적은 데이터의 API를 계속 호출하는 것을 발견했고

  • TanStack Query의 staleTime을 사용해서 데이터마다 캐싱 기간을 다르게 적용시켰습니다.

• Presentational-Container 패턴을 Atomic 패턴으로 변경

  • 기존 프로젝트는 logic과 view를 분리하기 위해 Presentational-Container 디자인 패턴을 사용했습니다.

  • 하지만 logic은 hook으로 관리하고 있었고 깔끔한 폴더 구조로 변경 필요성을 느껴

    Atomic 패턴을 커스텀하여 도입했습니다

• TypeScript 레거시 코드 정리와 ESLint 룰 도입

  • TypeScript로 작성된 코드가 any 사용이 많았으며 재사용 불가능한 Type이 많았습니다.

  • 또한, Sentry에 타입 오류들이 지속적으로 올라와서 전체적인 레거시 코드를 정리가 필요했습니다.

  • 기존 개발 환경에선 공통된 ESLint 룰이 없어서 통일된 개발 환경이 구성되지 않았습니다.

  • 이 문제를 해결하기 위해 Airbnb룰을 도입하여 개발 환경 개선에 성공했습니다.

• 평균 번들 크기 130KB 감소

  • 유니코드를 판별하는 기능에 xregexp 라이브러리를 사용하고 있었지만 사용하는 기능에 비해 번들크기가 너무 크다는 문제를 발견했습니다.

  • 유니코드만 판별하는 기능은 직접 구현 가능하다고 판단되어,

    라이브러리 소스를 분석해 정규식 기능을 직접 구현했습니다.

  • 또한, Dynamic Import와 package.json의 sideEffects옵션을 사용해서 번들 크기를 감소시켰습니다.

  • 이 과정에서 sideEffects 옵션을 false로 사용해서 에러가 발생했지만 파일 분석 후 css파일과 같이 sideEffects가 발생하는 파일은 제외시키는 트러블슈팅 경험이 있었습니다.

[인생네컷 점주 앱]

Next.js & Flutter 웹뷰 환경으로 구성된 앱을 개발했습니다.

• Vitest를 사용한 단위 테스트 환경을 구축

  • 점주 전용 앱이다 보니 금액을 계산하는 부분에서 철저한 검증이 필요했습니다.

  • 따라서 개발 처음부터 테스트 코드를 작성하여 안정적인 로직을 구성하였습니다..

• SVG를 사용한 차트 구현

  • 차트 라이브러리로 기획서의 디자인을 구현하기 힘들어 SVG를 사용하여 차트를 직접 구현했습니다.

• CI/CD환경 구축

  • GitLab Runner를 EC2에 등록하여 CI/CD환경을 구축했습니다.

  • 코드가 커밋 되거나 배포에 실패하면 바로 확인 가능하도록 Slack과 연동 시켰습니다.

  • 개발서버는 자동배포까지 되도록 설정했고

  • 운영서버는 포트를 두개로 나누어 스테이징 환경도 구현했습니다.

외주 전문 개발업체에서 클라이언트와 직접 소통하여 7개의 MVP제품을 개발했습니다.

• Redux -> TanStack Query & Zustand 마이그레이션 추진

  • 기존에는 Redux만 사용하여 서버와 클라이언트 상태를 모두 관리하고 있었습니다

  • 이 구조에선 코드의 복잡함 때문에 유지보수가 힘들다 생각이 들어 TanStack Query와 Zustand로 마이그레이션을 추진했습니다.

  • 마이그레이션 후 서버 상태를 손쉽게 캐싱 할 수 있었고 줄어든 코드량 덕분에 개발환경 개선에 성공했습니다.

• React로 구성된 컴포넌트를 공용 모듈로 변환

  • 카카오 지도를 사용하던 React 컴포넌트를 안드로이드 앱에서 사용해야 하는 일이 있었습니다.

  • 안드로이드에서 index.html으로 접근을 가능하게 하기 위해 JS로 변환하였습니다.

• DB구조 분석 및 API 설계서 작성

  • 회사 내부 사정으로 백엔드 인력이 부족하여 프로젝트마다 API 설계서를 작성해야 했습니다.

  • 다행히 백엔드는 Node.js로 구성되어 있고 사이드프로젝트로 백엔드 경험이 있어서 API 설계서 작성에 문제는 없었습니다.