라이브 서비스 개발 ▪️ Zoom 과 유사한 비디오 채팅 서비스 개발 ▪️ Vue.js 3 와 TypeScript 사용하여 프론트엔드 개발 ▪️ AWS S3, CloudFront, Route53, Certificate Manager, Parameter Store, IAM 을 사용하여 인프라 구축 ▪️ AWS Chime 사용하여 카메라, 마이크, 스피커 스트리밍 구현 ▫️ MediaStream 사용하여, 스트리밍 카메라를 또 다른 component 에 표출되게 함 ▫️ 이를 응용하여 화면 공유중에도 참석자 카메라를 보이게 함 ▪️ Socket.io 사용하여, 채팅 메시지와 유저 역할, 카메라와 마이크와 같은 권한 등을 실시간으로 반영되게 함 ▪️ 채팅 영역을 별개 domain 과 component 로 나눠서, 외부에서 단독 페이지로 접근할 수 있게 만듬 ▪️ 채팅 메시지에 포함된 URL 은 linkify.js 를 사용하여 <a> 태그로 치환 ▫️ 이 때 작성한 소스 코드는 vue-3-linkify NPM 라이브러리로 만듬 ▪️ Axios interceptor 를 사용하여, 에러 발생시 sentry 수집시켜, 에러 파악 용이하게 만듬 ▪️ Tailwind CSS 로 디자이너가 정의한 색상 및 폰트를 코드화하여, 쉽게 쓸 수 있게 만듬 ▪️ GitHub Action 으로 linting 과 배포를 자동화 ▫️ Vue ESLint Rule 에서 필수적으로, 강력하게, 권고하는 사항을 모두 채택하고 warning 조차도 허용안함 ▫️ 대신 eslint --fix 가 온전히 작동되게 만들고, 팀내에 Run eslint --fix on save 를 권장함 ▫️ 결과적으로 개발자를 세미콜론, 따옴표, import 순서 등을 고민할 필요 없게 만들어 생산성 향상 도모함 ▪️ 프로젝트 종료 이후, 유지보수 및 고도화는 쥬니어 2분과 함께 작업함. 코드 리뷰와 세미나를 진행하여 팀원의 성장에 집중함 탈잉웹 배포 프로세스 개선 ▪️ Jenkins 배포 스크립트와 소스 코드에 하드코딩 되어있던, DB 호스트, 비밀먼호, SSH 키와 같은 민감한 정보를 AWS Parameter Store 로 분리 ▪️ 분리된 정보는 env-aws-params 라이브러리를 사용하여 AWS Parameter Store 에서 가져와 .env 로 말아 사용 ▫️ 기존 env-aws-params 는 항상 default profile 를 바라보고 있어서, 특정 profile 를 --profile 로 받을 수 있게 개조 ▫️ 개조한 go 소스파일을 Amazon Linux 에서 돌아갈 수 있게 compile 하여 사용 ▫️ 개조한 소스 코드는 say8425/env-aws-params 로 공개

더보기

클래스팅 계정 서비스 개발 ▪️여러 제품들에 분산된 계정 서비스를 통합하기 위한 계정 서비스 작업 ▪️Nest.js 와 AWS DynamoDB 를 사용하여 백엔드 개발하고, Serverless 로 배포 ▪️AWS DynamoDB 를 Single Table 로 구축하여, table 간 join 레이턴시 제거하여 빠른 속도 확보 ▪️API Gateway 를 사용하여, JWT 인증하고, 배포된 lambda function 을 trigger 함 ▪️passport.js 를 사용하여, Apple, Google, 카카오, 네이버 소셜 로그인 구축 ▪️이메일, 아이디, 휴대폰으로 로그인 및 회원가입 기능 개발 ▫️libphonenumber-js 를 사용하여, 휴대폰 번호 유효성 확인 ▪️class-validator 를 사용하여, 각종 validator 작성 - 이모지, 특수문자 제한, 비밀번호 강도 등등 ▪️프로젝트는 기본적으로 100% 테스트 커버리지 지향하여, 유닛테스트와 E2E 테스트등 작성 ▪️react-admin 을 사용하여, 계정 관리 페이지 개발 Serverless 환경에서 Ruby on Rails 시험 구축 ▪️전통적인 DB 대신, AWS Dynamodb 를 사용하는 rails 프로젝트를 serverless 로 구축 및 배포 ▪️dynamoid 를 devise 에도 맞물려 쓸 수 있는 adapter 시험 개발 ▪️레일즈에서 AWS Dynamodb 를 Single Table 로 쓰기 어려워서 시험에 그침 커머스 솔루션 클레이풀 연동 ▪️클레이풀에 토큰 API 요청 비용을 줄이기 위해, 발급된 토큰을 대신 저장하고 반환해주는 서비스 개발 ▪️Nest.js 와 AWS DynamoDB 를 사용하여 백엔드 개발하고, Serverless 로 배포 ▪️API Gateway 를 통해 토큰 요청받으면, 요창받은 유저의 토큰을 쿼리하여 반환 ▫️없으면 클레이풀로부터 새로 발급받고 테이블에 저장하고 반환 ▫️발급된 토큰에 TTL 걸어서, 자동으로 만료 시킴 ▪️클레이풀에서 제공해주는 SDK 라이브러리에 버그가 있는 것을 제보하고 해결책 공유 기존 서버 레일즈 5.2.3 -> 5.2.4 업그레이드 ▪️사용중인 라이브러리들 디펜더시 확인하며, 점진적으로 업그레이드 진행 ▪️RailsDiff, Fast Ruby 업그레이드 가이드와 공식 업그레이드 가이드 참조하여 진행 ▪️향후 rails 6.1 까지 고려하여 deprecated 된 라이브러리 교체 및 업그레이드

더보기

간호사 구인구직 서비스 ‘널픽’ 개발 ▪️ 구직중인 간호조무사 유저에게 구인중인 병원을 지도에서 보여줘서 빠르게 구직할 수 있게 도와주는 앱 서비스 ▪️ Ruby on Rails로 Backend, Nuxt로 앱 웹뷰에서 쓰일 Frontend 개발 담당 ▪️ 카카오 로그인 API를 사용하여, JWT 로그인 인증 개발 ▫️ 카카오 로그인 access token을 받는데 성공하면, 카카오 인증 서버가 보내준 uid 혹은 email 로 가입여부 체크. ▫️ 이미 가입되었다면 해당 user의 id로 JWT를 발급하여 보내줌. 없으면 user 생성하여, 생성된 id로 JWT 발급 ▫️ 유효기간은 1주일. 해당 토큰으로 refresh 요청시, 재발급 ▪️ Ncloud SMS API를 사용하여 Admin에서 사용할 SMS 발송 개발 ▫️ 여러 user에게 SMS 혹은 LMS 발송하는 API 개발 ▫️ Element.js를 활용하여, 메시지 보내기 frontend component 개발 ▪️ user 전화번호 인증 API 및 frontend 개발 ▫️ 전화번호 인증 요청시, 해당 전화번호 중복 체크 ▫️ 유효한 전화번호면, SecuredRandom 함수로 인증번호 발급 ▪️ user가 지원한 병원 공고는 join table로 저장 ▫️ 지원, 지원취소 여부 별도 column에 저장 ▫️ 지원한 병원공고는 unique하게 저장 ▫️ 지원취소하고, 재지원시 지원한 병원공고 새로 생성 ▫️ partial unique index를 생성하여 빠르게 쿼리 ▪️ 주소 저장시, Sidekiq을 활용하여 느린 좌표변환 계산을 background로 수행되게 함 ▪️ 유저 프로필 및 이력서 생성 및 수정 페이지 개발 ▫️ 컴포넌트화하여 재활용성 올림 ▫️ EventBus 사용하여, component간에 메시지 주고받을 수 있게 만듬 금융 투자 웹 서비스 ‘비브릿지’ 개발 ▪️ 헤지펀드팀에서 주식, 해외주식, 선물과 같은 금용 투자를 도와주는 웹 서비스 ▪️ Ruby on Rails로 Backend, Vue.js로 Frontend 개발 담당 ▪️ 기존에 사람이 직접 수동으로 같은 주문을 조금씩조금씩 넣어야 했던 것을 자동화 해줌 ▫️ Sidekiq으로 주문들을 queue에 쌓아놓으면, worker가 주문을 진행 ▫️ 사내에서 동일 상품을 매매, 매수하는 주문이 있으면, 증권사 거래 대신 서로 거래하게하여, 증권사 거래 수수료 절감 ▪️ 유저 Role 및 권한 구현하여, 특정 메뉴 접근 제한 ▪️ 주문 승인 담당하는 유저에게 주문 발생시 알람 보내는 기능 개발 ▫️ 텔레그램 알람과 웹브라우저 알람 받을 수 있게 함 ▫️ 텔레그램 알람은 텔레그램 API 사용 ▫️ 웹브라우저 알람은 Ably로 broadcasting해서 웹브라우저가 수신하고 알람 띄움 ▪️ 보유 주식 수량 및 차트 또한 Ably로부터 받아서 지속적으로 갱신 ▪️ 환율 계산과 주식 코드 변환용 별도 서버 구축하여, 필요 할 때마다 API를 통하여 질의 ▫️ 모든 API는 JWT 인증을 요구하게 만듬 ▪️ echarts 사용하여 차트 구현 ▪️ CSV 데이터 import, export 개발 ▫️ EUC-KR을 UTF-8 인코딩 변환 ▫️ 테이블 내용을 csv양식에 맞게 클립보드로 내보내는 기능 개발 ▫️ 역으로 엑셀에서 테이블을 복사하고, input에 붙여넣기 알아서 input에 값을 채워줌 ▪️ 매니저별, 펀드별, 종목별 등등 다양한 각도에서 투자 성과를 보여주는 보고서 개발 ▫️ 자주 사용되고, 중복되는 table은 component로 만들어 재활용 ▪️ RSpec, Cypress, Ghost Inspector 사용하여 테스트 ▪️ CircleCI 배포 및 테스트 구축

더보기

소셜 소개팅 서비스 ‘이음’, ‘이음오피스’ 개발 ▪️ 매일 일정횟수마다 남녀 유저를 소개해주는 소셜 데이팅 서비스 ▪️ Ruby on Rails로 Backend, jQuery로 Frontend 개발 담당 ▪️ 남여 유저를 매칭해주는 엔진 분석 및 개선 ▫️ 쿼리를 필요이상으로 요청하고, 램을 불필요하게 할당하는 코드 리팩토링 ▫️ 하드코딩 걷어내고 공통된 코드를 모듈화해서 재사용성 향상 ▫️ 재사용성이 향상된 코드를 기반으로 지역별, 나이별, 이벤트 참가자 등 다양한 조건을 구동할 수 있게 만듬 ▫️ 매칭 성공 여부 및 성사된 커플 수를 SMS와 메일로 발송해주는 시스템 구축 ▫️ 램 사용량이 줄어들어서, 인스턴스를 저렴한 타입으로 교체하여 비용 절감 ▪️ 매칭 성공 여부 및 성사 된 커플 수를 Sidekiq을 사용하여 SMS와 메일로 빠르게 발송 해주는 시스템 구축 ▪️ 공지사항 및 유저 개인 메시지 발송 API 구현 ▪️ 유저가 특정 유저에게 호감도를 표할 수 있는 기능 개발 ▫️ partial unique index를 사용하여 이미 적립되었는지 빠르게 쿼리 하여 확인 결혼정보 서비스 ‘맺음’ 웹 홈페이지 개발 ▪️ Ruby on Rails와 Laravel로 Backend, jQuery와 React 로 Frontend 개발 담당 ▪️ Jenkins가 배포 성공 여부를 Slack으로 알람보내게 함 ▪️ 하드코딩으로 관리되고 있던 카테고리를 DB화 시켜, 사내 admin 툴로 관리할 수 있게 만듬 ▫️ 게시물 페이지도 카테고리별로 볼 수 있게 만듬 ▪️ 상담사 입사지원 페이지 작업 ▫️ 데스크탑, 모바일, PDF 페이지 각각 작업 ▫️ 엉뚱한 회전 방향으로 저장되는 사진을 image magick 활용해서 고침 ▫️ 입사 지원시, 사내 HR팀에게 PDF 변환하여 메일 자동 발송 ▪️ FAQ 페이지를 React.js + Type Script 사용하여 구현

더보기

맞춤 의상 관리 솔루션 '단도리' 프론트, 백엔드 개발 담당 ▪️ 맞춤 의상 업체에서 수기로 작업하던 의상 치수 계산 및 관리를 전산화하고, 웹콘솔을 제공해주는 프로젝트 ▪️ Ruby on Rails로 Backend, jQuery로 Frontend 개발 담당 ▪️ 다양항 옵션을 가진 셔츠, 바지, 베스트, 재킷 등등 의상들을 직접 모델링 ▫️ 의상 적정 사이즈 범위를 form 페이지에서 제안하고, validation 체크 ▪️ 단추, 칼라, 소매 등 의상 옵션 이미지를 image magick 으로 병합하여 보여줘, 사용자의 의상 옵션 선택을 도와줌 ▪️ 사용자 직책 및 권한에 따라서, 메뉴 접근을 제한함 ▪️ 상품 배송 상태 관리 페이지 개발 ▪️ TravisCI와 Capistrano를 사용하여, 배포 자동화 구현

더보기

파싱 방지 보안 솔루션 '크로첵' 프론트, 백엔드 개발 담당 ▪️ 랙서버에 탑재될 솔루션의 웹 콘솔 개발 ▪️ Ruby on Rails로 Backend, jQuery로 Frontend 개발 담당 ▪️ 개발은 물론 레이아웃, 기획, 폰트 및 색상 가이드도 혼자서 작성 ▪️ CPU 사용율과 메모리 점유율과 같은 시스템 상황을 보여주는 차트 구현 ▪️ 일정 주기별로 API 호출하여, 실시간 데이터 갱신 구현 ▪️ 선택한 옵션에 따라서, 보고서를 유기적으로 생성 및 인쇄해주는 기능 구현 ▪️ Capistrano를 사용하여 배포

더보기

'레페리' 회사 홈페이지 프론트, 백엔드 개발 담당 ▪️ Ruby on Rails로 Backend, jQuery로 Frontend 개발 담당 ▪️ 언어별 차지하는 공간과 폰트를 고려하여, 한국어, 중국어, 영어 현지화 i18n 작업 ▪️ 구글 지도를 사용할 수 없는 중국을 대비하여, 바이두 지도를 활용하여 현지화 작업 ▪️ 반응형 디자인 적용하여, 모바일, 태블릿, 데스크탑 대응 ▪️ AWS Elastic Beanstalk 사용하여 배포

더보기

모바일 유저 애널리틱스 서비스, '유저해빗' 프론트, 백엔드 개발 담당 ▪️ Ruby on Rails로 Backend, jQuery로 Frontend 개발 담당 ▪️ C3.js와 Vis.js 라이브러리를 사용하여 차트 작업 ▪️ 유저의 OS 버전, 기기 모델, 시간대별 접속률 등을 차트로 보여주는 대시보드 개발 ▪️ 프로필 수정 페이지 작업 ▪️ 네트워크 차트를 사용하여, 유저의 뷰 이동 경로를 보여주고, 뷰 방문 횟수를 보여주는 유저 경로 차트 개발 ▪️ Ruby on Rails 3.2 버전을 4.2 버전으로 업그레이드

더보기

화장품 소개 서비스 '레페리' iOS 앱 개발 ▪️ Objective-C를 사용하여, iOS 7, 8 대응 ▪️ StoryBoard를 사용하여 뷰 개발 및 AutoLayout 적용 ▪️ 페이스북 API를 사용하여 댓글기능 개발 ▪️ 원격으로 Navigation Bar를 커스텀 하는 기능 개발

더보기