Day 31 (12/1) - Spring Boot 전환 및 React Router 동적 라우팅 실습

1. Spring Boot 프로젝트 환경 설정 (오전)

Lombok 설치 및 STS 연동

• 설치 경로: D:\Dev\lib 등의 경로에 lombok.jar 배치
• 설정 방법: CMD에서 java -jar lombok.jar 실행 후 STS4 설치 경로 선택하여 설치
• 목적: @Getter, @Setter, @ToString 등을 통해 반복적인 자바 코드(Boilerplate) 제거

Spring Starter Project 생성 (Ver 3.5.8)

• Java Version: 21
• 주요 의존성(Dependencies):
  • Spring Web: 웹 개발을 위한 기본 라이브러리 (내장 톰캣 포함)
  • Spring Boot DevTools: 코드 수정 시 자동 리로딩 지원
  • Lombok: 어노테이션 기반 코드 자동 생성
  • MySQL Driver: DB 연동을 위한 드라이버

JSP View Resolver 및 DB 설정 (application.properties)

# MySQL 연결 설정
spring.datasource.url=jdbc:mysql://localhost:3306/edudb?serverTimezone=Asia/Seoul
spring.datasource.username=jdbctest
spring.datasource.password=1234

# JSP 뷰 경로 설정
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

---

2. Spring MVC 핵심 개념 및 흐름

• DispatcherServlet: 모든 요청을 중앙에서 관리하는 프론트 컨트롤러 (배달 앱의 서버 역할)
• IoC (제어의 역전): 객체 생성 및 관리 권한을 개발자가 아닌 스프링 컨테이너가 가짐
• DI (의존성 주입): @Autowired를 통해 필요한 객체를 외부에서 주입받는 방식
• Bean: 스프링 컨테이너가 관리하는 자바 객체

---

3. Servlet → Spring MVC 마이그레이션 실무

주요 변경 사항

구분	기존 Servlet 방식	Spring MVC 방식
매핑	ActionFactory + command 파라미터	@GetMapping, @PostMapping 어노테이션
데이터 바인딩	request.getParameter() 일일이 수행	메서드 파라미터에 VO 선언 시 자동 매핑
화면 이동	RequestDispatcher.forward()	문자열(뷰 이름) 반환 또는 redirect: 사용

게시글 등록 예시 (Refactoring)

@PostMapping("/board_write")
public String boardWrite(BoardVO vo) {
    // 1. VO 객체로 데이터 자동 바인딩 (name 속성값 일치 필수)
    boardService.insertBoard(vo); 
    // 2. 등록 후 목록으로 이동 (새로운 GET 요청 유도)
    return "redirect:board_list"; 
}

---

4. React Router 동적 라우팅 (오후)

기본 설정

• 설치: npm i react-router-dom
• 적용: App.jsx를 BrowserRouter로 감싸서 SPA 환경 구축

동적 경로 처리 방식 비교

1. URL Parameter (Path Variable)
   • 형태: /diary/:id
   • 용도: 특정 데이터 조회 (상세 페이지 등)
   • 가져오기: useParams() 훅 사용
2. Query String
   • 형태: /search?q=keyword&sort=latest
   • 용도: 검색 필터링, 정렬 옵션 전달
   • 가져오기: useSearchParams() 훅 사용

---

❓ 질문 & 추가 조사 내용 (Q&A)

Q1. redirect: vs '뷰 이름 리턴'의 차이

• 뷰 이름 리턴 ("board_list"):
  • DispatcherServlet이 해당 JSP를 찾아 화면을 그림 (Forward 방식)
  • 브라우저의 URL 주소는 변하지 않음
• redirect:board_list:
  • 브라우저에게 해당 주소로 다시 요청하라는 응답을 보냄 (302 Redirect)
  • URL 주소가 변경됨. 게시글 등록 후 새로고침 시 중복 등록을 방지하기 위해 필수 사용

Q2. @RequestParam vs VO(Command Object)

• @RequestParam: 단일 파라미터(id, page 등)를 받을 때 유용하며, 필수 여부나 기본값 설정 가능
• VO 바인딩: 회원가입, 게시글 작성 등 전송되는 필드가 많을 때 객체로 한 번에 담아 가독성 향상

Q3. React에서 파라미터 추출 실전 코드

import { useParams, useSearchParams } from 'react-router-dom';

const Diary = () => {
    // 1. URL 파라미터 가져오기 (/diary/1)
    const { id } = useParams();

    // 2. 쿼리 스트링 가져오기 (/diary?sort=latest)
    const [searchParams, setSearchParams] = useSearchParams();
    const sort = searchParams.get("sort");

    return <div>일기 번호: {id}, 정렬: {sort}</div>;
}