Vue 프로젝트 회고: 처음부터 끝까지의 경험과 교훈

Vue 프로젝트를 처음부터 기획하고 개발하며, 이후 운영과 유지보수를 경험했다. 시간이 지나 다시 프로젝트를 맡게 되었을 때, 많은 문제들이 쌓여 있었다. 처음부터 기획을 잘하는 것이 얼마나 중요한지, 래거시 코드가 어떻게 쌓이는지, 성능 최적화와 오류 추적은 어떻게 해야 하는지 직접 경험하며 많은 것을 배웠다.

이 글에서는 Vue와 Spring을 활용한 풀스택 개발자로서 프로젝트를 진행하며 얻은 실전 경험을 공유하고자 한다.

1. 처음부터 프로젝트를 잘 개발하는 방법

Vue 프로젝트를 시작하기 전, 가장 신경 썼던 부분은 기획이었다. 단순한 기능 나열이 아니라, 전체적인 흐름을 먼저 정리하고 시스템 아키텍처를 설계하는 것이 중요했다.

✅ 처음부터 잘 준비한 것들

• 프론트엔드 & 백엔드 API 설계 문서화: API 명세를 OpenAPI(Swagger)로 정리해 놓으니 개발 속도가 훨씬 빨라졌다.
• 역할 분담과 코드 스타일 가이드라인 설정: 초기부터 Prettier, ESLint를 설정하여 협업이 수월했다.
• 상태 관리와 컴포넌트 구조 계획: Pinia를 선택하고, 페이지별로 상태 분리를 어떻게 할 것인지 기획했다.

🔥 그러나 아쉬웠던 점

• 일부 UI/UX 요소는 후반부에 다시 수정해야 했고, 디자인 시스템을 초기에 확립하지 않은 것이 문제였다.
• 초기부터 “이 기능이 확장될 경우 어떻게 변경될 것인가?”를 더 깊이 고민했어야 했다.

이 경험을 통해, 큰 그림을 그리는 것만큼, 세부적인 확장 가능성까지 고려한 기획이 중요하다는 것을 배웠다.

2. 래거시 코드가 되어 돌아온 나의 프로젝트: 래거시 코드 정리법

Vue 프로젝트를 개발하고 다른 팀에 넘긴 후 1년이 지나 다시 돌아왔다. 하지만 프로젝트는 완전히 다른 모습이 되어 있었다. 내가 알던 너는 어디에….

💀 래거시 코드에서 발견한 문제들

• 추가된 이유를 알 수 없는 기능들: 문서화가 부족해 “왜 이 코드가 존재하는지” 파악하기 어려웠다.
• 일관성이 없는 코드 스타일: Composition API와 Options API가 뒤섞여 있었고, 상태 관리 방식도 다 달랐다.
• 불필요한 의존성 증가: 급한 기능 추가로 인해 필요 없는 라이브러리가 남아 있었다.

🔨 래거시 코드 정리 전략

• 불필요한 라이브러리를 제거하고, 코드 컨벤션을 맞췄다.
• “이 코드가 왜 필요한가?”를 따져보고, 기존 기능을 단순화했다.
• API 응답 형식을 통일하여 백엔드와 협업을 원활하게 만들었다.

📌 결론: 유지보수 가능한 코드를 만들기 위해서는, 문서화와 일관된 코드 스타일이 필수적이다.

3. 사용자 로그인 관리법

관리자와 일반 사용자 로그인을 분리하고, JWT 인증 방식에서 보안 이슈를 해결해야 했다.

🔐 문제점

• 초기에는 JWT 토큰을 localStorage에 저장했는데, 이는 XSS 공격에 취약했다.
• 관리자는 세션 기반 인증이 필요했고, 사용자 권한(Role-Based Access Control)을 정리해야 했다.

✅ 해결 방법

• HTTPOnly 쿠키를 활용한 JWT 저장: XSS 방어가 가능해짐.
• Vuex와 Pinia를 활용한 로그인 상태 관리: 인증 상태가 제대로 반영되도록 설정.
• 권한(Role) 관리 체계 확립: 관리자는 ROLE_ADMIN, 일반 사용자는 ROLE_USER로 분리.

로그인은 단순한 기능이지만, 보안을 고려하지 않으면 큰 문제가 될 수 있다.

4. Vue와 백엔드(Spring) API 연동에서 발생하는 문제 해결법

Vue와 Spring Boot 간 API 연동에서 예상치 못한 문제들이 많았다.

🚨 API 연동에서 발생한 문제

• CORS(Cross-Origin Resource Sharing) 오류
• 백엔드 응답 데이터 구조가 통일되지 않음
• 프론트엔드에서 API 요청을 너무 많이 보내는 문제

🛠 해결 방법

• Spring Security에서 CORS 정책을 명확하게 설정
• API 응답을 표준화하여, 프론트엔드에서 데이터 변환 작업을 최소화
• Vue에서 useQuery를 활용하여 불필요한 API 요청을 줄임

API 연동은 단순한 GET/POST 요청이 아니라, 전체적인 데이터 흐름을 고려해야 한다.

5. 실제 운영하면서 경험한 성능 최적화 팁과 실수들

Vue 프로젝트를 운영하면서, 성능 최적화가 생각보다 더 중요하다는 것을 깨달았다.

⚡ 성능 문제 사례

• 처음에는 이미지 최적화를 하지 않아 페이지 로딩 속도가 느렸다.
• API 요청이 많아 네트워크 비용이 증가했다.
• Vue 컴포넌트가 너무 자주 리렌더링되었다.

✅ 최적화 방법

• Lazy Loading을 적극 활용하여, 페이지 로딩 속도를 개선
• Vue.memo와 watchEffect를 사용하여 불필요한 렌더링 방지
• 이미지 압축(WebP 포맷 활용)

운영하면서 성능을 개선하는 것은 필수적인 과정이었다.

6. 컴포넌트 설계: 재사용성과 유지보수를 고려한 구조화

처음에는 “한번만 쓰는 컴포넌트”라고 생각했던 것들이 결국 재사용 가능해야 하는 경우가 많았다.

📌 잘못된 설계 사례

• 페이지별로 거의 비슷한 컴포넌트를 따로 만들어버림
• 상태 관리 방식을 통일하지 않음

✅ 개선한 점

• Atomic Design 패턴을 적용하여, 컴포넌트를 계층적으로 관리
• 공통 유틸리티 함수 분리

컴포넌트 구조를 잘 짜면, 유지보수가 훨씬 쉬워진다.

7. Vue 프로젝트의 오류 추적 방법

운영하면서 오류 로그를 제대로 남기는 것이 중요했다.

🛠 오류 추적을 위한 도구

• Sentry를 활용한 오류 모니터링
• Vue DevTools를 사용한 상태 추적
• API 오류 응답을 Interceptor에서 처리

버그의 원인을 빨리 잘 잡는 것도 개발자의 중요한 업무였다.

8. 프로젝트가 끝난 후 남은 것: 풀스택 개발자로서 배운 점

Vue와 Spring Boot 기반으로 프로젝트를 진행하며, 많은 것을 배웠다. 특히나, 나는 단순히 Vue와 Spring을 다룰 줄 아는 개발자가 아니라, “어떤 프로젝트를 하더라도 유연하게 적응할 수 있는 개발자”가 되어야 한다는 것을 배웠다.

과거에는 특정 기술을 깊이 파고드는 것이 중요하다고 생각했지만, 이번 프로젝트를 진행하면서 개발자는 단순히 코드만 작성하는 사람이 아니라, 시스템 전반을 이해하고 문제를 해결하는 사람이어야 한다는 점을 체감했다.

🚀 내가 더 성장하기 위해 해야 할 것들

1) 소프트 스킬: 기술뿐만 아니라, 팀원과의 커뮤니케이션 능력도 중요하다.

기술이 뛰어난 것도 중요하지만, 팀원과 원활하게 협업하는 능력이 프로젝트의 성공을 좌우한다.
이번 프로젝트에서 API 명세를 명확히 하지 않아 프론트엔드와 백엔드 간 불필요한 커뮤니케이션 비용이 발생한 적이 있다.
👉 앞으로는 API 문서를 체계적으로 정리하고, 명확한 커뮤니케이션을 통해 개발 속도를 높이는 것을 목표로 삼아야 한다.

또한, 협업 도구(Notion, Jira, GitHub PR 리뷰 등)를 적극 활용하여 팀원들과 개발 진행 상황을 공유하는 습관을 길러야 한다.

2) 최신 기술 트렌드 파악: Vue 3, Vite, Pinia 등 내가 몸담은 곳에서 사용하는 새로운 기술을 적극적으로 학습해야 한다.

기술은 빠르게 변화하며, 현재 사용하고 있는 스택이 몇 년 후에도 최선의 선택일 거라는 보장은 없다.
이번 프로젝트에서도 Vue 2 기반으로 개발을 진행했지만, 이후 Vue 3와 Vite로 전환할 필요성을 절감했다.

👉 앞으로는 단순히 프로젝트를 진행하는 것에 그치지 않고, “이 기술이 앞으로도 유효할 것인가?”를 고민하며 트렌드를 따라가야 한다.

기술 트렌드를 따라가는 것이 단순한 유행이 아니라, 더 나은 개발 환경을 구축하고 유지보수를 편하게 만드는 방법이라는 것을 이번 프로젝트를 통해 깨달았다.

3) 운영 경험을 더 쌓기: 개발뿐만 아니라, DevOps와 배포 경험도 쌓아야 한다.

개발이 끝나면 프로젝트가 완성된다고 생각했지만, 실제 운영에 들어가면서 배포와 서버 관리의 중요성을 절감했다.
배포 후 API 응답 속도가 느려지는 문제, 서버 부하로 인해 장애가 발생하는 문제 등을 해결하면서 단순히 코드 작성뿐만 아니라 운영 환경을 고려한 개발이 필요하다는 것을 배웠다.

👉 앞으로는 CI/CD(자동 배포), 서버 모니터링, 로깅 시스템 구축 등 DevOps에 대한 이해도를 높이고 직접 경험하는 것이 중요하다고 생각한다.

• Docker 및 Kubernetes를 활용한 컨테이너화
• AWS, GCP 등 클라우드 서비스 활용
• ElasticSearch, Prometheus 같은 모니터링 시스템 구축

풀스택 개발자로 성장하기 위해서는 개발뿐만 아니라, 운영까지 책임지는 마인드셋이 필요하다.

근데 사실 모든 개발자의 숙명이다

🎯 가장 큰 교훈

운영하면서 성능과 보안을 꾸준히 개선해야 한다.

이번 프로젝트에서 성능 최적화가 필요하다는 것을 깨닫고 나서야, API 응답 속도를 줄이기 위해 캐싱을 적용하고, 이미지 최적화를 진행하는 등의 작업을 했다.
하지만, 이런 최적화 작업은 프로젝트 초반부터 고민했어야 했다.

또한, 보안 문제도 사후에 해결하는 것이 아니라, 기획 단계에서부터 고려해야 한다는 것을 배웠다.

• JWT 토큰을 LocalStorage에서 HTTPOnly 쿠키로 변경
• 관리자 계정의 접근 권한을 세분화
• 비밀번호 정책 강화 및 2FA(2단계 인증) 도입 고려

성능과 보안은 나중에 개선하는 것이 아니라, 처음부터 고려해야 하는 핵심 요소이다.

📌 결론

풀스택 개발자는 단순히 “프론트엔드와 백엔드를 다룰 줄 아는 사람”이 아니라, 기획부터 운영까지 전체적인 흐름을 이해하고 개선할 수 있는 사람이어야 한다. …고 생각한다. 전체적인 시야를 볼 수 있어야 유연한 대처가 가능하기 때문이다.

Vue와 Spring Boot 기반으로 프로젝트를 진행하면서, 처음에는 코드만 잘 짜면 된다고 생각했다. 하지만 프로젝트가 점점 커지고 운영 단계로 넘어가면서 풀스택 개발자의 역할은 단순히 기능을 구현하는 것이 아니라, 프로젝트 전반을 이해하고 문제를 해결하는 것임을 깨달았다.

전체적인 시야를 가지고 기획부터 운영까지 고려하는 개발자가 되어야 한다.

• 새로운 기술을 빠르게 익히고, 변화에 유연하게 대응할 수 있어야 한다.
• 팀원들과 원활하게 협업하고, 같이 성장할 수 있는 환경을 만드는 것도 개발자의 역할이다.
• 코드뿐만 아니라, 운영과 유지보수까지 고려한 개발을 해야 한다.

풀스택 포지션으로 진행했던 프로젝트들을 통해 기획, 개발, 협업, 유지보수, 성장이라는 5가지 측면에서 많은 것을 배웠다. 처음부터 프로젝트를 잘 설계하는 것, 유지보수를 고려한 개발을 하는 것, 팀원과 원활하게 소통하는 것, 운영하면서 끊임없이 개선하는 것, 그리고 개발자로서 끊임없이 성장하는 것이 중요하다는 것을 깨달았다.

이제 나는 단순히 기능을 개발하는 것이 아니라, “이 프로젝트가 앞으로도 지속 가능하게 운영될 수 있는가?” 를 고민하는 개발자가 되고 싶다.
다음 프로젝트에서는 같은 실수를 반복하지 않고, 더 나은 시스템을 설계할 것이다✨