넓게 보는 웹 프로젝트

이준석·2025년 11월 27일

Web_Development_Basics

목록 보기
14/14

백엔드와 프론트엔드 연결

클라이언트 -> Spring 서버 -> DB -> Spring 서버로 데이터가 넘어오고, 마지막으로 React 클라이언트로 이어지는 과정이다.

  1. 백엔드 실행(Firestore 연결 상태)
    -> Postman으로 확인 가능(원본 묶음)

  2. 프론트엔드 실행(터미널에 npm run dev)
    -> Postman으로 확인 가능(copy 묶음)
    -> 백엔드와 무관하게 얘는 mock server로 묶여있으니

여전히 새우깡, 고래밥임

서버에 요청이 들어가려면 클라이언트를 수정해야 함
endpoint.ts를 수정하자

이걸

한다.
Spring는 따로 조작을 안하면 8080에서 시작한다.

export const API_VASE_URL = "http://localhost:8080"

이러면

Firestore에 저장된 데이터가 출력된다.
(backend에서 firestore의 URL key 연동 -> backend 실행 -> localhost:8080을 가짐 -> frontend에 해당 URL 부여 -> 웹 페이지 작동)
-> 이걸 Postman에서 확인 가능(URL 값을 localhost:8080에 맞추면 됨

mock server은 여기서 하나 삭제해도 새로고침하면 그대로 유지됐는데, 이제는 삭제하고 새로고침하면 지워진 채 저장된다.

임시 저장이 아님

추가해도 마찬가지

새로고침해도 저장된다/.

profile
취업 준비

0개의 댓글