로그인3

• 

  [NextJS + Express] Passport-LocalStarategy를 통한 로그인 1. 무엇을 하려는가? 나는 로그인 기능을 만들고자 했다. 로그인에서 중요한 점은 인증이다. 현재에는 session 기반 인증 JWT, OAUTH 등 많은 인증 방법이 있지만 나는 node로 백엔드를 개발 중이어서 passport의 localStartegy를 이용하여 session과 cookie기반 인증을 하려고 했다. 인증이란 사용자가 어떠한 작업을 할 때 이 사용자가 이 작업을 할 자격이 있는지에 대한 확인이라고 생각했다. 만약 포스트를 업로드하는 기능을 이용하려면 우리는 이 사용자가 우리의 사이트의 회원인지 검사해야하고 현재 로그인 중인지 검사해야한다. 이 때 인증을 하는 방법은 로그인 시 서버가 브라우저에게 쿠키를 발급해주고 요청 때마다 이 발급받은 쿠키를 요청과 함께 보내 서버가 자신이 발급한 .. back-end/express.js 2022. 7. 15.

• 

  리액트 로그인 패턴 (with Redux, Axios) 리액트로 로그인 기능을 구현하는 패턴을 알아보겠다. 1. 우선 로그인 기능을 구현하는 feature폴더의 login.tsx 2. feature안에서 실질적으로 값들을 입력받아 async함수로 api를 호출한 값을 토대로 데이터를 가공하는 useLoginForm 커스텀 훅 3. 유저에 관한 서비스이므로 AuthService 클래스에 존재하는 login 함수 = 실제로 axios를 통해 api를 호출하는 함수 4. Redux를 이용한 상태관리를 할 것이므로 api로 받아온 데이터의 값에 따라 상태를 변경해 줄 리듀서와 acion들 5. Redux-saga를 이용한 middleware 1. feature 폴더의 login.tsx에는 로그인에 관련된 기능을 적어준다. 클라이언트가 직접 form에 id와 pass.. front-end/react 2022. 2. 18.

• 

  리액트 + MSW 리액트에서 개발을 할 때 실제 백엔드 개발자가 없다면 api를 호출하고 받아오는 과정을 테스트하기가 어렵다. 또한 여러 open api 들은 자신이 개발하고자 하는 데이터 구조가 아닐 가능성이 크다. 따라서 우리는 msw mocking service worker 라이브러리를 이용해서 mock data들을 만들고 서비스에서의 요청을 msw가 가로채서 실제 서버와 통신하는 것처럼 진행해 볼 것이다. 우선 msw를 이용하려면 package를 설치해 주어야한다. yarn이나 npm을 통해 설치할 수 있고 msw는 실제 서비스에서는 이용하지 않고 dev환경에서만 이용하므로 옵션을 준다. $ npm install msw --save-dev 2# or 3$ yarn add msw --dev 위의 명령을 통해 패키지를.. front-end/react 2022. 2. 15.