React

Node.js와 NPM 설치하기Node.js는 javascript로 네트워크 어플리케이션을 개발할 수 있게 해주는 환경https://nodejs.org/en 해당 사이트에 접속해 Node.js를 설치해준다.(최신 버전보다는 왼쪽의 안정적이고 신뢰도 높은 버전

리액트 앱에 firebase를 추가하려면 우선 firebase 프로젝트를 만들고 해당 프로젝트에 앱을 등록해야함https://console.firebase.google.com/ 해당 링크로 들어가 '프로젝트 만들기'버튼을 클릭하여 프로젝트를 생성한다. 파이어베

리액트 라우터란?사용자가 입력한 주소를 감지하는 역할로 사용자가 요청한 각각의 URL에 따라 선택된 페이지를 렌더링 해주는 라이브러리MPA 방식에서는 여러 페이지를 분리해두고 페이지 간의 이동으로 이 라우트 시스템을 구축을 하지만, 그러나 SPA 방식의 리액트에서 라우

React-Redux는 React용 공식 Redux UI 바인딩 라이브러리가장 많이 사용하는 상태 관리 라이브러리로 컴포넌트끼리 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 쉽게 상태값을 전달하거나 업데이트할 수 있음 기존 리액트에서는 여러 컴포넌트에 걸쳐 있는

4가지 dependency 모두 다운로드 받기redux-promise, redux-thunk는 미들웨어redux store의 state을 변경하고 싶으면, dispatch 호출과 액션을 통해 변경해야하는데 action은 객체 형식이어야함. 스토어에서 항상 객체 형식으로

React Hook Form 라이브러리는 React에서 폼을 쉽게 관리하기 위한 라이브러리Reack Hook Form은 React hooks를 사용하여 폼을 처리하기 때문에 사용하기 간단한 편이며 폼을 처리하는데 필요한 기능을 쉽게 구현할 수 있음React Hook F

https://react-icons.github.io/react-icons 함수형 컴포넌트에서 react icons에 있는 아이콘들을 사용할때 CSS 속성을 styled component로 줄 수 있음태그에 className 주고 상위태그에 nesting 하는

서버 api 연동 전, 가짜 데이터로 리액트 기능 테스트를 위해 json-server를 사용하려 한다. 아주 짧은 시간에 REST API 를 구축해주는 라이브러리먼저, json-sever를 글로벌 설치한다.설치가 완료되면, 프로젝트 루트 디렉토리에 fake-server

이번 펠로우쉽 프로젝트에서 jwt 인증을 통한 로그인 기능을 구현해야 하기 때문에 프론트에서는 react-cookie를 이용해 쿠키에 accesstoken을 저장하여 관리하고, 로그인 인증을 수행하려 한다.Cookie를 사용하기 위해 CookiesProvider를 im

서버로부터 다음과 같은 jwt를 발급받은 후, jwt에 담긴 사용자 정보를 프론트 측에서 처리하여 알아내야 했다.base-64라이브러리를 이용해 디코딩하여 userId를 알아낸다.base64 설치토큰 자르기jwt 토큰은 header.payload.signature로 구

프론트엔드에서는 서버가 보내주는 토큰을 받고, 저장한 후 인증 요청이 필요할 때 서버에 토큰을 보낼 수 있도록 해야한다.AccessToken은 인증에 직접적으로 사용되는 토큰이기 때문에 외부에 노출되지 않도록 코드 내의 변수에 저장코드 내의 변수로 저장RefreshTo