안녕하세요,
프론트엔드 개발자 이두형입니다

6년차 웹 프론트엔드 엔지니어로서 사용자 경험과 성능 최적화에 대한 깊은 관심을 가지고 있습니다. 새로운 기술을 학습하고 팀과 함께 성장하는 것을 즐깁니다.

경력.

엔씨아이디에스.

엔씨소프트 분할(2024. 10)

Frontend Developer - 현재

Nano Portal.

- 현재
프로젝트 설명.

사내의 모든 Public/Private API와 플랫폼을 한 곳에서 관리하고 공유할 수 있는 통합 허브를 개발합니다. API 및 플랫폼 관리, 계정 관리, 권한 제어 등 포괄적인 관리 기능을 제공하며, 팀 간 협업을 촉진하고 개발 생산성을 높이는 것이 목표입니다.

주요 업무.
  • 프론트엔드 리딩
    • 일정 세부사항 구성
    • 백엔드 팀과 API 소통 및 환경 구축
    • 설계와 기술적인 방향 결정
    • CI 구성
    • GraphQL(RSC, SSR) 가이드 제공 문서화
    • 주기적인 리팩토링
사용 기술.

Next.js 13 (App Router), TailwindCSS, TurboRepo, Apollo Client, Hasura, Zustand, TypeScript, PNPM, Docker, Hashicorp Vault, JWT, MSW, GraphQL-codegen, Zod

프로젝트 중간회고.
링크

SSO 계정 전환 웹 컴포넌트.

-
프로젝트 설명.

다수의 서비스에서 사용할 수 있는 Keycloak 기반 다중 계정 전환 웹 컴포넌트를 개발했습니다. 서비스 개발자가 SSO나 인증 관련 지식 없이도 쉽게 사용할 수 있도록 설계했으며, 10일이라는 짧은 기간 내에 완성도 높은 결과물을 제공했습니다.

주요 업무.
  • 웹 컴포넌트 설계 및 개발
  • Keycloak 인증 로직 구현 및 커스텀 어댑터 개발
  • 서비스간 독립성 보장을 위한 Shadow DOM 활용
  • 다중 창 계정 전환/로그아웃 동기화
  • 빌드 시스템 구성 (Rollup, UMD/ESM)
사용 기술.

Lit Element, TypeScript, Keycloak, Floating UI, Rollup, Shadow DOM, Custom Elements, Web Components

프로젝트 상세.
링크

&디자인 시스템(Beta).

-
프로젝트 설명.

웹 컴포넌트로 개발하여 모든 환경에서 일관된 디자인을 제공하였습니다. 피그마에서의 기획과 디자인 작업을 해당 컴포넌트로 추출해줬습니다.

주요 업무.
  • 웹 컴포넌트 개발
  • 사용자 사이트 내 데모 패키지 구현
    (Live Code, 제공 Property 자동화)
  • 사용자 설명(README) 자동화 구현
  • CI 배포 기여
  • OpenAPI Hub에 웹 컴포넌트 적용 및 개선점과 버그 공유
  • 반복되는 특정 이슈(custom element registry 오류 등) 해결을 위해 노력하여 팀의 문제 해결
사용 기술.

Lit(Web Components), Open WC Testing, TypeScript, Next.js, SASS, CSS Part, Lerna, Nexus, Yarn, Yarn workspace, Yarn Patch, Yarn Link

Codebrick.

Series B.
Sea Limited (Shopee/Garena) M&A

Fullstack Developer -

Digital Marketing.

-
프로젝트 설명.

기존 플랫폼의 마케팅 서비스를 통해 기존 광고 효과를 높이지 못한 사용자를 위해 Traffic 광고를 활용하고, 다양한 플랫폼을 데이터 기반으로 추천 및 간편하게 연결하는 서비스를 제공하고자 서비스를 분리하여 확장성을 강화했습니다.

주요 업무.
  • 프론트엔드 개발 환경 조사 및 구성
  • Single SPA와 Webpack Federation Beta 적용
  • brainstorming, MVP 개발 및 A/B testing
  • i18n 자동화 google sheet 도입
사용 기술.

TypeScript, React, Next.js, Vite, Vitest, Storybook, React Query, MSW, Recoil, GRPC connect web, Golang(Gin, Gorm), MySQL, Protobuf

Meta Ads.

-
프로젝트 설명.

플랫폼 개발 내 마케팅(Meta Ads) Storefront/Backoffice 개발하여 마케팅 요구를 확인했습니다.

주요 업무.
  • 각종 A/B 테스트 구현을 통한 전환률 향상에 기여
    (Roas Goal 3.0, Reached 8.0)
  • 타팀과 별도의 스프린트를 위해 A/B Testing 이용
  • Storybook + Chromatic을 활용한 UI 리뷰
    (PO<->UI<->Dev)
사용 기술.

Vue2, Jest, Golang(Gin, Gorm), GRPC, Kafka, Protobuf, MySQL, Redis, K6S, Event Driven Architecture, Doppler, Amplitude, Miro, GTM

Platform Silo.

-
프로젝트 설명.

Analytics, Kalender, Escrow 마이크로 서비스 개발

주요 업무.
  • Analytics 서비스 개편
  • Cron 서비스 UI 제공
  • Escrow 서비스 개발
  • GTM, Pixel 태그 모듈화
  • Kafka Management Tool Workflow 적용
사용 기술.

AWS Amplify, Nuxt.js, Vue3, Actions, AWS SAM, AWS DocumentDB, mongoose, MSK, protobuf, Golang, GRPC, CQRS, S3, Redshift, GTM, Topicctl, Github Actions

PMx.

Series A. Software Engineer -

의료 서비스 개발.

-
프로젝트 설명.

인공지능 기반 의료 서비스 개발

주요 업무.
  • 웹 서비스 기술환경 구성 및 기능 개발
  • 데이터 레이블링 툴 개발
  • D3 활용한 인터랙션 기능 개발
사용 기술.

Vue2, Nuxt.js, D3.js, VTK.js, ITK.js, Github Workflow, Shell, Nginx, AWS, Flask, Numpy, Pandas

Insand.

Fullstack Developer -

웹/하이브리드 웹 개발.

What did I Do.
  • React, Ionic, Angular, Node, Apollo GraphQL, Serverless.js, Firebase 점진적 도입 (기존 PHP + JQuery)
  • 고양시 청소년 재단 앱/백오피스 개발
  • 제약회사 교육 시스템 개발
  • Lambda Edge를 통한 실시간 이미지 리사이징 도입
  • Firebase, Gatsby.js로 스태틱 사이트 호스팅 비용 없이 개발
사용 기술.

AWS RDS, API Gateway, AWS CloudFront, Lambda, Lambda Edge, AWS Media Converter, React, Express.js, Sequelize.js, Angular2, Ionic, JWT, SQLlite

교육 및 기타 경험.

Blog.

- 현재

프론트엔드 개발에 대한 인사이트와 경험을 공유하는 기술 블로그 를 운영하고 있습니다. 주기적으로 방문하시면 새로운 기술 동향과 개발 경험을 확인하실 수 있습니다.

Oxford Brookes University.

Computer Science & Software Engineering -

정보처리기사.

한국산업인력공단

EN62304에 따른 소프트웨어 유효성 확인과정.

NCS: 의료기기 품질관리

Python과 텐서플로우를 활용한 딥러닝 과정.

NCS: 인공지능플랫폼구축

보유 기술.

Overall.

  • 항상 최신의 기술이 옳다고 여기지 않습니다. 상황에 따라 적절한 선택이 있다고 믿습니다.
  • 업무에 필요하다면 능숙한 분야가 아니더라도 적극적으로 탐색하여 최적의 결과를 낼 수 있도록 노력합니다.
  • 회사 혹은 팀의 프로세스 및 문화를 개선하거나 바꾸려는 시도를 적극적으로 합니다.

2023 Feedback.

  • 서비스 오너십 👍
  • 능동적인(평균 2개, 본인 10개) 기술 공유를 했습니다.
  • 동료들과의 관계가 좋습니다. (외로운 사람들도 잘 챙겨줌)
  • 리딩 과정에서도 일정, 일감, 구조, 성장, 개발에 관한 역할 잘 수행했습니다.
  • 업무시간 효율성이 좋았습니다.
  • 중간에 정리하는 시간을 항상 갖도록 노력해야합니다.
  • 업무는 엄청 빠른데 놓치는 부분이 있었습니다.

Communication.

  • 직위 및 포지션에 관계없이 적극적으로 생각을 표현합니다.
  • 배우고 발전하려고 노력합니다.

Web.

  • Search Engine Optimization 경험이 있습니다.
  • 하이브리드 앱 개발과 반응형 웹 개발 경험이 있습니다.
  • 브라우저 하위 호환에 대한 경험이 있습니다.
  • 웹 표준에 맞게 개발하려 노력하고 있습니다.

JavaScript.

  • JavaScript와 TypeScript에 능숙합니다.
  • CommonJS, ES Modules의 모듈 시스템에 대해서 이해하고 이에 따라 적절한 도구를 활용합니다.
  • Node.js 생태계의 툴링에 익숙합니다.
  • PNPM과 Yarn Berry 사용을 선호합니다.

React.

  • React hooks를 능숙하게 사용하고, 거의 모든 컴포넌트를 함수로 만듭니다. hook을 이용해 공통 비즈니스 로직을 적절히 모듈화해 사용할 수 있습니다.
  • 각종 컴포넌트 디자인 패턴에 능숙하며, 합리적인 방식으로 컴포넌트를 분리합니다.
  • React.memo, useMemo, useCallback에 대해서 이해하고 적절한 상황에서만 사용합니다.
  • Storybook을 사용한 컴포넌트 주도 개발을 할 수 있습니다.
  • Testing Library를 사용하여 테스트코드를 작성할 수 있습니다.
  • Next.js App Router, RSC, SSR을 적절히 사용할 수 있습니다.

DevOps.

  • Vercel, Firebase, AWS를 이용해 필요한 상황에 맞는 서비스를 선택 할 수 있습니다.
  • GitHub Actions, Jenkins, Travis, GitLab CI 등의 CI를 구성할 수 있습니다.
  • 반복적인 업무 해소를 위해 Node.js, Python, Bash로 CLI 도구를 만들 수 있습니다.