플러스프로젝트 배경
1. 문제점 기존 출결 시스템은 서버 렌더링 기반 모놀리식 구조로 화면과 로직이 분리되지 않음 앱은 Android와 iOS 네이티브 2벌로 관리되어 기능 하나를 추가할 때마다 두 번 개발 세션 기반 인증이라 앱·웹이 함께 쓰는 구조에 맞지 않음 2. 프로젝트 목표 프론트엔드와 백엔드를 분리한 모던 아키텍처로 신규 구현 앱을 단일 코드베이스로 전환해 개발·유지보수 비용 절감 토큰 기반 인증으로
프로젝트 성과
네이티브 앱 2벌을 단일 빌드로 전환
OS별로 따로 관리하던 네이티브 앱을 React Native 단일 코드베이스로 전환해 Android·iOS 소스를 동시 생성. 기능 추가 시 두 번 개발하던 비용 제거
모놀리식에서 SPA + REST로 전환
프론트엔드를 Vue.js SPA로 재구성하고 백엔드를 REST API로 전면 전환. Swagger로 API를 문서화해 명세 기반 협업 체계 확립
토큰 인증 체계 도입
세션 기반 인증을 JWT 토큰 방식으로 전환해 웹·앱이 동일한 인증 체계를 공유하도록 구성
전 구간 단독 개발
웹·백엔드·앱 전체를 혼자 설계하고 구현. 계층 간 전달 손실 없이 하나의 설계로 일관 구축
핵심 기능
전체 시스템 구조
앱과 웹이 REST API로 백엔드와 통신하고, 토큰 기반 인증을 공유하는 구조입니다. 앱·웹·서버·DB 전 구간을 단독으로 설계·구현했습니다.
진행 단계
요건 분석 및 아키텍처 설계
2020.04
기존 모놀리식 구조를 분석하고 프론트·백엔드 분리 아키텍처를 설계
프로젝트 상세
교육 기업의 모바일 출결 관리 시스템을 당시 확산되던 모던 아키텍처로 신규 구현한 프로젝트입니다. 웹·백엔드·앱 전 구간을 혼자 담당했습니다. 이전까지 다뤄온 시스템은 서버 렌더링 기반 모놀리식 구조에 OS별 네이티브 앱 2벌을 따로 관리하는 방식이었습니다. 이 프로젝트는 그 구조를 전면적으로 바꾸는 작업이었습니다. 프론트엔드는 Vue.js SPA로 구성하고 CSS는 SCSS 컴파일로 일괄 관리했습
