전체 프로젝트

ENTERPRISE SEARCH · DELIVERY

검색 서비스의 복잡성을 줄이고, 배포의 속도를 높이다.

삼성 E&A · CUBE 2.0

검색 프론트엔드의 요청 객체·전역 상태 구조를 정리하고 수동 파일 업로드를 컨테이너와 스크립트 기반 배포로 전환했습니다.

PERIOD
2025.04 — 2025.07
ROLE
프론트엔드 선임
PROJECT
팀 프로젝트
TypeScriptVue.jsPiniaDocker ComposeNginx
SAMSUNG E&A / CUBE 2.0DEPLOYMENT
DEPLOYMENT TIME50%+

기존 대비 배포 시간 단축

BUILD DOCKER DEPLOY
LESS FRICTION. BETTER DELIVERY.↗

01 / CONTEXT & ROLE

어떤 문제를 풀었나요?

사내 검색 엔진의 프론트엔드에서 요청·응답과 전역 상태를 일관되게 관리할 구조가 필요했습니다. 프론트엔드 파일을 수동으로 업로드하던 배포 과정도 개선 대상이었습니다.

제가 맡은 일

TypeScript·Vue.js 기반 검색 프론트엔드 개발, 요청·응답 객체 구조와 상태 관리 개선, 컨테이너 배포 전환 및 셸 스크립트 자동화를 담당했습니다.

02 / DEEP DIVE

수동 배포 과정에서 무엇을 바꿨나요?

문제
기존에는 프론트엔드 파일을 수동으로 업로드했습니다. 빌드부터 서비스 반영까지의 절차를 반복해서 수행해야 했습니다.
접근
Docker Compose·Nginx 기반 컨테이너 배포로 옮기고, 셸 스크립트로 빌드와 배포 절차를 자동화했습니다. 프론트엔드에서는 요청·응답 객체와 Pinia 전역 상태 구조도 정리했습니다.
결과
반복되던 수작업 절차가 스크립트 실행으로 바뀌어 기존 방식 대비 배포 시간이 50% 이상 단축되었고, 배포 과정에서 발생하던 사람의 실수 가능성도 줄었습니다.

03 / ENGINEERING DECISIONS

구현을 이끈 기술적 결정.

01

요청 객체에 타입과 의도를 담기

요청·응답 객체를 클래스 기반으로 전환해 타입 안정성과 코드 일관성을 강화했습니다. Builder 패턴을 도입해 요청 객체의 생성 로직을 직관적으로 구성했습니다.

TypeScriptClassBuilder pattern
02

전역 상태 관리 구조 정리

Pinia를 도입해 전역 상태를 관리하는 구조를 개선했습니다. 상태 관련 코드의 복잡도를 줄이고 유지보수성을 높였습니다.

Vue.jsPiniaState management
03

수동 업로드에서 자동화된 배포로

Docker Compose와 Nginx 기반 컨테이너 배포 구조로 전환했습니다. 셸 스크립트로 빌드부터 배포까지 자동화해 기존 대비 배포 시간을 50% 이상 단축했습니다.

Docker ComposeNginxShell script

04 / HOW IT CONNECTS

기능을 연결하는 흐름.

  1. 01스크립트 실행빌드·배포 자동화
  2. 02프론트엔드 빌드Vue.js · TypeScript
  3. 03컨테이너 배포Docker Compose
  4. 04서비스 제공Nginx

수동 업로드를 대체한 자동화 배포 과정입니다.

05 / OUTCOME

서비스에 남긴 변화.

  • 배포 시간 50% 이상 단축
  • 타입 안정성과 요청·응답 코드의 일관성 강화
  • Pinia 도입을 통한 상태 관리 복잡도 감소

자료 안내

보안 정책상 사내 서비스 화면 대신 배포 구조 개념도로 대체했습니다.

NEXT CASE STUDY

국가기록원 생성형 AI

06 / LET’S CONNECT

함께 풀어갈 문제를
기다립니다.

새로운 기회나 기술에 관한 대화, 편하게 연락 주세요.