20250210 복습1

📌 React + Spring 프로젝트 학습 정리

1️⃣ 기본 개념

• 자바 + HTML → 스프링(Spring)
• React + Spring으로 프로젝트 개발
• 3월 4일까지 Java 학습 완료 후 Python 공부 시작

---

2️⃣ 백엔드와 프론트엔드 연결 방식

• 과거에는 백엔드(JSP, 스프링 등) 에서 HTML을 직접 만들어 클라이언트에 전송 → 속도가 느림.
• 최근에는 백엔드가 데이터를 JSON 형식으로 전달하고, 프론트엔드(React, Angular, Vue)가 데이터를 받아 화면을 만듦.
• 이유:
  • 모바일 환경에서는 클라이언트에서 데이터를 처리하는 것이 속도가 빠름.
  • 서버 부담이 줄고, 프론트엔드 UI를 더 유연하게 개발 가능.

---

3️⃣ React 프로젝트 환경 설정

• Node.js 설치 위치: C:\Program Files\nodejs
• CMD (명령 프롬프트) → 과거 DOS(도스)라고 불림.
• React 기본 포트: 3000
• 프로젝트 폴더 구조
  1. d:/reactapp/ 폴더 선택 후 Visual Studio Code에서 열기.
  2. src/ 폴더 내에 example/ 폴더 생성.
  3. import App from './App'; → App.js를 원하는 파일명으로 변경 가능.
  4. 예시:

     import App from './example/App_arrow_function';

---

4️⃣ React에서 백엔드(Spring)와 연동

• Spring(JSP) 백엔드 → JSON 데이터 반환
• React 프론트엔드 → JSON 데이터를 받아서 화면에 렌더링
• 20페이지부터 Spring과 DB 연동 학습 예정.

---

5️⃣ 개발 중 화면 갱신이 안 될 때 해결법

• 해결 방법:
  • 터미널에서 Ctrl + C 입력 후 다시 실행.

---

📅 이번 주 목표

• 19페이지까지 학습
• 이후 Spring과 연동(DB 포함) 학습 시작

📌 이제 React + Spring을 함께 다루면서 백엔드와 프론트엔드의 역할을 이해하고 연결하는 것이 핵심! 🚀
추가 질문 있으면 언제든 물어봐! 😊