Laravel 11, Vue 3, Inertia.js를 사용한 개발자 포트폴리오 및 관리형 콘텐츠 관리 시스템(CMS) 구축

시니어 풀스택 엔지니어로서 개인 포트폴리오를 구축할 때, 일반적인 정적 템플릿으로는 복잡한 시스템 공학, 실시간 동시성(concurrency), 또는 운영상의 엄격함을 충분히 전달하기 어렵습니다.

진정한 프로덕션 수준의 기술력을 보여주기 위해, 저는 Laravel 11, Vue 3, Inertia.js를 기반으로 하는 엔드투엔드 개발자 포트폴리오 및 콘텐츠 관리 시스템(CMS)을 구축하고 오픈소스로 공개했습니다.

이 시스템이 어떻게 구축되었는지, 그리고 왜 이 스택을 선택했는지에 대한 아키텍처 분석은 다음과 같습니다.

🏛️ 아키텍처: Inertia.js 모놀리스

중복된 API 라우팅과 클라이언트 측 인증 토큰을 가진 분리형(decoupled) 클라이언트 SPA를 구축하는 대신, 저는 Inertia.js의 현대적인 모놀리스 방식을 채택했습니다:

Laravel 11 백엔드: 강력한 세션 기반 인증, 데이터베이스 트랜잭션, Form Request 유효성 검사, 그리고 얇은 컨트롤러 위임(thin controller delegates)을 처리합니다.
Vue 3 프론트엔드: Pinia를 사용한 반응형 상태 관리로 싱글 페이지 애플리케이션(SPA)의 유동성을 제공합니다.
API 보일러플레이트 제로: Inertia는 서버 측 속성(props)을 Vue 뷰 컴포넌트에 자동으로 직렬화(serialize)합니다.

Android Chrome과 같은 표준 모바일 브라우저는 <iframe> 서브프레임 내부의 인라인 PDF 렌더링을 차단할 수 있습니다.

이를 해결하기 위해, 저는 모바일 뷰포트를 감지하고 네이티브 전체 화면 리더를 실행하며 즉각적인 다운로드 폴백(fallback) 기능을 갖춘 장치 적응형 이력서 뷰어를 설계했습니다.

일반적인 튜토리얼 대신, 포트폴리오에는 다음과 같은 실제 기술적 과제를 다루는 엔지니어링 사례 연구가 포함되어 있습니다:

완벽한 관리 기능 세트는 다음을 관리할 수 있도록 합니다:

이 모든 것을 안전한 비공개 대시보드(private dashboard)를 통해 직접 관리할 수 있습니다.

개발자들이 운영 준비가 된 Laravel + Vue 3 + Inertia.js 레퍼런스 아키텍처를 찾을 경우, 프로젝트 코드베이스 전체를 GitHub에 완전히 오픈소스로 공개했습니다.

🌐 라이브 데모:
[https://kashif-dev.42web.io/]

⭐ 이 저장소의 아키텍처가 유용하다고 생각되면, GitHub에서 별점(star)을 눌러주세요!

#Laravel #VueJS #InertiaJS #PHP #FullStackDevelopment #SoftwareArchitecture #OpenSource #WebDevelopment #CleanArchitecture