본문 바로가기

전체 글105

[React] 로그인 Refresh Token 처리 Introduction 로그인에서 활용하는 refresh token에 대해 알아보고, 서버로부터 받은 refresh token과 access token의 처리 과정을 알아보려 한다. Refresh Token이란? 기존 JWT를 이용한 방식은 보안에 취약하다. token 값만 탈취하면 충분히 악용가능하므로 이러한 단점을 보완하기 위해 refresh token이 등장하였다. access token(JWT) 만 존재했던 기존의 방식과 다르게, access token + refresh token 두 가지 토큰을 이용하여 접근 권한을 따진다. access token은 refresh token보다 짧은 유효기간을 가진다. 위 그림의 형태로 access token과 refresh token을 활용한다. 먼저 로그인을.. 2023. 2. 22.
[React] ReactPortal 이용하여 modal 창 생성 Introduction ReactDOM 에서 제공하는 createPortal 메소드를 사용하여 모달창을 생성하는 법을 알아보려 한다. Portals란? Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다. 즉, cildren 이 부모 컴포넌트의 DOM 계층 구조에 종속되지 않도록 컴포넌트를 렌더링 할 수 있다는 것이다. 이런 특성을 이용하여 독립적인 모달창을 생성할 수 있다. 기본 형태 ReactDOM.createPortal(child, container) 1. 첫 번째 인자 렌더링하려는 children 2. 두 번째 인자 이동시키려는 DOM 구현 방법 ① 모달 창이 구현될 부분에 태그를 작성한다. ② Portal을 생성해주고, 그 안에 해당 컴포넌트를 .. 2023. 2. 19.
[html & css] 드래그 방지 -webkit- : 크롬, 사파리 -moz- : 파이어폭스 -ms- : 익스플로러 -o- : 오페라 /* 드래그 방지 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 2023. 2. 19.
[React] useNavigate로 데이터 전달 Introduction 아이디 찾기를 구현하던 중, 찾은 아이디를 가지고 로그인 창으로 돌아가는 것을 구현해보고 싶었다. 그래서 이 포스트에서는 useNavigate를 사용할 때, 이동할 페이지로 데이터를 전달할 방법에 대해 알아보려 한다. ① useNavigate, useLocation를 사용하기 위해 react-router-dom을 설치 npm install react-router-dom //react-router-dom 에서 useNavigate 를 import import { useNavigate } from 'react-router-dom'; //useNavigate 사용 const navigate = useNavigate(); ② navigate에 객체 형태로 데이터 전달 // id를 찾은 후.. 2023. 2. 16.
[JavaScript] 제너레이터와 async/await 제너레이터와 async/await[Javascript] 비동기, Promise, async, await 확실하게 이해하기제너레이터란?코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수 함수제너레이터와 일반 함수의 차이제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.제너레이터 함수의 정의function* 키워드로 선언하나 이상의 yield 표현식을 포함// 제너레이터 함수 선언문function* genDecFunc() { yield 1;}//제너레이터 함수 표현식const genExpFunc = function* () { yield 1;.. 2023. 2. 16.
[JavaScript] DOM 이벤트 이벤트DOM 요소의 기본 동작 중단preventDefault 메서드 이용 go preventDefault 메서드 사용 시 이벤트 전파 방지stopPropagation 메서드 Button 1 Button 2 Button 3 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지이벤트 핸들러 어트리뷰트 방식 Click me 일반 함수로서 호출되는 함수 내부의 this 는 전역 객체 window를 가리킴 0 0 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 this 는 이벤트를 바인딩한 DOM 요소를 가리킴(이벤트 핸들러 프로퍼티 방식과 동일) .. 2023. 2. 16.

티스토리툴바