[React] axios 요청시 .catch에서 에러 응답 열기

서버에서 보내준 에러메시지를 클라이언트에서 띄워야 하는 상황이 생겼다. 항상 에러메시지는 직접 작성하기만 해서 에러 응답을 어떻게 받는지 몰랐다. 개발자도구에서 까보니 응답은 이렇게 온다. {"status":0,"message":null,"fieldErrors":[{"field":"artistName","rejectedValue":"","reason":"공백일 수 없습니다"}],"violationErrors":null} 서버에서 유효성검사와 중복검사에 대한 실패 응답을 에러와 함께 상황에 따라 바꾸어서 보내기 때문에 어떤 메시지가 올지 모르는 클라이언트쪽에서는 에러메시지를 직접 작성하지 못하고 에러 응답에서 꺼내서 화면에 띄워줘야 한다. 뭐라고 검색해야 할지 몰라 조금 당황했지만 찾고보니 간단했다. //..

• format_list_bulleted SW공부/React
• · 2023. 7. 17.
• textsms

[React] Redux toolkit Reducers에서 배열 변경하는 방법

기존 배열(state)을 새 배열(action)로 교체해야 하는데 처음엔 아래 처럼 해보기도 하고 그냥 action.payload만도 넣어보고 [...action.payload] 이렇게도 넣어보고 했지만... 에러는 안 나지만 작동이 안 됐다. 결국 공식 사이트에서 해결 방법 찾음... 역시 모든 답은 공식 사이트에. 리액트에서는 불변성이 중요한데 배열을 사용할 때에는 카피본을 만들어서 수정해야한다 정도로 가볍게만 알고있다가 리덕스툴킷에서 제대로 당한거다. One of the primary rules of Redux is that our reducers are never allowed to mutate the original / current state values! -https://redux-toolk..

• format_list_bulleted SW공부/React
• · 2023. 6. 22.
• textsms

[React] Proxy

개발을 하다가 서버에서 api를 받아와야 할 때가 있다. 이 때 브라우저의 주소와 api의 주소가 일치하지 않으면 데이터를 받아올 수가 없다. 이는 CORS를 설정해 해결해야 하는데 이런 문제가 발생하는 이유는 보안 때문이다. 소중한 라이브 데이터의 유출을 막기 위해 CORS로 허가되지 않은 도메인에서는 데이터를 받을 수가 없도록 되어있다. 이런 문제를 임시로 해결할 수 있는 방법이 proxy를 이용하는 것인데, 중요한 것은 proxy는 주소를 우회하여 데이터를 받아오는 방식이라 개발할 때에만 사용할 수 있고 배포 환경에서는 보안상의 이유 등으로 사용할 수 없다. 배포 시에는 결국 서버쪽 사람들과의 소통을 통해 해결해야 하는 것. proxy의 흐름은 이렇다. 브라우저에서 앱을 통해 데이터를 요청하고, 앱..

• format_list_bulleted SW공부/React
• · 2023. 6. 7.
• textsms

[React] Automatic Batching

What is batching? Batching is when React groups multiple state updates into a single re-render for better performance. 출처: https://github.com/reactwg/react-18/discussions/21 Automatic Batching 리액트18에서부터 추가된 기능이다. 하나의 이벤트 내에 여러개의 상태 변화가 있을 경우, 이들을 모아 한 번의 렌더링으로 처리한다. 이로 인해 불필요한 렌더링을 줄일 수 있다. 하나의 이벤트 안에 같은 상태 변화를 여러번 진행하게 되면, 내부에서는 코드가 순서대로 돌아가더라도 한 번의 렌더링으로 마지막 변화밖에 보여주지 않기 때문에, 하나의 이벤트 안에서 상태변화를..

• format_list_bulleted SW공부/React
• · 2023. 4. 19.
• textsms

[React] Router 설치

react 사용 중 router 필요한 경우 설치 방법: 터미널 $ npm install react-router-dom //버전 6 설치 $ npm install react-router-dom@6 index.js 을 로 감싸기 root.render( ); import 해오기 import { BrowserRouter } from "react-router-dom";

• format_list_bulleted SW공부/React
• · 2023. 4. 9.
• textsms