Front-End/React

React ■ React 차세대 작업 준비

SIKIDA 2024. 9. 15. 18:58
728x90

차세대 작업 준비하기

Axios baseURL 설정

baseURL을 설정하면 Axios 코드를 작성할 때 URL을 생략할 수 있음

* axiosConfig.js 파일 수정

* 이클립스에서 작성한 톰캣 서버 코드로 요청가도록 설정

 

포트 번호 변경

Vite 설정에서 포트 변경

vite.config.js 파일에서 기본 포트를 80으로 설정합니다. 이는 웹 서버가 기본적으로 HTTP 요청을 처리하는 포트입니다.

Tomcat 포트 변경

이클립스에서 Tomcat 서버의 포트 번호를 8080으로 변경합니다.

시스템 구조

DNS, 웹, WAS, DB 간 통신 흐름

  • 웹 브라우저에서 React로 작성된 페이지를 요청하고, 동적 데이터는 Spring을 통해 처리됩니다.
  • Spring은 Oracle DB에서 데이터를 조회한 후, 웹 페이지에 반영하여 최종적으로 브라우저에 표시됩니다.

 

 

차세대 프로젝트란?

차세대 프로젝트는 전체 시스템을 새로 구축하는 프로젝트를 의미합니다. 이 외에도 다음과 같은 프로젝트 유형이 있습니다:

  1. 고도화 프로젝트: 기존 시스템을 유지하면서 구조나 기능을 개선하는 프로젝트.
  2. 마이그레이션: 데이터나 애플리케이션을 다른 시스템으로 이동하는 작업.
  3. 유지보수: 시스템의 현재 상태를 유지하면서 일부 기능이나 성능을 개선하는 작업.
  4. 통합 시스템 구축: 여러 시스템을 하나로 통합하는 프로젝트.

 

 

자유게시판 이동 구현

FreeList 페이지 구현

기존의 freeList.jsp 파일을 React에 맞게 변환합니다. freeListComponent를 생성하고, 라우터 설정을 통해 FreeList 페이지로 이동되도록 설정합니다.

 

메인.jsx에 FreeList 페이지로 이동되도록 수정

 

에러 해결

React에서는 style={{ color: 'red' }}와 같은 방식으로 인라인 스타일을 적용해야 하므로, 기존 JSP에서 사용하던 스타일 속성의 문법을 수정합니다.

 

 

라우터 파일 관리

라우터 관리의 필요성

프로젝트가 커지면서 페이지가 많아질수록, 라우터 관련 코드가 복잡해집니다. 이 문제를 해결하기 위해 라우터 관련 파일을 별도의 폴더로 분리하여 관리하는 것이 좋습니다.

라우터 파일 구성

• 라우터 파일 관리하기 - 1

main.jsx의 아래 코드 삭제

1. const router 관련 코드 전체 삭제

2. import에서 pages 관련 코드 전체 삭제(FreeList 포함)

 

• 삭제 후 main.jsx

 

• 라우터 파일 관리하기 - 2

아래와 같이 폴더 및 파일 생성

 

• 라우터 파일 관리하기 - 3

src/router/config/routerconfig.jsx 생성

 

src/router/board/free/freeRouters.jsx 생성

 

 

차세대 프로젝트 작업 관련해서 정리를 진행하였다 수업때 배웠던 부분을 정리하며 업로드 하는것이라 이상한부분이있는데 이부분은 따로 정리해서 차근차근 한번더 복습하고 정리해야겠다 그럼 20000!!

'Front-End > React' 카테고리의 다른 글

React ■ Axios 사용하기  (1) 2024.09.13
React ■ 상태관리(2)  (0) 2024.09.11
React ■ 상태관리(1)  (3) 2024.09.09
React ■ 랜더링, 이벤트 핸들러  (2) 2024.09.08
React ■ props  (0) 2024.09.06