미리보기

기술 스택: Java, Maven, Beautiful soup, Selenium, Html5, Javascript, AWS EC2, REST API

●  사내 사무 업무 자동화 프로그램 개발 18.12-19.1

사내에서 필요한 데이터를 크롤러를 이용해 수집하여 CS 팀의 반복 작업을 자동화하였음. 반복되는 업무를 자동화하여 효율을 높이는 것을 경험함.

코딩교육 주말 강사

● 프로그래밍 언어(C, C++, Python), 자료구조 강의 

개발을 모르는 사람의 시선에서 이해하기 쉬운 설명이 무엇인지 고민할 수 있는 시간을 경험함.

기술 스택: Vue, Vuex, Websocket, Html, Scss, Mysql, Nodejs

Tools: Git, Github, Jira, Zeplin, Figma, Selenium

사이트: https://btxpro.co.kr

● 신규 서비스인 ‘예치’를 위한 페이지 개발  21.3

운용 업체와 계약한 예치 상품을 보여주고 신청했던 내역을 보여주는 ‘예치’ 페이지 프론트엔드 담당

● 필터 기능 구현  21.2

모든 마켓을 보여주는 필터를 통해 사용자가 한 눈에 확인할 수 있도록 개발. 기존에는 특정 화폐를 기준으로 보여주는 필터만 존재하였는데 기준 화폐가 될 수 있는 모든 마켓 리스트를 보여줄 수 있도록 구현함.

(https://dovewallet.com/en/trade 의 market 부분의 All market) 

● E2E 테스트 21.11

로그인, 회원가입, 지갑 기능 테스트 등 사이트의 반복적으로 실시하는 루틴을 jest, selenium을 사용하여 자동화. 반복되는 테스트 자동화로 생산성을 높임.

● 반응형, 크로스 브라우징 대응

● 관리자 페이지 기능추가 및 변경 업무

요구사항에 맞춰 기능을 추가하거나 비둘지 지갑에서 기능 추가 시 관리자 페이지에 반영하는 업무. 백엔드 작업까지 하면서 전체적인 구조를 익힐 수 있었음.

기술스택: Typescript, React, Nextjs, Apollo Client, Styled-component, Redux

Tools: Git, Github, Zeplin, Figma
사이트: https://www.creatrip.com

1.결제 서비스 고도화 21.12 - 23.12

● 비회원 결제 기능 개발 22.01
  -기존의 회원 예약 기능의 코드를 회원/비회원에서 공통으로 사용할 수 있도록 리팩토링

● 온라인 쿠폰 개발 23.07

● 대만 결제 수단 ECPAY 추가 21.11

  -대만 결제 1위 pg사 ecpay에서 제공하는 주문 생성api를 사용하여 프론트엔드 로직 구현

● 엑심베이 직연동(수수료 절감) 23.7 

2.도메인 개발 21.04 - 23.06
● 여행

  -설명: 한국 여행에서 갈 수 있는 스팟을 보여주고 예약, 쿠폰을 발급하는 서비스 - 링크

  -기존 지도 구현방식 비용 이슈 발견하여 비용 절감(javascript api에서 embed api로 변경)
● 어학당
  -설명: 대학교 한국 어학당의 신청서와 각종 서류들 처리 대행하는 서비스 - 링크
  -신청서 폼 담당하여 입력 정보를 위한 설계와 검증을 위한 테스트 코드 작성
  -핵심 정보들을 위한 창구인 에센셜 컨텐츠, 시리즈 컨텐츠 기획 및 개발
  -어학당 스쿼드 기획, 검증, 회고 업무 프로세스 체계화
● 블로그

  -설명: 한국을 알리는 자체 콘텐츠 제공 서비스 - 링크
  -컨텐츠 읽는 중 원하는 목차로 바로 이동하는 기능 개발

● 직구 

  -설명:외국인이 한국에서 필요한 상품들을 구매하는 역직구 서비스 - 링크

3. 전체 프로젝트 21.04 - 23.12
● 코드 설계 개선
  -공통 기능의 특정 도메인에 대한 의존성 제거하도록 설계
  -관심사 별 코드 분리하도록 설계
  -코드 중복 제거

● 테스트 코드 적용
  -구현체에 의존하지 않도록 작성
  -테스트 툴: jest, react testing library, msw

● 글로벌 서비스
  -6개국 다국어 서비스 지원(대만(간체/번체), 홍콩, 베트남, 영어, 일본어)
  -모바일, 태블릿, 데스크탑 반응형 사이트

  -크로스 브라우징 대응(크롬, 사파리, 파이어폭스)
● Next.js를 활용한 hybrid rendering(CSR, SSR)

● vue 기반 웹사이트를 react로 다시 만드는 프로젝트 21.04 - 21.10 

  -기존 사이트의 스타일링, 비즈니스 로직을 포함한 페이지를 리액트로 다시 구현하는 작업을 진행. 

  - 디자이너 팀과 협업하여 디자인 시스템을 새롭게 정의하면서 디자인 리뉴얼도 함께 반영.

4. 성능 개선 프로젝트 23.07 - 23.12
● 6개월 동안 응답시간 10초 대에서 3초 대로 개선(p99, 주 단위)
● api 호출 최적화를 통해 수 백만 건의 쿼리 호출 감소
● 발생한 병목 지점 해결사 역할
● 자세한 프로젝트 내용은 별도의 링크를 첨부 

성능 개선 프로젝트

5. 파트리더 23.01 - 23.10
●팀이 추구하는 방향과 맞는 지원자를 뽑기 위해 사전과제를 도입. 이후 지원자 4명 채용
●채용 프로세스 진행 및 신규 입사자 온보딩
●팀내 기술 교류를 위해 관심있는 기술 등을 공유하는 시간을 마련함

오랜 기간 서비스가 고도화되면서 느려진 사이트를 빠르게 만드는 프로젝트

• 기간: 2023.07-2023.12

• 시작한 이유

  • 신규 도메인인 숙소를 런칭하고 나서부터 응답 시간이 10초 대가 나오고 있는 것을 확인하게 됨. (응답시간은 프론트엔드 서버 응답시간, 1주 단위 p99 기준) 로딩 시간과 이탈률 사이의 관계를 찾아보고 굉장히 밀접하여 비즈니스에 영향을 줄 수 있다는 것을 알게 됨. 내용을 공유하고 제안하여 개선 작업 진행

• 과정

  • 특정 영역에 제한을 두지 않고 가장 심한 병목을 탐지하고 해결하는 사이클을 반복. 크게는 프론트엔드, 백엔드, 인프라로 나누어 하단에 기술

  • 전사 타운홀에서 성능이 세일즈에 미치는 영향을 주제로 발표, 성능 최적화 스터디 등 성능을 신경 쓰는 문화를 만들기 위해 노력함

• 결과

  • 6개월간 지속적인 병목 해결을 통하여 3초 대로 안정화함.

이하 내용은 상세 작업 내용과 배운 점을 기술하였습니다. 프론트엔드, 백엔드, 인프라, 배운점 순

프론트엔드

1. lazy render 도입 및 적용

   • 내용: 백엔드 성능이 너무 떨어지던 상황이라 급하게 api 호출 자체를 줄여야 하는 상황이었음. 이를 위하여 프론트에서 호출되는 불필요한 api 를 줄이고자 함.

2. 최초 렌더링 시 보이는 영역을 제외하고는 바로 렌더링할 필요는 없었기 때문에 이외 영역들은 Intersection Observer 사용하여 lazy render 적용
   우선순위는 Google Analytics 의 Pageview 기준으로 결정하여 점진적으로 적용. 블로그 상세 페이지 최적화 결과 약 200만 건의 쿼리 호출 감소

3. graphql 쿼리 요청 최적화

   • 내용: apollo studio를 통해 모니터링하여 불필요한 호출과 병목 쿼리 탐지. query의 depth를 줄이거나 데이터 조회 구조를 바꾸는 등의 최적화 진행

4. static site generation 도입 및 적용

   • 내용: nextjs의 ssg 기능을 활용하여 페이지 자체를 캐싱

백엔드

1. 레디스 코드가 수개월 이상 작동 안하는 것 발견하여 디버깅 및 해결.

   • 내용: 예약 화면에서 심한 병목(기본 5초 넘는 응답)이 발생하였는데 레디스 설정 실수인 것을 디버거를 통해 찾아서 해결. 해결 과정에서 찾기 어려웠던 내용은 글로 작성 ioredis cluster 설정 방법

2. 미사용되는 디비 칼럼 정리

   • 내용: typeorm에서 만들어주는 쿼리(select *(all)) 을 사용하였기 때문에 성능상 손해 보지 않기 위해 정리 솔선수범하여 정리하여 정리하는 분위기 조성

3. slow query 점진적 개선을 위한 프로세스 구축

   • 내용: 슬로우 쿼리 알림이 빈번하여 아무도 확인 안하는 현상 발견함. 알림 기준을 5초부터 시작하여 점차 내리는 것을 추진. 빈번하게 올 때에는 아무도 신경 쓰지 않았던 알림이 어쩌다 한 번씩 오면 중요하게 느끼고 해결하는 심리를 이용

4. api 응답 캐시 정책 수립

   • 내용: 캐시에 대한 정책이 없고 신경 쓰지 않는 점을 발견. api 캐시가 적용되었는지 바로 확인할 수 있도록 컨벤션 도입

인프라

1. aws ecs 인스턴스 사양 변경을 통한 서버 안정화

   • 내용: 프론트엔드 인스턴스, msa로 나뉘어있던 백엔드 인스턴스의 적정 인스턴스 사양을 찾아 변경하고 서버 안정화. 각 인스턴스의 실행 특성을 분석하기 위해 nodejs 디버거로 콜스택을 분석

2. 정각마다 느려지는 이상 현상 해결

   • 내용: 사이트가 급격하게 느려지는 경우들이 생겼는데, 원인 파악이 잘 안되고 있었음. aws cloud watch 모니터링 지표에 볼 수 있는 지표들을 다 추가해서 분석하여 원인으로 추측되는 것들을 좁혀 나감. 숙소 연동을 위한 정각에 오는 웹훅 때문임을 알게 됨. 웹훅 인프라로 분리하여 해결

3. 확인에 참고한 지표: network traffic(inbound, outbound), cpu usage, memory, rds cpu usage, rds memory 등.

4. terraform 이용하여 서버 구축 후 인하우스 트래픽 분리

   • 내용: 어드민에서 벌크 업로드/다운로드 기능을 사용하여 부하 주는 경우가 빈번하였음. 이후 응답속도가 개선되고 모니터링 데이터도 분리되어 분석 용이해짐.

배운 점

1. 오랜 기간동안 축적된 성능 저하는 해결 비용이 많이 든다. 따라서 성능을 염두에 두며 개발하자.

2. 유저는 긴 로딩을 기다리지 않는다. 로딩 시간이 이탈률에 주는 영향이 크다. 별도 기록 빅테크 레퍼런스 정리 글

3. 성능 지표에서 평균을 보면 데이터가 희석되어 정확한 데이터를 볼 수 없다. p99, p95, p75 등 비즈니스에 적합한 기준을 정해서 사용해야 한다.

4. 클라우드 기반으로 인프라가 구축되어 있다면 돈을 들여서 서비스를 안정화해 볼 수 있다. 이후 리소스 자원들을 잘 튜닝하여 최적화해 볼 수 있다.

5. 세팅 코드가 문제가 있음에도 컴파일 타임, 어플리케이션 부팅 시 오류가 나지 않는 것이 매우 위험하다.