Supple

사용 기술

ElasticSearch PostgreSQL Prisma GraphQL Express.js React Next.js TypeScript Material UI

VPC 구성, VPN 설정 (2021.6)

외부에서의 DB 접근을 차단하기 위한 VPC 구성. 내부 개발자들이 접속할 수 있도록 VPN 설정

•

같은 리전의 퍼블릭 서브넷에 서버 EC2 인스턴스 실행, DB는 프라이빗 서브넷에 연결. 

•

퍼블릭 서브넷은 모든 인터넷 트래픽을 허용하고, 프라이빗 서브넷은 같은 VPC 내의 퍼블릭 서브넷에서의 트래픽만 허용하여 VPC 외부에서의 DB 접근 차단

•

로컬 개발, CI 등 VPC 외부의 특정 컴퓨터에서 DB에 접근하는 경우를 위해 VPN 클라이언트 엔드포인트 설정

•

easy-rsa로 상호인증 키 발급하여 ACM에서 인증서 관리하고 AWS VPN Client 프로그램으로 로컬에서 연결할 수 있도록 함

캐시, 상점 페이지 UI 개선 및 설치 유도 이벤트 개발 (2021.6~6.28)

확장프로그램 설치 유도를 위한 카드, 모달 및 캐시 리워드 이벤트 개발

•

상점 페이지: '커피/음료' 상품이 바로 뜰 수 있게 변경

•

캐시: 캐시가 눈에 잘 띄도록 카드에 골드 컬러 테두리 추가

이미지

•

설치 유도: 설치 유도를 위한 설치 카드 및 모달 개발 / 이벤트 개발

◦

오늘 하루 안보기 등 기능 구현 시 비동기 처리를 위해 localForage 라이브러리를 사용하여 indexedDB에 데이터 저장

◦

확장프로그램 최초 설치 유저에게 캐시를 리워드하는 이벤트 기능 개발

콘텐츠 병목 현상 해결을 위한 리뷰 자동화, 데이터 스튜디오 일일 지표 알림(2021.3~4.9)

리뷰 병목 문제 해결, 콘텐츠 발행 수를 일정하게 유지하기 위해 리뷰 자동화 도입

•

엘라스틱서치로 콘텐츠 태깅 자동화, 머신러닝으로 리뷰어가 수동으로 태깅 시 콘텐츠에 맞는 태그 추천

◦

엘라스틱서치로 동의어, 사전을 통해 해당 태그에 맞는 포스트를 검색해 태깅. cli 커맨드로 만들어 lightsail에 배포. crontab으로 매일 실행되도록 스케줄링해 크롤링된 콘텐츠를 일괄 태깅

◦

OneVsRestClassifier를 사용한 선형 분류 모델로 Multi-Label-Classification 작업 후, fastapi로 빌드하여 lightsail에 배포

•

구글 데이터 스튜디오로 DB와 연동해 리뷰 대기 수 및 발행 수를 보고서로 작성해 매일 슬랙으로 알림

•

리뷰대기 콘텐츠가 2,847개에서 1개로 감소

•

개발 콘텐츠는 매일 20개씩 발행되도록 스케줄링

프로젝트 환경, 생산성 개선(2021.2)

Github 프로젝트 관리 및 클라이언트 최적화 진행

•

클라이언트에서 특정 컴포넌트 코드가 너무 커서 가독성이 떨어지고 수정이 쉽지 않아 컴포넌트 분리

•

확장프로그램의 번들 사이즈를 가볍게 유지하기 위해 번들사이즈 최적화 진행

◦

next-budle-analyzer로 번들 사이즈 분석하여 크기가 큰 라이브러리 대체

◦

코드 스플리팅으로 번들 사이즈가 큰 상점 페이지 개선

◦

라이트하우스 퍼포먼스 점수 상승, shop 페이지 번들 사이즈 156퍼센트 감소

◦

이후, size-limit 액션으로 번들 사이즈 체크 및 제한

•

sentry 프로젝트의 깃헙 액션 워크플로우를 참고해, 깃헙 action/cache 사용하여 액션 실행 시간 감소

•

팀원과 상의하여 gitmoji, PR template 등을 활용해 git commit, merge 전략, PR 부분 개선

관련 포스트

캐시 적립, 쿠폰 구매/조회/취소/재전송 API, 클라이언트, 어드민 개발(2020.12 ~ 2021.1)

제휴 업체인 KTMHows의 명세서를 참고해 쿠폰 구매,조회,취소,재전송 API 개발

•

쿠폰 리스트, 상세 조회 및 취소, 재전송 관리 어드민 개발

•

쿠폰 리스트, 상세 페이지 클라이언트 개발

•

확장프로그램 메인 피드에서 랜덤으로 캐시가 뜨도록 클라이언트 개발

•

캐시 적립 어뷰징 방지 

◦

적립 시 리캡차(v3) 체크해 봇 활용한 어뷰징 방지

◦

서버에 sentry 추가하여 캐시 적립 어뷰징, 쿠폰 전송 실패 등 모니터링

사내 뉴스레터 슬랙봇 '서플타임즈' 개발(2020.11 ~ 2020.12)

사내 직원들의 콘텐츠 검수를 장려하기 위해 개인 DM으로 일정 시각에 포스트를 보내주는 슬랙봇 개발.

•

Slack Review Bot API 개발. 어드민에서 슬랙봇에 가입할 수 있도록 Slack OAuth 개발

•

리뷰어의 선호 카테고리를 지정해 개발자에게는 개발 콘텐츠, 그 외의 리뷰어에게는 트렌드 콘텐츠 전송

•

코드 빌드로 크론 스케줄러를 설정해 가입된 리뷰어에게 매일 포스트 3개씩 전송. 전송 실패 시 채널에 알림

클라이언트 다크모드 개발(2020.10 ~ 2020.11)

서버사이드 렌더링에서도 화면 깜박임 없이 렌더링할 수 있도록 다크모드 개발

•

스크립트가 실행될 때까지 HTML 렌더링이 안되는 점을 활용, 컬러모드 설정하는 인라인 스크립트 주입

•

다크모드, 라이트모드 스타일에는 css variable을 사용해 컬러모드 변수가 바뀌면 바로 화면에 적용

콘텐츠 수급을 위한 Scraper 개발(2020.10)

•

해커톤에서 사용했던 og-scraper 및 cheerio, 서비스 API 등으로 도메인 별 스크레이퍼 개발

•

메시지큐 방식으로 DB에 폴링, 크롤링된 링크가 DB에 쌓이면 해당 링크의 페이지를 스크레이핑

•

cli 실행이 가능하도록 commander 라이브러리로 scrape 커맨드 개발

•

AWS의 lightsail 인스턴스에 pm2로 실행하여 백그라운드에서 상시 스크레이핑할 수 있도록 개발

•

일별 평균 70개의 콘텐츠 크롤링

서플 클라이언트 프로젝트 환경 구축 + 클라이언트 컴포넌트 개발(2020.8 ~ 2020.9)

•

next.js, material-ui, emotion, apollo client로 클라이언트 환경 구축

•

release-it을 사용한 깃헙 액션으로 Lighthouse CI, Chrome Extension 배포 자동화

•

사이드바, 헤더 컴포넌트, 로그인 카드, 관심태그 설정 다이얼로그, 오프라인 페이지  개발

•

관심태그 설정 다이얼로그에서 직업 별 추천 태그 설정할 수 있도록 API, Client, Admin 개발