All Night Coding

react-transition-group이란? 리액트에서 컴포넌트가 DOM에 마운트되고 언마운팅되는 상황에서 애니메이션 효과를 사용할 수 있도록 react 팀에서 자체적으로 제공하는 라이브러리이다. 즉, 페이지 전환 애니메이션을 만들고자 할 때 아주 유용한 라이브러리라고 할 수 있다. 사용법은 간단하다. 먼저 react-transition-group을 설치해 준다. # npm npm install react-transition-group --save # yarn yarn add react-transition-group App.js 상단에 react-transition-group을 import한다. import { TransitionGroup, CSSTransition } from "react-transi..

지난 시간에 작성했던 내용을 토대로 로그인 기능을 완성해보고자 한다. 저번 시간에 내가 구현했던 로그인 방식은, axios로 jwt access Token을 서버로부터 받아오기까지만 했다. 하지만 유저 데이터에 접근하는 등의 여러가지 작업을 하기 위해서는 access Token을 헤더로 넘겨줘야만 작동하도록 db가 설계되었기 때문에, 서버로부터 받아온 로그인 상태를 저장하고 react 내에서 상태관리를 해주어야 한다. 그것을 위해 redux라는 react의 상태관리 라이브러리를 사용해보겠다. 설치방법은 간단하다. 나는 yarn을 사용중이기 때문에 yarn을 이용해 설치를 해보겠다. yarn add redux react-redux 먼저 간단하게 로그인 상태가 맞는지, 아닌지를 저장하는 변수를 redux 내..

저번 시간에 포스팅을 올린 뒤 꽤나 많은 시간이 흘렀다.. 블로그에 포스팅 해야지, 해야지 하다가 몇 달이 지나버렸고..... 올해가 끝나기 전에 내가 공부했던 내용들을 다 정리해야 마음이 편할 것 같아서, 늦게나마 포스팅을 해본다. 로그인을 하는 로직은 생각보다 간단하다. 서버에 로그인 요청을 보낸 뒤, 아이디와 비밀번호가 일치한다면 서버에서 보내주는 access token 값을 받아와서 로그인 상태로 바꾸어준다. 또한 일정 시간마다 refresh token을 받아와 access token을 재발급 한다. 이게 끝! 저번 시간에 설치한 axios를 활용하면 구현이 가능하다. function onLogin() { const JWT_EXPIRY_TIME = 24 * 3600 * 1000; return ( ..

저번 포스팅에서 useState로 정의한 변수들을 이벤트 핸들링 함수를 통해 값을 변경하고, useNavigate hook을 이용해 다음 페이지로 전달하는 기능까지 만들어 보았다. 이제 본격적으로 서버와 통신을 해야 하는데, 이때 사용해야 할 것이 axios이다. axios란? Promise API를 이용한 비동기 HTTP 라이브러리이고, React에서 ajax를 통해 서버와 통신할 일이 있을 때 주로 사용하는 라이브러리이다. 처음엔 axios에 대해서는 아예 무지한 상태였다. 이내 react에서 서버와 통신하기 위해서는 axios를 사용한다는 것을 알게 되었고, 이를 활용해 회원가입 기능을 만들게 되었다. 먼저 axios를 설치해야 한다. 나는 yarn을 사용하고 있기 때문에 다음과 같은 명령어를 실행..

최근 진행 중인 토이프로젝트에서 회원가입 기능을 만들 일이 생겼다. 프론트엔드는 React를, 백엔드는 Spring Boot를 이용한 프로젝트이다. 페이지를 처음 설계할 때, 회원가입 페이지를 총 3개로 분리하기로 했다. 첫번째 페이지에서는 아이디, 비밀번호, 닉네임을 입력받기로 하였고, 두번째 페이지에서는 이메일, 전화번호, 관심 분야, 자기소개를 입력받아서 서버에 전달하기로 했다. 세번째 페이지는 두번째 페이지에서 서버에 데이터 전달이 완료되면 회원가입이 완료됐다는 메시지와 함께, 메인 화면으로 페이지를 이동시키는 기능을 담기로 했다. 먼저 첫번째 페이지에서 useState로 사용할 변수들을 저장했다. const [userID, setId] = useState(""); const [password, ..