프론트엔드와 백엔드 서비스 통합

1) 리액트에서 렌더링이란?

 

ReactDOM에서 컴포넌트의 state 변화를 감지하고

변경된 부분의 HTML을 HTML DOM 트리에 업데이트하여

변경된 결과를 눈으로 확인할 수 있는 것

 

2) Mounting

ReactDOM트리가 존재하지 않는 상태에서

리액트가 처음으로 각 컴포넌트의 render() 함수를 call하여 자신의 DOM트리를 구성

이 과정에서 constructor와 render() 함수 call

마운팅이 마치면 componentDidMount 함수 호출

 

3) 목표

componentDidMount 함수에 백엔드 API 콜 부분 구현

* 왜 componentDidMount에서 API를 콜할까?

 - 컴포넌트의 속성이 아직 준비되지 않은 상태일 수 있음으로

   이 과정이 다 마친(마운팅이 끝난) componentDidMount에서 호출함

 

App 컴포넌트에서

  componentDidMount(){
    const requestOptions = {
      method : "GET",
      headers:{"Content-Type":"application/json"},
    };

    fetch("http://loacalhost:8081/todo",requestOptions)
      .then((response)=> response.json())
      .then(
        (response)=>{
        this.setState({item:response.data,});
        },
        (error)=>{
          this.setState({error});
        }
      );
  }

 

처음에는 "엥? 이게 뭔데? " 라는 생각이 들었지만, 차근차근 공부해보면

fetch : ajax, 즉 비동기적으로 자바스크립트를 동작하는 기술의 react 버전이라고 생각하면 된다.

         다시 말해, 새로고침 없이 동작하는 것!

requestOptions에 method와 Content-Type을 지정하고

이를 http://localhost:8081/todo 에 response.json을 전달하고 요청한다.

응답이 성공적이면 state의 item에 data를 저장하고,

실패(에러)일 경우 state에 error를 저장한다.

 

하지만 이런 설정에도 다음과 같은 에러가 발생하는데....

 

이는 CORS 정책과 관련이 있는 에러이다.

 

4) CORS : Cross-Origin Resource Sharing

처음 리소스를 제공한 도메인(Origin)이 현재 요청하려는 도메인과 다르더라도 요청을 허락해주는 웹 보안 방침이다.

이에 대한 설정을 하지 않으면, 리소스 제공 도메인과 요청 도메인이 다른 경우 거절당한다.

따라서 현재 처음 리소스 제공 도메인은 localhost:3000, 요청하려는 도메인은 localhost:8081 이므로 거절당했다.

 

개발자도구의 네트워크 탭에서 살펴보면 당당히 CORS 오류라고 적혀있음을 발견할 수 있다.

먼저 프리플라이트를 options method로 보내고, 서버가 해당 파라미터를 포함한 요청을 보내도 되는지 응답을 받는다.

현재 상태는 403으로 forbbiden, 서버가 거부하고 있다.

 

이를 가능하게 하려면 백엔드에서 CORS 방침 설정이 필요하다

 

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration //스프링 빈으로 등록
public class WebMvcConfig implements WebMvcConfigurer{
	//유효시간 설정, 1시간
	private final long MAX_AGE_SECS = 3600;
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**") //모든 경로에 대해
		.allowedOrigins("http://localhost:3000") //origin이 http://localhost:3000인 경우
		//get, post, put, delete, patch, options 메서드 허용
		.allowedMethods("GET","POST","PUT","DELETE","PATCH","OPTIONS")
		//모든 헤더 허용
		.allowedHeaders("*")
		//인증 관련 정보 허용
		.allowCredentials(true)
		//유효시간 설정
		.maxAge(MAX_AGE_SECS);
	}
}

 

CROS 방침 설정 이후 정상적으로 작동하고 있다.

5) Fetch

 이전에 간단하게 알아보았던 fetch에 대해 알아보자.

 1. fetch 메서드는 Promise를 리턴한다.

   Promise : 콜백 지옥을 예방하기 위해, 함수를 실행 한 뒤 Promise 오브젝트에 명시된 사항을 실행주겠다는 약속이다.

   구성 요소로는 Pending, Resolve, Reject 상태이다.

  - Pending : 오퍼레이션 끝날때까지 대기 상태

  - Resolve: 성공적으로 끝나고 원하는 값을 전달

  - Reject : 오퍼레이션 중 에러가 발생

 

 2. fetch는 자바스크립트가 제공하는 메서드로 API 서버로 http 요청을 송수신하도록 도와준다.

  - fetch(url, options)  : 매개변수로 url (+options) 를 받는다.

 - .then(response => {

      //response 수신 시 하고 싶은 작업

   })

 - .catch(e =>{

     //에러가 발생 시 하고 싶은 작업

   })