미리보기

GitHub

(진행 중)

• 팀 구성: 5명 (프론트엔드 5명)

• 목적: KTWiz 야구단의 웹페이지 개선

• 기술 스택: React, Next.js, TypeScript, Supabase, Tailwind CSS, Figma, Husky, Three.js, Jest

• 활동

  • KT의 멘토님과 함께하는 KTWiz 웹페이지의 개선

  • Tailwind CSS 기반의 공통 컴포넌트 구현

  • Three.js를 사용하여 야구장을 인터렉티브한 3D 요소로 구현

  • 챗봇 기능 구현(예정)

  • Git 레포지토리와 Workflow 관리

• 개선된 점

  • 이전 프로젝트에서 커밋을 생성하는 과정에서 약간의 실수들이 생기는 경우가 있었음

    • comitizen과 commitlint를 사용하여 pnpm commit 명령어로 미리 설정해둔 커밋 메시지로 쉽게 커밋이 가능하도록 설정

  • 이전 프로젝트의 개발 단계에서 팀원들이 대부분 dev 모드에서만 개발을 진행하다 보니 프로덕션 환경에서 발생되는 오류들이 감지되지 않고 있다가 배포 단계에서야 들어나는 문제를 경험

    • Husky를 사용해 pre-commit 단계에서 아래의 항목을 전부 통과해야 커밋이 생성되도록 설정

      • Prettier를 사용한 코드 포맷팅

      • ESLint를 사용한 코드 규칙 확인

      • Jest를 사용한 테스트 코드 실행

      • commitlint를 사용한 커밋 메시지 검사

  • 이전 프로젝트에서 팀원들이 함께 공통 컴포넌트를 개발하였지만 개발한 팀원 외에는 공통 컴포넌트의 사용법에 대해 미숙했던 경험

    • 공통 컴포넌트를 개발에 JSDoc을 도입하고 모든 공통 컴포넌트는 전부 코드 리뷰를 진행하는 문화를 정착

  • 위와 같이 원활한 팀 프로젝트를 진행할 수 있는 환경을 조성하고 이를 GihHub 템플릿 레포지토리로 제작하여 팀 프로젝트에 사용중이며 다른 팀원들에게 긍정적인 평가를 받음 (링크)

  • Three.js로 야구장의 3D 모델을 인터렉티브한 요소로 구현하는 중에 야구장 3D 모델링의 용량 때문에 발생한 문제

    • 문제 1 : 100MB를 초과하는 야구장 모델링을 GitHub에 업로드 하려면 Git LFS를 사용해야 하고 Vercel에서 배포시에 여러번의 빌드가 실행되면 Git LFS의 트래픽 사용량이 초과되어 더이상 빌드를 할 수 없는 문제 발생

    • 해결 방안 : 배포 환경을 AWS로 변경하고 CI/CD 툴인 TeamCity에서 배포 과정 중에 모델링만 S3에서 다운로드 받아 배포를 진행

    • 문제 2 : 배포는 성공적으로 진행되었지만 100MB가 넘는 3D 모델링의 용량 때문에 LCP가 14.91초가 소요되는 현상이 발생

    • 해결 방안 : 모델링을 5.91MB 용량의 모델링으로 교체하고 상호작용이 필요한 부분에는 Three.js로 코드 내부에서 메쉬를 추가하여 개발

    • 성과 : 21.30초의 LCP를 2초 이내로 개선

GitHub | Figma

• 팀 구성: 3명 (프론트엔드 3명)

• 목적: '똑똑한개발자'에서 개발했고 현재 서비스 중인 ‘ArtMap’ 프로젝트를 개선

• 기술 스택: React, Next.js, TypeScript, Supabase, Prisma, Tailwind CSS, Vercel, Figma, Husky, Zod

• 활동

  • ‘똑똑한개발자’의 온보딩 프로젝트 참여를 통한 현업 업무 프로세스 학습

  • 제공된 Figma를 기반으로 Tailwind CSS를 사용하여 UI를 구현

  • Tailwind CSS 기반의 반응형 UI 구현

  • Auth.js와 middleware를 사용해 OAuth 소셜 로그인 기능 구현, MSW를 사용한 Mocking으로 이메일 로그인 구현, 이메일 로그인과 소셜 로그인을 쿠키에서 관리하도록 통합

  • Zod를 사용한 유효성 검증 구현

  • Next.js를 사용한 SSR과 SEO 최적화를 구현

  • MSW를 사용한 개발 환경에서의 Mocking 구현

  • Git 레포지토리와 Workflow 관리

  • Vercel을 통한 배포

• 개선된 점

  • Figma 에셋에 있는 아이콘들을 전부 Next.js 디렉토리 내부에 옮겨두었지만 각각의 아이콘에 대한 경로를 모르기 때문에 작업에 어려움이 있었음

    • public 디렉토리에 있는 아이콘들을 fs와 path 모듈을 통해 컴포넌트로 생성하는 스크립트를 제작.

      이렇게 생성된 컴포넌트를 통해 피그마에 있는 아이콘의 경로를 바로 알 수 있었고 팀원분들과 멘토 분들에게 좋은 평가를 받음

  • 팀의 Git Commit Convention을 정하고 프로젝트를 시작했으나 오타 등의 이유로 매번 완벽한 커밋 컨벤션이 지켜지지 않음

    • Husky를 사용해 pre-commit 단계에서 커밋 컨벤션을 검증하고 이를 통해 완벽하게 지켜지는 컨벤션을 바탕으로 Rust 기반의 CLI tool인 git-cliff를 통해 버전별로 CHANGELOG.md를 자동 생성

• 성과

  • 프로젝트의 성과로 웅진싱크빅 대표이사님이 수여해 주시는 우수상 수상

• 팀 구성: 4명 (프론트엔드 2명, 백엔드 2명)

• 목적: 여행 계획을 동시 편집하고 경로를 최적화 할 수 있는 웹 사이트 개발

• 기술 스택: React, Next.js, TypeScript Spring Boot, MongoDB, Tailwind CSS, Git, Docker, Jenkins, TeamCity, NCP, WebSocket

• 활동

  • Java Spring Boot 기반의 백엔드와 협업하여 프론트엔드에서 JWT 기반 로그인 로직을 구현

  • Tailwind css를 사용하여 전체 웹사이트의 UI 개발

  • Next.js 기반의 프로젝트에서 모든 세팅을 담당

  • 팀의 Git 레포지토리를 담당하였으며 애자일 소프트웨어 개발 방법론과 Git-flow, 커밋 컨벤션 등을 도입

  • TeamCity, Docker를 사용하여 프론트엔드를 NCP에 배포하는 CI 파이프라인을 구성

• 개선된 점

  • 이전 프로젝트에서는 명확한 소프트웨어 개발 방법론 없이 개발을 했기 때문에 일정이 계속 늘어지는 현상이 발생했던 경험

    • 애자일 소프트웨어 개발 방법론을 도입하고 데일리 스크럼과 1주 단위의 스프린트를 바탕으로 일정 관리가 수월해짐

    • Jira, Confluence와 같은 생산성 툴들을 도입해 개발자 경험 향상

  • 이전 프로젝트에서 명확한 Git Commit Convention이 없는 무분별한 커밋으로 커밋 로그가 난잡해진 경험

    • Angular JS Commit Convention을 기반으로 한 팀의 커밋 규칙을 정하고 Git-flow를 도입하여 GitHub에서 좀 더 원활한 협업을 진행함

  • 백엔드의 데이터에 변화가 생겨서 프론트엔드에서 fetch 요청을 다시 보낼 때 같은 결과가 나오는 현상이 생김

    • Next.js의 캐싱 시스템에 대해 공부하고 Request Memoization 때문이었다는 것을 알게됨. 이후 기능에 맞는 적절한 캐싱 기법 사용으로 문제를 해결

• 팀 구성: 4명 (프론트엔드 2명, 백엔드 2명) / 팀 리더로 참여

• 목적: 대학생 프로젝트 진행 사업에 참가하여 Unity 기반의 2D 횡스크롤 디펜스 게임을 개발

• 기술 스택: C#, Unity, Spine 2D

• 활동

  • 다른 게임들의 UI와 UX를 벤치마크 해 사용자들이 더 쉽게 사용할 수 있도록 직관적으로 설계

  • Spine 2D 기반의 애니메이션을 제작해 Spine-Unity 런타임을 통해 게임에 구현

  • 인게임 캐릭터의 중력 반응 개발

• 성과: 대학생 프로젝트 지원 사업에 합격

• 데이터 이동 관련 업무를 위한 3개월 계약직으로 입사

• 데이터 이동 프로그램의 원리를 파악하여 3개월이 예상된 작업을 1개월 만에 완료

• 빠른 업무 처리 능력으로 계약이 연장되어 다른 부서의 업무까지 마무리한 후 복학 준비를 위해 퇴사