[리액트]백엔드와 프론트 연결

☑️ 스프링부트에서 Service ServiceIMpl

: Service = 코드 작성하는 데 있어 이런 서비스를 사용하겠다는 계약 정의

  어떤 메서드들(기능들)이 있어야 하는지,

  그 메서드들(기능들)이 어떤 역할을 하는지 정의

: ServiceImpl = 인터페이스로 작성한 Service의 실제 기능을 작성, 비슷한 기능을 각 서비스에 맞춰서 사용하겠다는 의미

  [예를들어 createUser = user 를 만들 것임  user를 만드는 도중 관리자 - 소비자를 나눠서 만들 것]

 -> 각 각 넣어줄 때 아래와 같이 코드 구현 -> 똑같은 기능을 사용

@Override
// 만약에 판매자가 회원가입한 경우라면
 public int signup(String 판매자이름, String 회사명) {
      return mapper.signup(user)
   }
@Override
// 만약에 소비자가 회원가입한 경우라면
 public int signup(String 소비자이름, String 소비자나이) {
      return mapper.signup(user)
    }
  }

 

☑️ 스프링부트에서 Controller

@RestController : SpringBoot 어플리케이션(폴더 안)에서 html코드를 작성해주는 것이 아니라

    React나 외부로 url  주소 공유할 때 사용

@Request = DB에 특정 값이 있는지, 또는 값을 넣겠다, 값을 수정하겠다 요청

@RequestParam = 특정 값만 선택해서 요청, 특정 값을 변환해서 요청

@RequestBody = 프론트에서 작성하고 Body로 전달해주는 모든 값을 넣어주겠다.

                              우리가 사용하는 React 기준,  body : JSON.stringify(input값들)

                               input값들에 DB로 넣어주겠다는 모든 값을 DB에 넣겠다 선언

@Response = DB에서 전달받은 값을 프론트에 전달할 때 사용

@ResponseParam = 특정 값만 프론트에 전달하겠다.

@ResponseBody = HTMl 에서 body로 보여줄 모든 값을 전달

 

✅ 404에러코드

스프링부트 @PostMapping 주소와 리액트 fetch주소가 상이할 때 404에러가 뜸

[스프링부트]

[리액트]

 

▶ 스프링부트에는 u를 소문자로 적었는데 리액트에는 u를 대문자로 찍어서 발생한 오류

 

✅ 415 에러코드

리액트 실행하여 콘솔창에서 에러 코드 확인 시 415에러코드가 노출 됨

[수정전]

headers : {"Content-Type" : "appliation/json"},

[수정후]

headers : {"Content-Type" : "application/json"},

-> application에서 t가 빠짐

 

✅ 스프링부트 실행 시 화이트 에러 페이지 내 ' No static resource'

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Tue Jul 16 11:16:34 KST 2024
There was an unexpected error (type=Not Found, status=404).
No static resource .
org.springframework.web.servlet.resource.NoResourceFoundException: No static resource .

▶ html이 없어서 발생한 오류