KT AIVLE SCHOOL 7기

[KT AIVLE SCHOOL 7기] - FE/BE 정리

__hseong__ 2025. 5. 28. 16:55
728x90
반응형

 

 

React + Redux + Spring Boot + HTML 기초까지 총정리!

✅ 목차

  1. 프로젝트 소개
  2. 전체 시스템 구성
  3. HTML 기초 문법 총정리
  4. React 기초 문법과 작동 원리
  5. Redux 작동 원리와 실전 코드
  6. Spring Boot 개념과 백엔드 구성
  7. 전체 작동 순서 요약
  8. 마무리 및 확장 아이디어

1️⃣ 프로젝트 소개

React(자바스크립트)로 만든 웹페이지에서
Spring Boot(자바 백엔드)에서 결과를 응답하고
Redux로 상태를 저장/관리하는 시스템을 만들어 봅니다.

2️⃣ 전체 시스템 구성도

[React 프론트엔드] ⇄ [Redux 상태 저장소]
       ⇅ Axios HTTP 통신
[Spring Boot 백엔드 (REST API)]

3️⃣ HTML 기초 문법 총정리

🔹 HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>도서 추천</title>
  </head>
  <body>
    <h1>도서 추천 시스템</h1>
    <p>장르를 입력하면 도서를 추천해드릴게요!</p>
  </body>
</html>

🔹 자주 쓰는 태그 정리

태그 설명 예시
<h1> ~ <h6> 제목 <h1>제목</h1>
<p> 문단 <p>문단입니다</p>
<a> 링크 <a href="url">이동</a>
<button> 버튼 <button>클릭</button>
<input> 입력 필드 <input type="text" />
<ul><li> 리스트 <ul><li>아이템</li></ul>
<img> 이미지 <img src="..." alt="...">
<div> 레이아웃 구역 <div>내용</div>

4️⃣ React 기초 문법과 작동 원리

🔹 JSX란?

const element = <h1>Hello React</h1>;
  • JavaScript 안에서 HTML을 쓸 수 있는 문법

🔹 컴포넌트

const Welcome = (props) => {
  return <h1>안녕, {props.name}님!</h1>;
};

🔹 상태 관리 (useState)

const [genre, setGenre] = useState('');

🔹 이벤트 핸들러

<button onClick={() => alert("클릭됨!")}>누르기</button>

🔹 반복 렌더링 (map)

{books.map((book, i) => <li key={i}>{book}</li>)}

5️⃣ Redux 전역 상태 관리 원리 및 코드

🔹 Redux 구성 요소

구성 요소 역할
Store 상태 저장소
Action 무슨 일을 할지 요청
Reducer 실제 상태 변경 로직
Dispatch 요청을 Reducer에 전달
useSelector 상태값 가져오기

🔹 설치 명령어

yarn add @reduxjs/toolkit react-redux

🔹 상태 슬라이스 정의 (bookSlice.js)

const bookSlice = createSlice({
  name: 'book',
  initialState: {
    genre: '',
    recommendations: [],
  },
  reducers: {
    setGenre: (state, action) => {
      state.genre = action.payload;
    },
    setRecommendations: (state, action) => {
      state.recommendations = action.payload;
    },
  },
});

🔹 스토어 설정 (store.js)

const store = configureStore({
  reducer: {
    book: bookReducer,
  },
});

🔹 React에서 Redux 사용

const genre = useSelector((state) => state.book.genre);
const dispatch = useDispatch();

<input
  value={genre}
  onChange={(e) => dispatch(setGenre(e.target.value))}
/>

6️⃣ Spring Boot 백엔드 구성

🔹 컨트롤러 예시

@RestController
@CrossOrigin(origins = "*")
public class BookController {

    @GetMapping("/recommend")
    public List<String> recommend(@RequestParam String genre) {
        if (genre.equalsIgnoreCase("fantasy")) {
            return List.of("해리포터", "반지의 제왕");
        } else {
            return List.of("추천 없음");
        }
    }
}

7️⃣ 전체 작동 순서 요약 (Redux 흐름 중심)

사용자 입력 → dispatch(setGenre("fantasy"))
        ↓
→ reducer가 상태 변경 (genre 업데이트)
        ↓
→ store의 상태 변경됨
        ↓
→ useSelector로 연결된 컴포넌트가 자동 업데이트
        ↓
→ 추천 버튼 클릭 시 axios로 서버 요청
        ↓
→ Spring Boot에서 추천 도서 반환
        ↓
→ dispatch(setRecommendations([...]))
        ↓
→ 추천 목록 렌더링
728x90
반응형
저작자표시 변경금지 (새창열림)