미리보기

Second Wave, iLLANG(인랑) 을 개발한 게임 회사입니다. DevOps & 풀스택 개발자로 운영 툴과 BI 툴 쿠폰 페이지를 개발했습니다.

iLLANG 쿠폰 페이지 제작 (2024.01)

Vite, Typescript, React 탬플릿 기반으로 유저들이 쿠폰을 등록할 수 있는 웹 페이지 제작

• 트래픽이 많을 것으로 예측해 게임 라이브 서버 배포 전 배포 방식을 Vercel 호스팅에서 AWS S3 정적 웹 페이지로 마이그레이션하여 트래픽 비용을 감소 시켰습니다.
• AWS Cloudfront 를 활용해 정적 웹 페이지를 배포한 버킷에 OAI를 붙여 CloudFront 를 통해서만 버킷에 접근할 수 있도록 배포하여 보안 및 사용자 경험 향상
• Github-actions 를 활용해 CI/CD 파이프라인을 구축해 개발에서 배포까지 과정을 자동화하여 지속적인 배포가 가능하게 구현
• 브라우저의 언어를 감지해 사용자의 언어로 라우팅 될 수 있도록 구현
• https://illangcouponprod.challengersgames.net

iLLANG BI 툴 개발 (2024.01 ~ )

Vite 기반의 React 프로젝트와 Nest.js 를 활용해 백앤드 서버 구현

• Chart.js 라이브러리를 활용해 대시보드 및 각 지표 별 차트 구현
• 계정 생성 및 권한 설정 기능 개발 (로직과 UI)
  • Nest.js 인터셉터를 활용해 AOP 구현 (권한을 체크해 서버에서 권한이 없다면 403 Forbidden 처리)
  • 로그인 시 jwt 토큰에 접근 가능한 메뉴를 넣어주고, 화면단에서 메뉴에 접근할 권한이 없을 시 메뉴 노출이 안되고 서버에 요청을 할 수 없도록 구현
• 프론트엔드 성능 최적화
  • React 의 lazy 를 활용해 코드 스플리팅을 적용해 초기 로딩 속도 향상
  • Vite 의 빌드 도구인 Rollup 의 manualChunk 를 활용해 중복 모듈 공통화
• LocalStorage 에 직접 접근해 데이터를 저장, 사용하던 로직을 걷어내고 zustand 의 persist middleware 를 활용하여 로직을 공통화해 동일한 비즈니스 로직 제거
  • jwt 토큰을 LocalStorage 에 저장하는 방식을 걷어내고 refreshToken 은 cookie 에 저장, accessToken 은 발급받은 시점에 axios 인스턴스의 request header 에 주입하는 방식으로 리팩토링
  • refreshToken 탈취를 방지하기 위해 http only, secure 속성 활용
• 로그 데이터가 저장된 DB 의 부하를 덜기 위해 UTC 00시에 전날의 데이터 스냅샷을 떠오는 스케줄러 구현
  • 데이터 필터를 고려하고 많은 양의 원본 데이터를 저장하는 부담을 덜기 위해, 원본 데이터를 스냅샷 한 후 BI 툴 DB 에 데이터를 그룹화해 저장

육아 돌봄 플랫폼으로 상반기 서비스 오픈을 앞두고 있습니다. 프리랜서 개발자로 백오피스를 기획, 개발하고 랜딩페이지를 제작했습니다.
Jira를 활용하여 로드맵을 작성하고 프로젝트에 스프린트를 도입해 일정 관리를 수월하게 했습니다. 스프린트를 적극적으로 진행할 수 있도록 워크플로 문서를 작성하여 배포하고, 스크럼 마스터의 역할을 맡아서 스프린트를 이끌었습니다. 그 결과 스프린트를 도입하기 전과 대비하여 일의 병목현상이 80% 가까이 줄어들었습니다.

랜딩페이지 제작 (2023.11 ~ 2023.12)

Next.js 를 활용해 서버 사이드 랜더링 방식으로 랜딩페이지 제작 및 Vercel 호스팅

• 모바일, 테블릿, 데스크탑 해상도에 대응하는 반응형 웹 UI 구현
• Google 웹 마스터 도구를 활용해 랜딩 페이지 검색 상단 노출 유지
• 개발자도구 Lighthouse 지표를 활용해 성능, SEO 최적화
  • 성능 최적화 작업으로 Lighthouse 지표 개선 (80점 > 100점)
  • next/image 패키지를 활용해 이미지를 동적 로딩 하고, 기존 이미지들을 avif, webp 확장자로 이미지를 변환시켜 이미지 리소스 사이즈 최적화
  • 구글 폰트를 직접 내려받던 방식을 next/font 패키지를 활용해 폰트 리소스를 next 로부터 받도록 변경해 네트워크 페이로드 감소
  • SEO 최적화 작업으로 Lighthouse 지표 100점 달성
  • next/image 의 Image 객체를 사용할 때 alt 속성을 부여함으로써 이미지 SEO 최적화
  • meta 태그와 title 태그 등 head 에 들어가는 태그를 사용해 페이지마다 동적으로 SEO 최적화를 하고 HTML 태그를 시멘틱하게 사용해 크롤러가 쉽게 크롤링 할 수 있도록 페이지 최적화
• https://mommydndn.com/

백오피스 개발 (2023.10 ~ 2023.12)

• 기초 UI 컴포넌트 구현 및 Storybook 을 통해 시각화, UX 다큐먼트 작성
• React Router 객체를 활용해 관리포인트를 최소화 하여 LNB 컴포넌트를 동적으로 구현
• react-table 라이브러리를 활용해 행 선택, 행 확장, 정렬 기능, 서버 사이드와 클라이언트 사이드 페이지네이션이 가능한 테이블 컴포넌트 구현
• 실시간 알림 기능 구현
  • STOMP 프로토콜을 활용해 클라이언트 웹 소켓 구현
• 백오피스 서버 REST API 구현

클라우드와 애자일 협업 전문 기업입니다. 오픈소스컨설팅의 Playce Dev 팀에서 프론트엔드 개발자로 Playce 제품의 웹 콘솔 화면을 개발했습니다. 매주 수요일에 테크데이를 진행해 함께 코드 리뷰를 하고 개선했던 내용을 문서화하여 발표하는 문화를 정착해 함께 성장하는 팀 문화를 구축했습니다.

Playce RoRo (2022.04 ~ 2023.10)

React 기반 프로젝트 신규 기능 개발 및 유지보수

• 대규모 폼 컴포넌트 리팩토링
  • 3 depth 이어지던 폼 컴포넌트를 react-hook-form 을 도입해 리팩토링을 하여 2 depth 로 컴포넌트의 깊이를 줄이고, 1,000줄 이상 작성된 기능 코드를 기능단위 커스텀 훅으로 분리해 결합도 감소
• 대시보드 기능 구현
  • 10,000 개 이상의 데이터를 다뤄야 하는 차트 컴포넌트를 구현하기 위해 html cavas 기반의 chart.js 라이브러리를 사용하여 데이터를 성능 저하 없이 시각화하는 Bar, Line, Pie 차트를 구현
  • 디자인 된 툴팁의 위치를 구현하기 위해 플러그인 코드를 작성하여 차트 컴포넌트에 결합
• STOMP 를 활용해 서버와 소캣 통신을 하는 웹 터미널 구현
• 코딩 컨벤션 정의, 적극적인 코드 리뷰를 통해 팀단위 코드 일관성 유지
• 낮은 React, React-router 의 버전으로 인해 유지보수가 어려워 해당 라이브러리의 버전을 최신 버전으로 관리하고, 버전 변경으로 인한 코드 리팩토링 진행

Playce RoRo for Java App (2022.07 ~ 2023.01)

프로젝트 MVP 단계부터 릴리즈까지 프론트엔드 개발자로 참여했습니다.

• Redux 를 활용해 상태관리를 했던 아키텍처에서 Recoil, React-Query 를 도입하여 보일러 플레이트를 제거하고 관리 포인트를 최소화
• Playce 제품군에서 공통으로 사용할 디자인 시스템 제작
  • Storybook 을 활용해 디자인 시스템 컴포넌트를 시각화
  • Playce 컴포넌트의 UI/UX Document 코드 작성

올해 6월 도입된 만 나이를 기념하고, 만 나이 적용 시 얻게 될 시간에 실천 할 수 있는 것에 대한 목표를 정하고 지인들과 공유하며 응원의 메세지를 공유할 수 있는 서비스를 4명의 인원과 함께 만들었습니다.

• Next.js page 라우터를 사용해 서비스 개발
• 초기 아이디어 단계부터 기획, 개발, 서비스를 배포하는 단계까지 팀 리딩
  • Notion 을 활용해 아이디어를 정리, Github 을 활용해 이슈 추적 및 관리
  • AWS 기반의 서버 인프라 구성
    • 퍼블릭 서브넷에 ALB 를 배포하고 타겟 그룹으로 EC2 Auto Scalling 그룹을 배포하여 내구성 있는 아키텍처 설계 및 트래픽을 분산 처리 할 수 있도록 구성
  • AWS EC2 를 활용해 프론트엔드 배포
    • Github-actions, AWS Code Deploy 를 활용해 블루 그린배포 방식의 무중단 배포 CI/CD 파이프라인 구축
• 로그인 기능 구현 및 클라이언트 세션 로직 작성
  • next-auth 를 활용해 Google, kakao, Naver 의 OAuth 로그인 구현
  • JWT 토큰을 활용해 세션을 유지하는 로직 작성
• https://github.com/kangactor123/FE_puzzle_Godsang