미리보기

에이지알 앱 내부 게임 개발

• 웹뷰모바일기기별메모리누수해결

  모바일 기기별 웹뷰 프로세스 버전마다 GC가 다르게 동작하는 것을 파악하여 웹뷰 인스펙터와 싱글턴 패턴을 통해 사용하는 메모리를 온전히 다룰 수 있도록 개발을 진행하였습니다.

• CI/CD 구축

  초기 프로젝트 빌딩을 하면서 자유롭게 기술스택을 선정할 수 있었고, Bun을 사용하면서 기존 yarn classic으로 평균 1분 20초 정도 걸리는 배포시간을 30초로 단축시켰습니다.

• Class 활용

  회사에서 개발 자체를 풀스택을 지향하는 문화를 위해 Dart, Java를 사용하는 팀 개발자들을 위 해 초기 프로젝트 설정을 하며 모델 설계를 Class로 진행하여 초기 협업시의 러닝커브를 줄였습 니다.

에이지알 앱 개발

• 포인트샵 개발

  에이지알 앱 내부의 서비스 내부적으로 제공하는 포인트를 사용할 수 있는 포인트샵 기능을 개발 하였습니다. Next.js SSR을 활용하여 초기 랜딩을 단축하고 스켈레톤 UI와 react query를 사 용하면서 낙관적 업데이트를 하도록 개발을 진행하여 유저 경험을 개선하였습니다.

• 크로스플랫폼 웹뷰 에러 디버깅

  크로스플랫폼에 강점을 활용하여 웹뷰 내에서 흰 화면이 나오는 오류를 웹뷰 인스펙터를 활용하 여 원인을 분석하고 많은 메모리가 한번에 올라오는 것이 문제임을 파악한 후에 이를 해제해주는 것으로 문제를 해결하였습니다.

• SSR i18n에서의 cookie 활용

  다국가/다국어 서비스를 제공하면서 여러가지 국가 정보를 앱에서 받아오며 refresh되는 것을 쿠키와 useSyncExternalStore를 통해 웹뷰 브라우져와 앱 그리고 nextjs서버 간 통신에서 활용하므로 깜빡이는 현상을 줄여 유저 경험을 개선하였습니다. 유저 경험을 개선하기 위해 Next.js를 활용하여 server side translation을 적용하였습니다.

• Sentry 환경 추가

  기존 배포된 이후 에러를 파악할 수 있도록 센트리를 도입하여 에러를 추적하도록 하였고, 버그 를 CS를 통해 접하기 이전에 빠르게 수정할 수 있었습니다. 그리고 다국가/다국어 환경에서는 웹뷰에서의 호환성 이슈를 맞이하기가 쉬웠는데, 특히 언어 라이브러리 에러 10건 정도를 파악 하여 폴리필을 추가하여서 빠르게 수정할 수 있었습니다.

에이지알 관리자 페이지 개발

• CRA -> Vite 마이그레이션

  유지보수가 되고 있지 않은 CRA에서 Vite 기반으로 마이그레이션을 진행하였습니다. 젠킨스가 돌던 CI/CD의 Node.js 버젼업을 담당하여 안정적으로 서비스를 배포할 수 있도록 설정하였습 니다.

• 브라우져동영상업로드기능개발

  동영상을 업로드 하는 기능을 개발할 때 서버에서 처리하여 내려주는 방식이 아닌 FFmpeg.wasm을 활용하여 내부 관리자들이 브라우져 상에서 사용할 수 있는 방법을 제시하 고 서버 트래픽 비용을 아낄 수 있게 되었습니다. 추가적으로 cross origin isolation에 관한 지 식을 얻고 해결할 수 있게 되었습니다.

조직 내부의 개발 도구 및 문화 전파

• 개발자경험개선

  prettier나 eslint 등 스타일 도구와 lint들의 설정이 되어있지 않아 코드에 통일감이 없었던 것 을 팀원들을 설득하여 도입하였습니다.

• 사내프론트스터디주도

  이전부터 도메인 별로 흩어져있던 개발자들 간 지식 공유를 위해 프론트엔드 세션이라는 문화가 있었는데, 이것을 좀 더 공고화하여 세션의 리드역할을 하고 최신정보와 실제로는 어떻게 사용했 었는지 공유하는 자리를 마련하였습니다.

전기차 충전기 연동 앱 개발(EVpay) 및 운영

자사 전기차 충전기와 연동되는 앱을 개발하였습니다. 초기 디자인, 와이어프레임, 기술 스택 선 정, 아키텍처 설계, 개발 및 배포까지 담당하였습니다. Flutter로 개발을 진행하였으며 결제 모 듈의 AOS/iOS의 네이티브 앱과 Web의 호환을 위해 Flutter Javascript interop를 활용하였 습니다. Github actions와 Fastlane을 활용하여 배포 자동화를 하였습니다. 앱의 보안을 위해

위변조를 감지하는 기능을 개발하였습니다. 이를 위하여 빌드된 안드로이드 앱에서는 리버싱을 진행하여 smali코드를 변조, iOS에서는 flutter의 jailbreak 패키지를 활용하여 기능 테스트를 진행했습니다.

서비스가 없던 자사에 해당 앱을 통해 유저를 유입시키고, 이를 바탕으로 타사의 서비스까지 운 영하며 총 유저를 1000명가량 확보하였습니다.

Google play: https://play.google.com/store/apps/details?id=kr.co.evar.evpay

App store: https://apps.apple.com/kr/app/evpay/id1619603697

전기차 충전기 관리자 사이트 리뉴얼 및 유지보수

자사 전기차 충전기를 사용하는 충전 사업자들에게 충전기의 여러 정보를 보여주는 관리자 사이 트를 리뉴얼하였습니다. 기존 Vue.js에서 React.js + Next.js로 기술 스택을 변경하고 사업자 별로 여러개의 브랜치로 나뉘어서 배포되어 있던 것을 하나의 브랜치로 통합하였습니다. 잘 관리 된 브랜치를 기반으로 production/develop의 환경을 나누어 Github actions를 통해 CI/CD 파이프라인을 구축하였습니다. 일본과 미국에 있는 사업자들을 위해 i18n을 적용하여 현지화 작업을 진행하였습니다.

전기차 충전기 설정 앱 개발

자사 전기차 충전기의 보드와 통신하여 사용하는 블루투스, 와이파이, NFC 모듈을 설정할 수 있 는 앱을 개발하였습니다. 내부 보드와의 통신은 블루투스를 활용하였고 Flutter를 활용하였습니 다. 기존에 수동으로 충전기의 설정을 변경하는 것이 어렵다는 펌웨어 팀의 고민을 해결하고자 여러정보를한번에입력,수정,삭제할수있고복사,붙여넣기기능이있는앱을만들어사내에 공유하였습니다.

코드 리뷰 문화와 컨벤션정립

회사의 첫 프론트엔드 개발자로 들어와서 혼자 일을 진행하다가 직접 이력서를 보고 팀원을 뽑아

서 같이 일하게 되면서 협업에 대해서 생각을 많이 하게 되었습니다.

우선서로별도의기능을개발해도나중에그기능을꼭만든개발자가수정하지않는다는것을 알게 되었고 컨벤션의 중요성에 대해 생각을 하게 되었습니다. 이에 여러 글들을 참고하여 코드 컨벤션을 정립하였고 이를 팀차원에서 사용하고 있는 에디터인 VSCode의 plugin인 Prettier code formatter를 활용하여 자동으로 적용될 수 있도록 하였습니다.

또한 배포하기 전에 버그를 방지하기 위해 서로의 코드를 확인하는 방법이 필요하다고 생각했고 이를 효율적으로 해결하는 방법을 여러 회사의 테크 블로그와 여러 개발자 분들의 sns를 보며 찾 았고 결론적으로 코드 리뷰를 하는 것이 좋겠다고 판단하여 깃 브랜치 전략을 수립하고 올라온 PR에 대하여 코드리뷰를 진행하도록 하였습니다.