JavaScript/React Session 인증과 CSRF (1) - 프로젝트 설정

https://cloud-dragon.tistory.com/5

Python/DjangoDjango DRF Session 인증과 CSRF (4) - 프로필/회원 탈퇴

위 포스트에서 작성한 Django 기반의 REST API 서버와 통신할 Client를 React.js 기반으로 구현할 계획이다.

 

프로젝트 설정

1. React 프로젝트 생성

이번 리액트 프로젝트는 CRA(create-react-app)이 아닌 새롭게 등장한 Vite라는 빌드 도구를 사용하였다.

먼저 다음의 명령어를 통해 react 프로젝트를 생성한다.

npm create vite@latest

 

 

2. 라이브러리 

"dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "axios": "^1.4.0",
    "logger": "^0.0.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-cookie": "^4.1.1",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.0",
    "react-router-dom": "^6.13.0",
    "redux-thunk": "^2.4.2"
  },

1. reduxjs/toolkit, react-redux, redux-thunk

•  이번 프로젝트에서는 상태관리를 전역 상태 관리 라이브러리인 redux를 이용하여 하기로 하였다. redux를 더욱 쉽게 다루기 위해 나온 reduxjs/toolkit이라는 라이브러리를 추가로 사용 사용하였다.
• 또한 비동기 통신에 따른 데이터 관리를 리덕스와 연동하기 위해 관련 미들웨어인 redux-thunk를 사용하였다.

2. axios

• back-end 와의 통신을 위한 라이브러리

3. react-cookie

• 쿠키에 접근하기 위한 라이브러리

4. react-router-dom

• 홈페이지의 라우팅을 담당할 라이브러리이다. 가장 최근 버젼인 v6를 사용하였다.

5. prop-types

• 현재 TypeScript가 아닌 JavaScript를 사용중이기 때문에 props에 대한 type checking을 해당 라이브러리를 사용하여 진행하였다. 

 

 

[github 주소] https://github.com/yongun2/React-Session-Authentication-And-CSRF

yongun2/React-Session-Authentication-And-CSRF