만약 회원 가입을 위해 리액트에서 액션을 디스패치 한다면 data 형식은 어떻게 정해지나요?

Question


리액트에서 회원 가입이나 포스팅을 위한 post 액션을 
디스패치 할경우 data로 뭘 날려야할지 자바 백엔드와 
어떻게 협의하는지 궁금합니다.

예를 들어 서비스 계층에서 아래와 같이 user 정보를
전달받아 다음과 같이 저장할 경우

public User save(User user) {
      if (user.getId() == null) {
          user.setId(++usersCount);
      }
      users.add(user);
      return user;
  }

액션 요청할때 data에 무엇이 설정되어야 하는지 어떻게 협의되는지 문서를 통해 알려주는지 메신저를 이용하는지 아니면 타입 추론 같은 기능들을 이용하는지 궁금합니다.

    const onSubmitForm = useCallback(() => {
        console.log("게시글 추가 submit click !!");
        console.log("text 확인 : ", text);
        dispatch({
            type: ADD_POST_REQUEST,
            data: {
                text,
            },
        });
    }, [text]);

Answer

안녕하세요, 이도원입니다.

React와 같이 외부 Front-end 기술을 이용해서 Spring boot를 사용하기 위해서는 말씀하신 data의 포맷을 맞춰서 전달할 필요가 있습니다. User라는 빈에 name, age, ssn 등의 필드가 존재한다면, React에서 JSON 포맷으로 {"name":"test", "age":20, "ssn":"111111-2222222"} 들의 포맷으로 전달하시면 됩니다. 그리고, Spring Boot에서는 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있기 때문에, CoreRegistry 와 같은 클래스를 이용하여 CORS 설정을 허용해 주시면 됩니다.

감사합니다.

Answer

react에서 데이터 입력 액션을 디스패치할때 첨부해야 하는 데이터의 형식과 다른 포트 서버간의 통신 에러 방지 방법에 대해서 알려주셔서 감사합니다.

질문: React 등에서 java로 입력 데이터 전달 하는 방법:
답변: JSON 포맷으로 {"name":"test", "age":20, "ssn":"111111-2222222"} 들의 포맷으로 전달

질문: cors 에러 방지 방법(서버간 다른 포트로 인한 에러 문제 해결 방법):
답변: Spring Boot에서는 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있기 때문에,
CoreRegistry 와 같은 클래스를 이용하여 CORS 설정을 허용

terecal

만약 회원 가입을 위해 리액트에서 액션을 디스패치 한다면 data 형식은 어떻게 정해지나요?

질문: React 등에서 java로 입력 데이터 전달 하는 방법:답변: JSON 포맷으로 {"name":"test", "age":20, "ssn":"111111-2222222"} 들의 포맷으로 전달

질문: cors 에러 방지 방법(서버간 다른 포트로 인한 에러 문제 해결 방법):답변: Spring Boot에서는 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있기 때문에, CoreRegistry 와 같은 클래스를 이용하여 CORS 설정을 허용

이 글과 비슷한 Q&A

섹션6. 자동 구성 정보 파일 분리 강의에서 질문 있습니다

13분 11초에서 최근 파일 보는 단축키

Repository Test에 관해서 질문 드립니다.

DTO 폴더는 BusinessLayer로 옮겼는데, using문은 HelloASP로 계속하나요?

질문: React 등에서 java로 입력 데이터 전달 하는 방법:
답변: JSON 포맷으로 {"name":"test", "age":20, "ssn":"111111-2222222"} 들의 포맷으로 전달

질문: cors 에러 방지 방법(서버간 다른 포트로 인한 에러 문제 해결 방법):
답변: Spring Boot에서는 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있기 때문에,
CoreRegistry 와 같은 클래스를 이용하여 CORS 설정을 허용