react 7

React 비동기 통신 중 로딩 스피너 띄우기

React axios를 활용하여 api를 호출하면 자바스크립트의 ajax처럼 서버와 비동기 통신을 하는데, 딜레이 시간 동안 로딩 화면 혹은 로딩 모달을 띄우는 방법에 대해 소개드리겠습니다. 저는 비동기 통신 딜레이 시간 동안 스피너를 띄우기 위해 react-loading 라이브러리를 사용했습니다. yarn 혹은 npm 을 통해 다운 받아주시면 됩니다. yarn add react-loading 메시지와 함께 스피너를 화면 중앙에 띄워주기 위해 저는 아래와 같이 코드를 작성했습니다. 태그에 주목해주세요. Loader.js * 저 같은 경우에는 별도 페이지를 만들었지만 html과 css를 다룰줄 아시는 분들은 Spinner 모달을 만들고 loading state가 true일 때 해당 모달을 띄우는 방법을 사..

[DEV] 기록 2020.05.17

React axios 사용 예시

React에서 Rest Api를 쉽게 호출하기 위해 axios 라이브러리를 사용하게 되었습니다. 화면을 Component 단위로 나누었고 Api를 호출할 때마다 header에 인증 권한인 Authorization을 함께 넣어줘야 했는데 예시를 찾기 쉽지 않아 상당히 헤맸습니다. 따라서 간단한 사용 예시를 기록하고자 합니다. 현재 배워나가는 단계이기 때문에 비교적 최근에 나온 개념인 훅(hooks)를 최대한 활용했고 Class Component 방식이 아닌 함수형 Component 방식을 사용해 코드를 작성했습니다. 참고로, 프론트는 React, 백은 SpringBoot 프레임워크를 사용하여 개발했습니다. 저 같은 경우 메인 화면에 접근하기 전에 requestParam으로 전달된 토큰을 기반으로 인증 Ap..

[DEV] 기록 2020.04.23

React 자식 Component에서 부모 Component로 데이터 전달하는 방법

React로 화면을 개발할 때 기능별로 컴포넌트를 쪼개다보니 자식 Component에서 부모 Component로 데이터를 전달해야하는 경우가 생겼습니다. 이럴 경우 부모 Component에서 자식 Component로 데이터를 전달할 때는 props를 통해 전달하듯이, 부모 Component에서 useState 훅(Hook)을 통해 전달받을 데이터를 저장할 변수를 선언하고 props로 setter를 전달하면 됩니다. 자식 Component에서는 부모로부터 전달받은 setter를 통해 전달할 데이터를 저장해주면 부모 Component에서 해당 데이터를 전달받을 수 있습니다! 간단한 예시는 아래와 같습니다.

[DEV] 기록 2020.04.22

VsCode에서 Create-React-App build 디렉토리를 SpringBoot static 디렉토리에 복사하는 방법

우선, 저는 윈도우에서 개발을 하고 있습니다. 현재 Backend인 SpringBoot 서버는 STS에서 개발 중이고, Frontend인 React는 VsCode에서 개발 중입니다. 따라서, VSCode에서 빌드한 파일들을 바로 서버의 src/main/resources/static 내에 저장하기 위해 Create-React-App의 package.json을 아래와 같이 수정해줬습니다. React를 빌드할 때마다 파일명이 바뀌므로 우선 src/main/resources/static 내에 있는 파일들을 모두 삭제해주기 위해서 del 명령어를 먼저 실행했고 각각의 명령어는 아래와 같습니다. /F: 읽기 전용 파일을 강제 삭제합니다. /S: 지정된 파일을 모든 하위 디렉터리에서 삭제합니다. /Q: 삭제 확인 메..

[DEV] 기록 2020.04.21