포도

(무제한 원어민 1:1 레슨 플랫폼)

TBD…

프론트엔드 파트

모노레포 도입 및 운영

• 배경
• 휴톰의 여러 프로젝트를 하나의 코드베이스로 통합 관리하기 위해 모노레포를 도입
• 패키지 매니저를 비교 분석하여 Turborepo를 도입하였고, 이를 통해 패키지 간의 의존성을 관리하고 빌드 시간을 단축

• Trunk Based Development + Feature Flag
• Feature Flag를 통해 각 환경(개발, 스테이징, 프로덕션)에서 기능의 제공 여부를 관리하여 Trunk 브랜치에서 항상 안정적인 배포가 가능하게 유지
• Next.js의 미들웨어를 사용해 현재 환경에 따라 동적으로 Feature Flag를 관리하였고, 이를 통해 다양한 환경에서 안정적인 기능 제공 가능한 상태 유지

지속적인 통합 및 배포(CI/CD) 시간 단축

• Cloud Remote Caching 도입
• 불필요한 빌드와 테스트에 대해 캐시를 사용하여 CI 시간을 평균 2분대로 단축하여 프론트엔드 개발자들의 작업 시간이 단축되었고, 개발 효율성을 크게 향상시키는데 기여

• E2E 테스트
• Feature Flag의 안정적인 동작(예상대로 작동하는지 검증하고, 안정적인 서비스 제공을 보장)을 확인하기 위해 Cypress를 사용하여 E2E 테스트 작성

hVAT

(협력 팀을 위한 내부 솔루션 개편)

2023.06 ~ 2024.04

프로젝트 리드 및 개발자

• 사내 어노테이터들이 영상을 통해 데이터 라벨링을 제공하는 프로젝트
• 비디오의 프레임과 화면의 좌표를 통해 라벨링을 가능하게 함
• 비디오 플레이어를 서드파티 라이브러리 없이 사내에서 자체 개발
• 사용자의 인터랙션을 강화하여 키보드 단축키를 통해 비디오 time seeker 기능 제공

• 프로젝트 초기 개발 및 설계 주도
• 기존 서비스 리뉴얼을 위해 초기 설계를 진행하고 개발을 주도
• 프로젝트를 담당하는 인원이 혼자에서 3명으로 증가하면서 협업과 리딩을 맡음

• 협업 조직 및 작업 분배
• 주기적인 회의를 통해 협업 방식을 논의하고, 팀원들의 역량을 파악하여 작업을 효율적으로 할당
• 문서화 작업을 통해 프로젝트의 이해도를 높이고, 향후 유지보수를 용이하게 함

• 칸반 보드 도입 및 운영 이슈 관리
• Data Management(DM) 팀의 운영 이슈를 효율적으로 관리하기 위해 칸반 보드 도입
• 실시간 작업 상태 파악과 우선순위 관리를 지원

프론트엔드 개발

• Zustand와 React-Query를 도입하여 애플리케이션의 전역 상태 관리를 최적화 함

• Zustand로 클라이언트 상태를 효과적으로 관리하고, React-Query의 Query Key 구조화를 통해 코드 가독성과 유지보수성을 크게 향상

• OpenAPI Specification (OAS) Generator를 활용하여 API 스펙을 자동 생성하여 개발 기간을 단축하고 개발 효율성을 향상

• GCP의 Cloud Load Balancer와 Cloud Storage를 이용한 정적 웹 호스팅 방식으로 프론트엔드 배포 전략을 개선

백엔드 개발

• 도메인 객체 생성 시 발생할 수 있는 사이드 이펙트를 분석하고, 유닛 테스트 케이스를 설계하여 사이드 이펙트를 최소화

• 비즈니스 로직을 리팩토링하여 코드의 가독성과 유지보수성을 향상시켰으며, 지속적으로 테스트 자동화 도구를 활용하여 유닛 테스트를 실행

• OpenAPI Specification (OAS)를 활용하여 프로젝트 초기부터 API 엔드포인트, 요청 및 응답 형식 등을 명확히 정의하고 관리

• GCP의 Compute Engine에서 웹 애플리케이션 서버 배포 방식을 GCP Cloud Run 및 Cloud Build를 이용한 서버리스 아키텍처로 전환

인프라 서비스 관리

• 개발, 스테이징, 프로덕션 환경으로 구분하여 프론트엔드와 백엔드를 서비스 구축.

• IAM을 활용하여 수술 영상 등의 프라이빗 자원 접근을 안전하게 관리.

• 콜드스타트 문제를 해결하기위해 Cloud Scheduler를 활용하여 특정 서비스의 인스턴스를 워킹 타임에 맞춰 가동.

개발 환경 개선

• OpenAPI Specification를 도입하여 API 스펙 명세화를 통해 협업을 원활하게 진행하고, 명확하고 일관된 API 인터페이스 제공.

SurgGram P.O.C

환자의 수술 예후 상황 플랫폼

2024.06 ~ 진행중

프로젝트 관리

• P.O.C(Proof of Concept)로 데이터를 활용해 수술 예후 상황을 예측할 수 있는 플랫폼을 개발하기 위해 다음 버전에서 개발 가능한 범위와 현재 개발해야 하는 범위를 플랫폼팀 주도로 진행하였으며, 많은 협업 팀과 논의

• 전달받은 키스크린을 기반으로 백로그를 작성하여 프로젝트 일정을 관리하는데 기여

인프라 서비스 관리

• 온프레미스로 제공되는 제품을 위해 런타임에 환경변수 주입받을수있도록 빌드프로세스 개선

프론트엔드 개발

• NextJS의 App Router를 사용하여 서버 컴포넌트와 클라이언트 컴포넌트를 적재적소에 배치하여 렌더링 최적화 진행중

• OpenAPI Specification을 백엔드 개발자들과 공유하여 Design First 전략을 사용하여 프론트엔드 개발 범위를 줄임

• 스펙의 디자인이 완료되면 BE개발자는 API 개발을 진행하게 했으며, FE는 msw-auto-mock으로 모킹된 핸들러를 통해 개발을 하였으며 테스트를 진행했으며 이를 통해 개발 병목을 줄임

• 코드 제너레이팅을 통해 FE 개발자가 작성해야 하는 코드의 수를 줄여 실제로 애플리케이션 개발을 할 수 있는 환경을 제공

• 개발, 스테이징, 프로덕션의 제공되는 기능을 피쳐 플래그를 통해 제공하며, 피쳐 플래그를 사용하여 불안정한 배포를 위해 기능 제공 범위를 테스트할 수 있도록 테스트 전용 워크스페이스를 구축

PIIP Intranet

(특허관리 백 오피스)

2022.03 ~ 2023.05

프론트엔드 개발

• Next.js를 활용하여 클라이언트 및 어드민 프로젝트에 참여하였고 사용자 경험 개선 및 렌더링 최적화에 기여

• Lerna를 사용한 Monorepo 환경에서의 프론트엔드 개발을 주도하여 코드 공유와 관리의 효율성을 높이고, 일관성을 유지하면서 다양한 프로젝트에 참여

• Apollo Client와 GraphQL을 통한 데이터 관리에 중점을 두었고 필요한 데이터만을 효율적으로 요청하여 오버페칭과 언더페칭을 방지

• Ant Design와 styled-components를 결합하여 일관된 UI를 제공

• 클래스컴포넌트를 함수 컴포넌트로 리팩토링 업무 수행

Markiny

(온라인 상표 컨설팅 및 출원 서비스)

2022.03 ~ 2022.06

프론트엔드 개발

• Next.js를 활용하여 클라이언트 및 어드민 프로젝트에 참여하였고 주로 사용자 경험을 개선하고 효율적인 렌더링을 위해 Next.js를 활용

• Lerna를 사용한 Monorepo 환경에서의 프론트엔드 개발을 주도하여 코드 공유와 관리의 효율성을 높이고, 일관성을 유지하면서 다양한 프로젝트에 참여

• Apollo Client와 GraphQL을 통한 데이터 관리에 중점을 두었고 필요한 데이터만을 효율적으로 요청하여 오버페칭과 언더페칭을 방지

• Ant Design와 styled-components를 결합하여 일관된 UI를 제공

LTS3

(사내 구성원 전용 백 오피스)

2021.08 ~ 2021.12

백오피스 개발

• Linux Crontab을 이용하여 연차(휴가) 관리 모듈의 일정 관리 및 자동화 알림 기능 개발

• Laravel 프레임워크와 MySQL 데이터베이스를 활용하여 안정적이고 확장 가능한 서버 개발

• 프로젝트를 MVC 패턴에 기반하여 설계 및 개발하였으며 이를 통해 코드의 모듈화와 유지보수성을 강화

• 사용자 경험을 고려하여 퍼블리싱 및 클라이언트 사이드 작업을 수행하였으며 jQuery를 활용하여 동적이고 직관적인 사용자 인터페이스를 제공

Frontend Mentor

리액트 10 주 스터디 멘토

• 스터디의 멘토로 참여하여, 스터디원들의 리액트 프로젝트 및 코드에 대한 코드리뷰를 수행

• 개인적인 면담을 통해 스터디원들의 취업과 이직에 관한 상담을 진행

• 개발 경험을 바탕으로 스터디원들에게 적절한 개발 방향성을 제시하고, 기술적인 도움과 조언을 제공