JSP to React Migration Guide

현재 상황 분석

기존 시스템 구조

• Spring MVC + JSP 기반의 웹 애플리케이션
• 서버 사이드 렌더링 방식
• 세션 기반 인증
• ModelAndView를 통한 View 반환
• Form 기반의 데이터 전송

API 엔드포인트 예시

@RequestMapping(value = "/front/login.do", method = RequestMethod.POST)
public ModelAndView frontLogin(@ModelAttribute Users user, HttpSession session) {
    ModelAndView mv = new ModelAndView("");
    // ... 로직 처리
    return mv;
}

마이그레이션 접근 방식 비교

1. 기존 API 그대로 사용 (임시 방안)

프론트엔드 작업 범위

• React 프로젝트 설정
• 프록시 설정 (package.json)
• Form 데이터 전송 방식 구현
• 서버 리다이렉트 처리
• 세션 기반 인증 유지

제약사항

1. 데이터 처리

   • Form 데이터 형식으로 전송해야 함
   • JSON 응답이 아닌 HTML/JSP 응답 처리 필요
   • 데이터 파싱 작업 추가 필요

2. 에러 처리

   • 서버 에러 응답이 HTML 형태로 오는 경우 처리 어려움
   • 상세한 에러 정보 획득 제한적
   • 클라이언트 사이드 에러 핸들링 제한

3. 인증

   • 세션 기반 인증 사용
   • 브라우저 쿠키에 의존
   • SPA에서 세션 관리가 까다로움

4. 라우팅

   • 서버의 리다이렉트 처리가 복잡
   • History API 활용 제한
   • 클라이언트 라우팅과 서버 라우팅 혼용

코드 예시

const login = async (credentials: LoginForm) => {
  const response = await fetch('/front/login.do', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams(credentials)
  });
  
  if (response.redirected) {
    window.location.href = response.url;
  }
};

2. API 현대화 후 사용 (권장 방안)

백엔드 변경 사항

1. REST API 엔드포인트 구현

@RestController
@RequestMapping("/api")
public class LoginController {
    @PostMapping("/login")
    public ResponseEntity<LoginResponse> login(@RequestBody LoginRequest request) {
        // ... 로직 처리
        return ResponseEntity.ok(response);
    }
}

2. JWT 기반 인증 구현
3. CORS 설정
4. Response DTO 구조화

프론트엔드 작업 범위

1. API 통신

   • Axios 인스턴스 설정
   • 인터셉터를 통한 토큰 관리
   • API 응답 타입 정의

2. 상태 관리

   • 전역 상태 관리 (Redux/Recoil)
   • 인증 상태 관리
   • 에러 상태 관리

3. 라우팅

   • React Router 설정
   • 보호된 라우트 구현
   • 권한 기반 라우팅

코드 예시

// API 호출
const login = async (credentials: LoginRequest): Promise<LoginResponse> => {
  const { data } = await axios.post('/api/login', credentials);
  return data;
};

// 컴포넌트에서 사용
const LoginPage = () => {
  const handleSubmit = async (credentials) => {
    try {
      const response = await login(credentials);
      if (response.success) {
        // 토큰 저장 및 리다이렉트
        setAuthToken(response.token);
        navigate('/dashboard');
      }
    } catch (error) {
      handleError(error);
    }
  };
};

단계별 마이그레이션 전략

Phase 1: 기존 API 사용 (1-2개월)

1. React 프로젝트 설정
2. 프록시 설정
3. 기본 컴포넌트 구현
4. 기존 API 연동

Phase 2: API 현대화 준비 (2-3개월)

1. 새로운 API 스펙 정의
2. DTO 설계
3. 인증 방식 설계
4. 테스트 계획 수립

Phase 3: 점진적 마이그레이션 (3-4개월)

1. API 엔드포인트 현대화
2. JWT 인증 구현
3. 프론트엔드 코드 리팩토링
4. 테스트 및 안정화

결론

• 단기적으로는 기존 API를 활용하여 빠른 마이그레이션 시작 가능
• 장기적으로는 API 현대화를 통해 더 나은 개발 경험과 유지보수성 확보
• 단계적 마이그레이션을 통해 리스크 최소화