반갑습니다,
저는 김도균입니다.

3년차 웹 개발자로 현재는 프론트엔드 개발자로 일하고 있으며
적용해 보고 싶거나 재미있는 기술 아티클은 언제나 공유하는 습관을 지니고 있습니다.
타입 좁히기를 좋아하고, 남의 코드를 분석하는 것이 취미이며 내가 만든 코드로 인해 동료의 귀차니즘을 줄이는 것을 좋아합니다.
백엔드 개발 경험 덕분에, 클라이언트와 서버 간의 데이터 흐름을 이해하고 있습니다. 이를 바탕으로, 전체 시스템을 고려하여 설계하고 개발하기 위해 노력하고 있습니다.

경력.

(주)클루커스.

프론트엔드 개발자 - 현재

사내 매출관리 시스템(어드민 툴).

- 현재
프로젝트 설명.

클루커스 사내 매출관리 시스템(어드민 툴)을 개발하고 유지보수하고 있습니다.

주요 업무.
  • 프론트엔드 기술환경 세팅
  • 인프라 구축 (Azure, Docker, CI/CD)
  • 모노레포 환경 구축
  • Next.js 앱 번들 사이즈 최적화로 First JS Load 사이즈 페이지별 약 70% 감소하였습니다.
  • Next-Auth + Azure Entra ID(구 Azure AD) 인증 구현하였습니다.
  • Monorepo 환경에서 프로젝트/배포환경별 CI/CD 구축하였습니다.
  • getServerSideProps로 사용자 인증 및 fetch 데이터를 server side에서 로드하여 사용자 경험을 개선하였습니다.
  • 고급 타입 유틸리티 구현하여 타입 안전성을 높였습니다.
  • vitest기반 유닛테스트 코드를 작성하며 개발하고 있습니다.
기술 스택.

TypeScript Next.js Pages Router SWR Zustand Vitest Vanilla Extract Turborepo Azure App Service Azure Pipeline(CI/CD)

동원그룹, 자체 AI 플랫폼 동원GPT.

- 현재
프로젝트 설명.

외주 프로젝트로 동원그룹내의 문서, 데이터 분석, 인사, 총무 등 사내 정보 검색을 할 수 있는 OpenAI기반의 ChatGPT 프로젝트 입니다.

주요 업무.
  • 답변 타이핑 효과를 직접 구현하였습니다.
  • Web Worker를 활용하여 탭 비활성시 타이핑 효과를 지속하는 기능을 구현하였습니다.
  • FSD 아키텍처 기반으로 리팩토링을 진행 하고 있습니다.
기술 스택.

Typescript React React Query Zustand

클라우드 관리 플랫폼(CMP) ClooOps.

- 현재
Link.

https://www.cloocus.com/clooops

프로젝트 설명.

클라우드 비용 관리, 클라우드 모니터링 및 서비스 요청등의 기능을 제공하는 Microsoft Azure 관리 툴인 ClooOps 프로젝트 입니다.

주요 업무.
  • 일부 Express + EJS 페이지들을 React로 전환하였습니다.
  • d.ts와 jsdoc의 @type 주석을 활용하여 개발환경을 개선하였습니다.
  • CRA 프로젝트를 Vite으로 전환하여 빌드 속도를 약 26.36% 향상시켰습니다.
기술 스택.

Javascript React SWR Zustand

Fixelsoft.

백엔드 개발자 - 2022. 04

보이스 캐디앱.

-
프로젝트 설명.

골프 GPS 시계와 연동되어 코스 정보 제공, 스코어 기록, 거리 측정, 실시간 핀 위치 등을 지원하는 보이스 캐디앱의 서버를 개발 및 유지보수하였습니다.

주요 업무.
  • 스마트 워치로부터 전송된 바이너리 파일을 파싱하여 DB에 적재하는 작업을 하였습니다.
  • 트랜젝션 처리가 되어있지 않은 쿼리들에 트랜젝션 처리를 하였습니다.
  • AWS DMS로 Mysql에서 DynamoDB로 약 8000만건 데이터를 마이그레이션하였습니다.
기술 스택.

PHP MySQL EC2

보이스캐디 오토핀 서비스.

-
프로젝트 설명.

사내용 모니터링 서비스와 실 서비스에서 사용하는 실시간 핀 위치를 관리하는 보이스캐디 오토핀 서비스를 관리하는 서버를 개발 및 유지보수하였습니다.

주요 업무.
  • 결합 인덱스 추가하여 조회쿼리 속도를 4922ms → 151ms로 약 97% 향상시켰습니다.
  • 신규 배치 코드를 개발 및 유지보수하였습니다.
기술 스택.

NestJS TypeORM MariaDB Docker Elastic Beanstalk

마이스윙캐디 앱.

-
프로젝트 설명.

골프 론치 모니터와 연동되어 실시간으로 골프 샷 데이터를 분석하고 기록하는 마이스윙캐디앱의 서버를 개발 및 유지보수하였습니다.

주요 업무.
  • 배포 환경 구축에 대한 온보딩용 문서를 작성하였습니다.
기술 스택.

NestJS TypeORM MariaDB Docker Elastic Beanstalk

Open Source.

Quark .

Maintainer - 현재
Link.

https://github.com/pasteltones/quark

프로젝트 설명.

React 상태관리 라이브러리

Relife Hooks .

Maintainer - 현재
Link.

https://github.com/DoK6n/relife-hooks

프로젝트 설명.

리액트의 useEffect, useLayoutEffect를 래핑하여 보다 명시적인 라이프 사이클 훅을 제공하는 라이브러리

Education.

원광대학교.

컴퓨터공학과 -

Skills.

TavaScript.

  • JavaScript와 TypeScript에 능숙합니다.
  • Javascript만 사용할때에도 항상 JSDoc + d.ts를 사용하여 Type Hinting과 문서화를 합니다.
  • 가능한 한 타입을 좁혀 코드의 안정성을 높이는 것을 선호합니다.
  • Production 환경에서는 pnpm을 주로 사용하고, Bun을 선호합니다.

React.

  • React hooks를 능숙하게 사용하고, hook을 이용해 공통 비즈니스 로직을 적절히 모듈화해 사용할 수 있습니다.
  • 다양한 요구사항에 대응할 수 있는 유연한 UI 컴포넌트를 설계할 수 있습니다.
  • React.memo, useMemo, useCallback에 대해서 이해하고 적절한 상황에서만 사용합니다.
  • useSyncExternalStore의 내부 동작원리를 이해하고 이를 활용해 외부 상태를 동기화할 수 있습니다.
  • Vitest를 사용하여 유닛테스트를 작성할 수 있습니다.

DevOps.

  • AWS S3, AWS CloudFront, AWS EC2, AWS Elastic Beanstalk, Azure App Service등을 이용하여 배포환경을 구축해 본 경험이 있습니다.
  • GitHub Actions, Azure Pipelines로 CI를 구성해 본 경험이 있습니다.
  • Docker, Docker Compose를 사용하여 개발환경 및 배포환경을 구성할 수 있습니다.

Backend.

  • 트랜잭션의 개념을 이해하고 있으며, 격리 수준에 따른 데이터 일관성과 동시성 문제에 대한 기본적인 지식을 갖추고 있습니다.
  • NestJS와 Elysia를 사용해 웹 서버를 구축할 수 있습니다.
  • API 문서에 대해 중요하게 생각하며 Nestia, Elysia, FastAPI와 같이 자동화 하는 것을 선호합니다.

Contact.