미리보기

FE 개발환경 구축

실시간 주식 데이터 특성상 빠른 초기 렌더링과 구조적 확장성이 중요한 학습형 프로젝트였습니다.
초기에는 FSD(Feature-Sliced Design) 구조를 적용했으나, 기능이 확장되며 코드 복잡도 증가와 타입 중복, 레이어 간 의존성 문제가 
발생했습니다. 이 문제를 해결하기 위해, SSR(Server-Side Rendering) 도입과 Turborepo 기반 모노레포 환경을 구축하여 렌더링 
성능을 개선하고, 폴더 구조를 layer와 slice 개념으로 재정비해 코드 일관성과 유지보수성을 높였습니다.

• SSR 도입 및 Next.js(14) 적용 → 초기 렌더링 속도 개선 및 사용자 경험 향상 [PR #19]

• Turborepo 기반 모노레포 구축 → 패키지 관리 일관성 확보 및 개발 효율성 향상

• 폴더 구조 개선 → FSD 구조 변형 적용으로 타입 중복 최소화, 코드 간 결합도 감소 [PR #325]

이 경험을 통해 서비스 요구사항에 맞는 기술적 판단과 구조적 설계 역량의 중요성을 배웠습니다.

CI/CD 파이프라인 구축 및 개선

초기 CI 파이프라인은 순차 실행과 중복 작업으로 오버헤드가 발생, 빌드 시간이 길어지는 문제가 있었습니다. [PR #51]

특히 GitHub Actions 기본 러너 리소스(2 vCPU, 7GB RAM) 한계로 인한 메모리 경합과 컨텍스트 스위칭 문제가 두드러졌습니다.
이를 해결하기 위해, CI 구조를 3차례 개선하며 병목 지점을 분석하고 작업 분배 방식을 최적화했습니다.

1차 개선

• 모든 작업을 단일 Job Runner로 통합 → 환경 설정 중복 제거

• 캐시 최적화 및 불필요한 작업 제거

• 1분 43초 → 51초, 50.5% 시간 절감 [PR #324]

2차 개선

• 작업을 3개 Job Runner로 분리해 병렬 실행으로 메모리 경합 해소

• 테스트 코드 증가에도 1분 14초 →49초대 절감 [PR #344]

3차 개선

• 작업 특성 분석 후, I/O Bound (Lint, Test)와 CPU Bound (Build)를 분리

• I/O 작업은 하나의 Runner에서 병렬 처리, Build는 전용 Runner로 할당

• .turborepo 캐시 도입, 최종 29~30초까지 단축 [PR #347]

이 과정에서 운영체제의 CPU/IO Bound 개념을 적용해 최적화를 진행했으며, 성능 개선은 단순 구조 변경이 아닌 시스템 이해에서 
시작된다는 사실을 깊이 깨달았습니다.

실시간 채팅 기능 구현 및 개선

실시간 주식 차트와 채팅 기능이 동시에 동작해야 하는 구조에서, 기존 useState 기반 구현은 매 메시지마다 배열 복사와 불필요한 
리렌더링 발생으로 성능 저하 문제가 있었습니다.
제한된 개발 시간 내에 채팅 상태 업데이트 방식을 집중적으로 개선하여 성능과 사용자 경험을 동시에 향상시켰습니다.

채팅 상태 업데이트 최적화

• 기존: useState로 메시지 배열 전체 재생성 → 리렌더링 과다 발생

• 개선: Tanstack Query의 캐시 업데이트(setQueryData) 활용해 새로운 메시지만 병합

• UI 리렌더링 최소화, 실시간성 및 성능 개선 [PR #204]

과거 채팅 데이터 최적화

• 기존: 접속 시 전체 API 호출 → 초기 로딩 속도 저하

• 개선: useInfiniteQuery 기반 커서 페이지네이션 도입

• 정방향/역방향 데이터 로딩으로 초기 속도 개선 및 UX 강화

• 채널 입장 시 사용자 읽은 위치 기준으로 스크롤 유지해 UX 개선 [PR #280]

이 경험을 통해 실시간 서비스에서 불필요한 렌더링과 데이터 요청을 줄이는 설계의 중요성을 배웠고, 상태 관리 최적화에 대한 감각을 
키웠습니다.

파일 업로드 기능 구현 및 개선

초기 파일 업로드 기능은 대용량 파일이나 다중 업로드 시, 네트워크 불안정으로 인한 무한 대기와 메모리 누수 문제가 발생했습니다. 
이를 해결하기 위해 썸네일 생성 최적화, 청크 업로드, 재시도 로직 강화 등 안정성과 성능 개선에 집중했습니다.

무한 대기 및 메모리 누수 문제 해결

• 클라이언트 썸네일 생성에 7초 타임아웃 적용 → 저사양 기기에서도 안정적 생성

• 일정 시간 내 생성 실패 시 자동 취소해 메모리 누수 방지 [PR #185]

업로드 안정성과 속도 개선

• 청크 업로드 도입 → 네트워크 지연 실시간 측정 후 청크 크기와 동시 전송 개수 최적화

• 네트워크 상태에 따라 병렬 처리량 동적 조절 → 업로드 성능 개선

• 지수 백오프 재시도 로직 도입 → 실패 시 최대 5회까지 안정성 확보

• 동적 업로드 큐 적용 → 서버 부하 분산 및 안정성 강화

• 결과적으로 업로드 성능과 안정성 86.46% 개선 [PR #271] [PR #327]

이 경험을 통해 대용량 파일 처리에서 발생하는 네트워크 이슈와 메모리 관리의 중요성을 실감했고, 서비스 안정성 설계 역량을 키웠습니다

단위 테스트 작성 및 리팩토링 과정에서의 테스트 도입

기능 구현 후 리팩토링 과정에서, 복잡해진 비즈니스 로직이 향후 유지보수와 협업 과정에서 이해하기 어려워질 수 있다는 문제 의식이 
생겼습니다. 특히 실제 서비스 운영을 가정했을 때, 코드를 작성한 사람 외에도 누구나 쉽게 이해하고 신뢰할 수 있어야 한다는 점을 
고려했습니다. 이에 따라 전체 코드가 아닌 핵심 비즈니스 로직과 유틸리티 함수에 집중해 테스트 코드를 작성했습니다.

• Vitest 기반 테스트 환경 구축

• 비즈니스 로직 중심으로 테스트 작성, 유틸성 함수와 핵심 로직의 안정성 검증 [PR #342]

이 경험을 통해 테스트 코드는 학습용 프로젝트에서도 필수적이며, 복잡한 기능일수록 협업과 유지보수를 위한 핵심 도구라는 것을 
깨달았습니다.

디자인 시스템 관리 및 Storybook 도입

UI 컴포넌트 개발 과정에서 피드백과 테스트를 반복하며 커뮤니케이션 비용이 증가하고, 개발 생산성이 저하되는 문제가 발생했습니다.
특히 협업 과정에서 컴포넌트 UI를 정확히 맞춰보기 어렵고, 반복 테스트로 인한 비효율이 컸습니다.
이를 해결하기 위해 Storybook을 도입하여, UI 컴포넌트를 독립적으로 개발하고 시각적으로 문서화했습니다.

Storybook 도입 및 구축

• UI 컴포넌트의 상태를 독립적으로 확인하고 검증할 수 있도록 환경 구성

• 디자이너, 개발자 간의 소통 효율성 증가 → 피드백 과정 단축

• 반복 테스트 과정에서 발생하던 비효율 최소화 및 컴포넌트 품질 향상 [PR Storybook]

이 경험을 통해 UI 컴포넌트 개발에서도 협업과 생산성을 고려한 도구 선택이 중요하다는 것을 깨달았습니다.

GDG on Campus KNU의 분산된 운영 시스템을 개선하고자 프로젝트를 시작했습니다. Google Form을 통한 지원서 제출, Notion을 통한 일정 관리, 그리고 별도로 관리되던 Member Info를 하나의 플랫폼으로 통합하여 커뮤니티 운영 효율을 높이고자 했습니다.

https://github.com/GDG-on-Campus-KNU/GDG_onCampus_KNU_Official_FE

지원서 서비스 구현

GDGoC KNU에 지원하는 분들 중 저희가 추구하는 같은 방향성을 가진 사람을 선발하는 것이 목표 였습니다. 이를 위해 일반 채용사이트와 
유사한 환경을 조성하기 위해 지원서 서비스를 구현하였습니다. [Prototype WorkFlow]

• react-hook-form을 사용한 지원서 서비스 구현

• 지원서 페이지 접근 제어 및 만료 기간 예외 처리 구현

• Google Analytics 이벤트 커스텀 적용으로 실시간 사용자 행동 모니터링

어드민 페이지 팀 배치하기 기능 구현

GDGoC KNU에서는 매 기수마다 스터디나 프로젝트를 진행하며 운영진이 팀 매칭을 담당해왔습니다. 이 과정에서 구글 스프레드시트로 
인원 명부를 받아 기록하고, 팀을 배치한 뒤 이를 캡처하여 매번 기수에게 공지하는 등 여러 불편함이 발생했었습니다. 이를 해소하기 위해, 별도의 어드민 페이지에서 전체 멤버 명부를 불러온 뒤 새 팀에 손쉽게 배치할 수 있는 기능을 구현했습니다.

• 드래그 앤 드롭을 사용하여 팀에 배치 기능 구현했습니다.

성능 최적화 및 사용자 경험 개선

Google Anlytics내에서 모니터링 시스템을 통해서 페이지 화면별 조회수가 저하되는 현상을 감지하였습니다. 이를 해결하기 위해 Suspense와 Lazy Loading을 활용하여 초기렌더링 속도를 줄였습니다.

• 초기 렌더링 시간 8000ms에서 2000ms로 75% 개선

• React async helmet과 prerenderer 활용한 SEO 최적화
 - 지원 시즌 한 달간 500명 이상의 유입 창출

인프라 구축 및 배포 자동화



추후 서비스의 안정적인 운영을 위해 AWS S3, CloudFront, Route 53을 활용한 CDN 기반 인프라를 구축했습니다. S3를 통해 정적 콘텐츠를 안전하게 저장하고, CloudFront의 엣지 로케이션을 활용하여 전 세계 어디서나 빠른 콘텐츠 접근이 가능하도록 구현했습니다. Route 53을 통한 도메인 관리로 안정적인 DNS 서비스를 제공하여 가용성을 높였습니다.

• AWS S3, CloudFront, Route 53 활용한 정적 배포 환경 구성

• GitHub Actions와 pnpm을 활용한 효율적인 CI/CD 파이프라인 구축


[2024.12 ~ 2025.02]

• 아키텍처 설계·PMP 리뷰 등 프로젝트 전 과정 경험

• 다양한 직군(백엔드·인프라)과 협업하며 시스템 설계·커뮤니케이션 역량 강화

• 코드 품질 개선 및 문서화 프로세스 도입

Github [2024.07 ~ 2024.11]

Yorkie FE 오픈소스 프로젝트 기여 → 컨트리뷰터 특별상 수상
다중 사용자 인터페이스 개선 (MUI 팝오버 적용) 및 UX 향상 [Issue #139] [PR #241]
404 에러 핸들링 시스템 구축 → 유지보수성·확장성 강화 [Issue #137] [PR #244]

[2024.04 ~ 2024.11]

• 5개 대학 중 유일하게 Step 1~3 전 과정 강연자로 선정

• 패키지 매니저 성능 비교, 토큰 보안, 리액트 렌더링 최적화 주제 발표

• 멋쟁이 사자 총괄 대학 사이트 (Github)

  • 대학 통합 플랫폼 운영 및 유지보수
    

• 전국 연합 해커톤 웹사이트 프론트엔드 개발 참여

  • 메인 랜딩 페이지 UI/UX 설계 및 구현

  • 팀 협업을 통한 운영 비용 1000만원 절감 달성

  • 총 약 1600명의 참가자 대상 서비스 제공

[2023.09 ~ ing.]

• 학부·대학원 공식 웹사이트 유지보수 및 콘텐츠 업데이트

• 연 평균 4.2만 클릭, 19만 노출 달성 / 12기 팀 리더

2/3/4기: Member → Core → Organizer [2022 ~ 2025]

• 대규모 해커톤 기획/운영

  • 2025 백야 해커톤 기획 파트장 [20개 대학 참여 | 요즘IT 인터뷰 게재]

  • 2024 Vision Challenge 해커톤 총괄 [Google Cloud, 경북대 SW 교육원 협력]

  • 2024 경북대 IT 연합 동아리 해커톤 기획 담당 [6개 IT 연합 동아리 협력]

  • 2023 영남권 GDSC 연합 아이디어톤 기획 [영남권 5개 대학 협력]