STUDY/React (52) 썸네일형 리스트형 React | JWT 안전하게 저장하기 (localStorage 사용 X) (3) 지난글까지 완료한 상태라면, 다른 탭에서 로그아웃을 하더라도 모든 탭이 동시에 로그아웃이 되지만.. 다른 탭을 생성하면 또 로그인을 해야한다. 이번 글에서는 이 문제를 해결한다! Refresh Token을 Cookie에 저장! 최초 로그인 시 함께 발급되는 refresh_token을 쿠키에 저장한다. 우선, 리액트에서 쿠키를 편하게 사용하려면 다른 라이브러리를 추가해야 한다. 아니면 documtn.cookie로 생성하고, 삭제하고 해야 하는데 굉장히 번거로운 작업이다.. 물론 직접 해도 된다. universal-cookie를 사용할 것이다. react-cookie를 사용해도 되긴 하지만, 자바스크립트 내에서만 사용할 것이므로.. npm install universal-cookie auth.js 수정 우선.. React | JWT 안전하게 저장하기 (localStorage 사용 X) (2) Home 컴포넌트 작성 Home.jsx는 /경로 (기본 경로)로 접근하면 나타나는 페이지다. 일단 /login과 /hello링크를 생성했다. /login은 인증되지 않아도 접근이 가능하다 /hello는 인증된 상태여야만 접근이 가능하다 -> PrivateRoute처리하여 인증되지 않은 상태라면 /login으로 바로 이동시킴 import React from 'react'; import { Link } from 'react-router-dom'; export default function Home() { return ( Home Sweet Home 🏠 로그인 여긴 로그인을 해야 갈 수 있어요 ); } 지금은 로그인하지 않았기 때문에 (authenticated = false) 둘 중 어떤 것을 눌러도 모두 로.. React | JWT 안전하게 저장하기 (localStorage 사용 X) (1) JWT는 어디에 저장해야 할까 이전 글에서 알아 보았듯, WebStorage(LocalStorage 혹은 SessionStorage)에 저장하면 안 된다! 그러다가 이 가이드를 발견했고, 이대로 따라해보기로 했다. 가이드는 아래와 같은 방식으로 구현된다. 서버는 GraphQL이다. http통신으로 JWT를 받는다. LocalStorage에 JWT를 저장하지 않는다. (중요) JWT는 In Memory에 저장한다. -> 이 가이드는 in memory방식의 문제점을 해결해준다..! (매우 중요) 서버에서 refresh_token을 제공해야 한다. (제일 중요) 탭을 새로 생성해도, 다른 탭에서 로그아웃을 해도 정상적으로 처리되도록 만든다! 그리고 이 가이드와 내가 한 방식의 다른점..! 서버가 없음 -> 서.. React | TypeScript 반복문으로 컴포넌트 렌더 ( pass props ) map 메서드로 렌더링 하는 법.. 타입스크립트 어렵다 부모 컴포넌트 Place라는 인터페이스를 선언한다. interface는 객체의 속성이나 함수의 파라미터 등에 대해 정의할 때 많이 사용된다. interface Place { name: string; addr: string; } Place를 placeList라는 Place배열을 타입으로 갖는 PlacesProps인터페이스를 선언했다. interface PlacesProps { placeList: Place[]; } 그리고 Places컴포넌트를 선언하는데, 함수형 컴포넌트로 선언해주었고, 인자값으로 PlacesProps를 받아 그 안의 속성인 placeList를 비구조화 할당으로 꺼낸다. placeList는 배열이므로 map을 이용해 반복하여 Place.. React | TypeScript로 시작하기 create-react-app create-react-app을 이용하면 된다. --template typescript만 붙여서 생성하면 끝! npm create-react-app [projectname] --template typescriptprops 전달하기 리스트를 전달해보자.. const placeList: Array = [ { name: '어딘가', addr: '서울특별시 광진구 구천면로 20', }, ]; function App() { return ( ); }그리고 Map컴포넌트에서는 props 타입을 제네릭으로 넣어서 사용한다. type MapProps = { placeList: Array; }; const Map: React.FC = ({placeList}) =>.. React | Recoil 겉핥기 아래 영상을 보고 정리한 내용위주로 포스팅 해본다. 정말 재미있으니 영상을 보며 코드 따라쳐보기 추천박습니다. Recoil: 왕위를 계승하는 중입니다 (새로운 React 상태 관리 라이브러리) NAVER Engineering | 김태곤 - Recoil: 왕위를 계승하는 중입니다 (새로운 React 상태 관리 라이브러리) tv.naver.com Recoil? Recoil은 페이스북 개발팀에서 만든 리액트 전용 상태 관리 라이브러리로, 상태관리를 가장 '리액트스럽게' 할 수 있도록 한다! 기존의 React 상태관리는 보통 Redux나 Mobx같은 외부 라이브러리를 사용하거나, React에서 기본적으로 제공하는 ContextAPI를 사용한다. 세 가지 모두 나쁘다고 할 순 없지만 사용 방법이 복잡하고, 비동기.. React | Context API 알아보기 Context API는 컴포넌트가 중첩되어 있는 상황에서도 쉽게 속성값(props)를 전달할 수 있게 해준다. 상위 컴포넌트에서 하위에 있는 모든 컴포넌트로 직접 전달이 되니까 직접 반복해서 속성값을 넘겨주지 않아도 됨! 1. Context 객체 생성 createContext 함수를 이용해 콘텍스트 객체를 생성할 수 있다. createContext에 인자값으로 defaultValue를 전달 import React, { createContext } from "react"; const ContextValue = createContext(""); 2. Provider 컴포넌트로 데이터 전달 Provider를 이용해 데이터를 전달한다. 데이터를 전달받을 컴포넌트는 상위 컴포넌트(Provider 컴포넌트)로 감싸.. React | useRef로 DOM 선택하기 📌ref는 특정 DOM을 선택할 때 사용한다. 📌함수형 컴포넌트에서는 useRef Hook을 사용한다. 📌클래스형 컴포넌트에서는 React.createRef 함수를 사용한다. 📌Ref는 서드파티 DOM 라이브러리를 사용할 때, 애니메이션을 직접적으로 실행시킬 때와 같은 상황에서 사용한다. useRef를 사용하기 위해 Import import React, { useRef, useState } from "react"; 버튼을 클릭하면 input에 focus가 잡힌다! ✔️useRef()를 사용해서 ref객체를 만든다 ✔️ref객체의 current를 통해 DOM에 접근할 수 있다 ✔️ref={nameInput}을 이용해 ref객체를 전달한 것 function InputSample() { const [name,.. 이전 1 2 3 4 5 ··· 7 다음
