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

이다용: 저는 많은 사람들에게 도움이 되는 것을 만들고자 개발을 시작했으며, 사용자 중심의 개발을 추구합니다. 여기서 사용자에는 동료와 개발자도 포함되며, 중복과 불필요한 작업을 최소화한 단순함이 사용자 경험에 중요하다고 생각합니다. 또한, 서로 신뢰하며 자기 주도적으로 일할 수 있는 환경을 선호합니다. 최근에는 ECMAScript를 이해하고, 자동화로 개발 생산성을 높이는 것에 관심이 있습니다.

프로젝트

패키지 사용 정보 사이트 (Dependents Tracker)

2024.08 ~ 현재 / 깃허브 리포지토리

Dependents Tracker는 특정 패키지가 어떻게 사용되고 있는지에 대한 사용 정보를 수집하고 시각화하는 웹 서비스입니다. 오픈 소스 기여 과정에서 사용자가 패키지를 어떻게 활용하는지 궁금했고, 이를 통해 개발 우선순위를 정하는 데 도움이 될 것으로 생각해 개발하게 되었습니다.

주요 활동

  • 독립적인 이벤트 루프를 가진 Worker Threads를 사용해 데이터 수집 과정을 병렬로 처리하도록 개선하여, 데이터 수집 시간을 약 5분에서 3분으로 단축했습니다.
  • 처음에는 최근 커밋만 클론한 후, 이전에 수집한 커밋 해시와 최신 커밋 해시를 비교해 동일할 경우 이후 과정을 건너뛰도록 캐싱 기능을 구현하여 데이터 수집 시간을 약 1분으로 단축했습니다.
  • 깃허브 Dependents 페이지에서 사용자 정보를 스크래핑하고, 리포지토리의 파일을 분석할 때도 정규 표현식만을 사용해 필요한 정보를 외부 의존성 없이 효율적으로 추출하는 CLI 패키지를 개발 및 배포했습니다. 해당 패키지
  • 해당 프로젝트를 포크한 후 설정 파일만 수정하면 원하는 패키지의 사용 정보를 수집할 수 있도록, 데이터 수집 자동화를 깃허브 액션으로 구현하고 데이터를 파일 시스템으로 관리하는 방식으로 구현했습니다. 해당 워크플로우

얻은 것

개념으로만 알고 있던 Worker Threads와 비동기 제너레이터를 실제로 활용해 볼 수 있었습니다. 또한, 패키지 번들링, 트랜스파일링, 배포를 직접 경험하며 자바스크립트 생태계에 대한 이해를 높일 수 있었습니다.

사용한 기술

  • 코어: Next.js, Node.js, TypeScript
  • 스타일링: TailwindCSS, Shadcn/ui
  • 번들링/트랜스파일링: Rollup, Terser
  • CI/CD: Github Actions
  • 테스트: Vitest
  • 패키지 매니저: PNPM
사이트 화면
사이트 화면

오픈 소스 기여 (es-toolkit)

2024.07 ~ 현재 / 기여 이력

es-toolkit은 Lodash의 느린 성능과 무거운 번들 크기를 개선한 자바스크립트 유틸리티 라이브러리입니다. 저는 많은 사용자에게 도움을 줄 수 있는 프로젝트에 참여하고 싶었고, 기술적으로 타입스크립트를 더욱 활용할 기회라고 생각해 기여를 시작했습니다. 꾸준히 다양한 부분에 기여했으며, 특히 생산성을 위한 자동화와 유틸리티 함수 구현에 집중했습니다.

주요 활동

  • for…of 반복문을 배열 대상으로 사용하는 것을 금지하는 ESLint 플러그인 패키지를 개발 및 적용하여 함수의 성능과 코드 일관성을 높였습니다. 해당 PR
  • Lodash의 테스트 코드를 프로젝트 환경에 맞게 변환하는 스크립트를 작성하는 등 반복적인 작업을 자동화하여 개발 생산성을 높였습니다. 해당 PRs
  • CI 과정에서 변경된 파일만 린트 작업을 수행하도록 설정하여, CI 실행 시간 및 비용을 절감했습니다. 해당 PRs
  • 최신 문법과 빌트인 함수를 활용해 성능을 개선하면서도 Lodash와 호환되는 함수를 구현했습니다. 해당 PRs
  • 한 번 배포하면 함수 인터페이스를 변경하기 어려운 상황에서, 새로운 함수의 인터페이스를 설계하는 경험을 했습니다. 해당 PRs

얻은 것

Lodash 코드를 분석하며 자주 사용되지 않는 케이스까지 지원하는 것이 성능 저하와 코드 복잡성 증가로 이어질 수 있음을 배웠습니다. 이를 통해 오버 엔지니어링을 피하고, 사용자 중심의 기능을 제공하는 것이 중요하다는 것을 깨달았습니다. 또한, 명세서를 통해 빌트인 함수의 동작을 파악하고, 타입스크립트와 코드 커버리지를 활용해 안정성을 높이는 경험을 얻었습니다.

사용한 기술

  • 코어: TypeScript
  • 코드 변환: Jscodeshift
  • CI/CD: Github Actions, CircleCI
  • 테스트: Vitest
  • 패키지 매니저: Yarn Berry

성균관대학교 코딩플랫폼 (코드당)

2023.03 ~ 2024.08 / 깃허브 리포지토리

코드당은 별도의 개발 환경 설치 없이 수업 시간에 프로그래밍 문제를 풀고, 알고리즘 경진 대회를 개최할 수 있도록 지원하는 교내 코딩 플랫폼 서비스입니다. 이 서비스는 학부생들로 구성된 프론트엔드, 백엔드, 인프라, 기획 및 디자인 팀이 함께 개발 및 운영하고 있습니다.

주요 활동

  • 백엔드 서버에서 발급한 JWT를 SSR 서버와 사용자가 공유할 수 있도록 사용자 인증 부분을 구현했으며, 테스트 코드를 작성하여 안정성을 높였습니다. 해당 PRs
  • 사용자 세션을 클라이언트와 서버 구분 없이 가져올 수 있도록 함수를 추상화하여 개발자 경험을 향상하고, 클라이언트 측에서는 클로저를 활용해 캐싱을 구현하여 서버 부하를 줄였습니다. 해당 PR
  • 이미지 사용을 최소화한 캐러셀 컴포넌트를 개발하고, Next.js의 이미지 최적화 관련 소스 코드를 분석하여 그 내용을 공유하는 등 로딩 속도 개선에 기여했습니다. 정리한 글
  • 특정 페이지의 First Load JS 용량이 유난히 큰 것을 파악하고, Webpack Analyzer로 분석한 후 트리 쉐이킹이 되지 않는 부분을 수정하여 용량을 1.1MB에서 0.67MB로 줄였습니다. 해당 PR
  • 통일성이 떨어진 프로젝트 구조를 개선하기 위해 토론을 주도하여, 동아리 상황에 맞는 프로젝트 구조에 대한 의견을 수렴하였습니다. 개선안 문서

얻은 것

28명의 동아리 부원과 함께 사용자가 있는 하나의 프로젝트를 1년 반 동안 개발하면서, 배경지식이 다른 팀들과 소통하는 역량을 키울 수 있었습니다. 다만, 마감 일정에 쫓겨 코드 리뷰를 제대로 하지 않은 점이 아쉬웠으며, 코드 리뷰를 통해 팀원 간 의견을 공유하는 것이 중요하다는 것을 몸소 깨달았습니다.

사용한 기술

  • 코어: Next.js, TypeScript
  • 상태 관리: Zustand
  • 스타일링: TailwindCSS, Shadcn/ui
  • CI/CD: Github Actions
  • 테스트: Vitest, MSW
  • 패키지 매니저: PNPM
코드당 메인 화면
코드당 메인 화면
코드당 문제 풀이 화면
코드당 문제 풀이 화면
코드당 어드민 화면
코드당 어드민 화면

역량

프론트엔드

  • 주로 React 기반의 프레임워크인 Next.js를 사용하며, 필요에 따라 Next.js의 소스 코드를 분석하여 내부 동작을 이해합니다.
  • React Server Component, Suspense, Error Boundary 등을 활용하여 읽기 좋은 코드를 작성하고자 노력합니다.
  • 전역 상태 관리 라이브러리에 종속되지 않고, 상황에 따라 URL 파라미터와 클로저를 활용합니다.
  • 페이지 로딩 속도와 리소스 사용량을 최적화하기 위해 이미지, 폰트, 번들링 등을 최적화한 경험이 있습니다.
  • 불필요한 요소를 제거하여 DOM 트리를 간소화하고, 의미에 맞는 시맨틱 요소를 사용하여 웹 표준을 준수합니다.

자바스크립트

  • ECMAScript 명세서를 통해 내부 동작을 이해하고, 제안서를 통해 최신 기능을 파악합니다.
  • 레거시 코드를 최신 문법으로 리팩토링하고 성능을 개선한 경험이 있습니다.
  • Vitest와 MSW를 사용하여 테스트 코드를 작성하고, 목적에 맞게 타입을 정의할 수 있습니다.
  • Node.js의 모듈 시스템인 CJS와 ESM, 그리고 의존성에 대해 기본적인 이해가 있습니다.
  • Rollup을 사용하여 패키지를 번들링하고, 배포해 본 경험이 있습니다.
  • Lookahead, Capture Group, Unicode Property Escape 등을 활용하여 정규 표현식을 작성할 수 있습니다.

자동화

  • AST에 대한 이해를 바탕으로 jscodeshift를 사용하여 코드 변환 스크립트를 작성하고, ESLint 플러그인을 개발한 경험이 있습니다.
  • git diff와 xargs와 같은 명령어를 사용하여 변경된 파일만 작업하도록 최적화한 경험이 있습니다.
  • GitHub Actions와 CircleCI를 사용하여 CI/CD를 구축하고 개선한 경험이 있습니다.
  • Node.js의 fs 모듈 등을 활용해 스크래핑을 자동화하고 데이터를 가공한 경험이 있습니다.

교육

성균관대학교 소프트웨어학과 (4.09 / 4.5)

2023.03 ~ 2025.02

  • CS 지식에 대한 열망과 대학 진학을 제대로 준비해 보지 못한 아쉬움으로, 전역 후 약 6개월간 독학하여 편입하였습니다.
  • 첫 학기에 개발 동아리 활동 그리고 성적 우수상을 받는 등 새로운 환경에 빠르게 적응했습니다.
  • xv6 운영체제와 리눅스 네트워크 모듈 개선 등 다양한 과제를 수행하고, 기계 학습과 HCI 등의 수업을 들으며 컴퓨터 공학 전반에 대한 기본 지식을 쌓았습니다.

경민대학교 융합소프트웨어과 (4.5 / 4.5)

2020.03 ~ 2021.02

  • 고등학생 때 해외 구매 대행 사업을 하면서 기술적인 한계를 느껴 대학에 진학하였습니다.
  • 구름 사의 데벨업 클럽에 신청하여, 동기들이 유료 강의를 무료로 들을 수 있도록 지원했습니다.

활동

기술 글 작성

2024.07 ~ 현재

  • ECMAScript 7 이후의 제안서와 명세서를 읽고, 이를 한국인 개발자에게 쉽게 전달하기 위해 깃허브 리포지토리에 정리 및 요약한 글을 작성하고 있습니다. 해당 리포지토리
  • 성능 분석 또는 최적화에 대한 경험을 바탕으로 글을 작성하고 있습니다. 블로그

삼성전자 DX 대학생 알고리즘 역량 강화 특강 수료

2024.01 ~ 2024.02

  • 트라이, 세그먼트 트리, 라빈 카프 등의 알고리즘 이론을 학습하고, 문제를 분석하여 상황에 맞게 적용하는 방법을 배웠습니다.
  • 특강 중간에 진행된 SW 역량 테스트 B형에 C++ 언어로 응시하여 합격하였습니다.

교내 개발 동아리 (스꾸딩)

2023.03 ~ 현재

  • 교내 개발 동아리 중 기술적으로 가장 활발한 스꾸딩에서 프론트엔드 팀장과 멘토로 활동했습니다.
  • 배포 지연으로 기존 부원들이 이탈하는 상황에서도 열심히 활동하여, 현재는 베타 테스트를 성공적으로 마쳤으며, 활동 인원도 약 10명에서 28명으로 성장하는 과정을 함께 했습니다.
  • 멘토로서 신입 부원 스터디를 운영하면서, 기술적 배경지식이 다른 팀원들과의 소통 능력을 향상했습니다.
  • 팀장 주도의 태스크 할당 방식을 자기 주도 방식으로 전환하여, 팀원들이 신뢰를 받으며 자율적으로 일할 수 있는 환경을 조성하여 팀 생산성을 높였습니다.

수상

Elice AI Edu 해커톤 (우수상)

2023.08

  • 2,000명 이상이 참여한 코딩 테스트를 통과하여 본선에 진출하였고, 완성도 면에서 좋은 평가를 받아 우수상을 받았습니다.
  • 하루 만에 혼자서 프론트엔드 개발을 해야 했지만, 프로젝트 매니저와 협력하여 주요 기능을 우선으로 개발해 완성도를 높였습니다.
  • GPT 3.5 API를 활용해 개인 브랜딩에 대한 조언을 제공하는 서비스를 개발했습니다.

SW 중심대학 공동 해커톤 (우수상)

2023.06

  • 약 50개의 대학에서 학교별로 개발자 4명과 디자이너 1명씩 참여한 해커톤에서 우수상을 받았습니다.
  • 전국에서 모인 사람들과 소통하여 팀을 구성하고, 아이디어를 구체화하는 경험을 했습니다.
  • 취업을 포기한 청년과 구인에 어려움을 겪는 기업을 연결하는 과정을 간소화하는 서비스를 개발했습니다.

자격증

  • 오픽 IH (영어) - 2024.03
  • 삼성전자 SW 역량테스트 B형 (C++) - 2024.02
  • 정보처리산업기사 - 2022.09
  • 네트워크관리사 2급 - 2022.07

연락처