React

React와 JWT로 자동 로그인 구현하기

Introduction  개인 프로젝트로 X(구 트위터) 클론코딩을 진행 중 로그인을 구현하기 위해 찾아본 내용들을 정리해보고자 한다. 로그인을 구현하기 위해서는 쿠키, 세션, 헤더, JWT에 대한 선수 지식이 있으면 좋다. 일반적으로 로그인은 세션 혹은 JWT를 이용하여 구현하는데 나는 JWT와 aws lambda를 이용하여 자동 로그인을 구현하였다. 이 글에서 간략한 배경 지식과 JWT와 세션의 차이에 대해 설명해 보고자 한다.Preliminaries쿠키 쿠키는 사용자 정보를 저장하는 데 사용되는 작은 데이터 조각이다. 쿠키는 서버에서 브라우저에 정보를 저장하기 위해 쓴다. 쿠키는 토큰이나 세션과 대비되는 개념이 아니며 매번 반복되는 요청을 줄이기 위해 브라우저에 정보를 저장하여 서버에 통신할 때 쿠..

동적 라우팅을 이용한 게시글 별로 달라지는 URL 구현

서론 게시판이나 프로필 페이지 등을 개발하다보면 URL이 엄청 많이 필요한 경우가 있다. 물론 일일이 route를 이용해서 작성할 수도 있겠지만 페이지 수가 사용자들의 활동에 따라 더 늘어날 수도 있기에 근본적인 문제 해결 방법은 아니다. 이럴땐 URL의 특정 부분에 변수를 사용하여 컴포넌트를 동적으로 렌더링하는 동적 라우팅을 이용하면 쉽게 해결할 수 있다. 동적 라우팅 사용법 먼저 우리의 희망 react-router-dom을 설치하자. 이 글은 v6를 기준으로 작성하였다.npm install react-router-dom 그 다음으로 동적 라우팅을 사용할 페이지에 변수를 전달하는 과정이 필요하다. import React, {useEffect, useState} from "react";import { L..

Useeffect hook의 리턴구문 실행 조건

useeffect hook은 의존성 배열을 이용하여 리렌더링을 제어할 수 있어 컴포넌트의 불필요한 렌더링을 막을 수 있고 콜백함수를 리액트의 라이프사이클과 동기화 시킬수 있어 널리 사용되는 hook이다. 또한 리턴구문이 컴포넌트가 언마운되거나 리렌더링 직전에 실행되는 것을 이용하여 리소스를 정리할때도 편리하게 사용할 수 있다. 이때 useeffect hook의 의존성배열 유무에 따라 리턴구문 실행여부가 달라지는데 먼저 의존성 배열이 존재하는 경우 , 빈 배열이 아닌 경우, useeffect hook의 콜백함수는 컴포넌트가 마운트 되고 의존성 배열의 값이 바뀔때마다 실행된다. 리턴 함수는 컴포넌트가 언마운트될때, 페이지에서 사라지거나 페이지가 이동할 때, 실행되고 의존성 배열의 값들이 바뀔때 실행된다. 의..

React로 Modal 만들기(with React-router-dom v6)

Introduction  modal을 만드는 것은 쉽다. 왜냐하면 이제는 html에서도 dialog라는 tag를 이용해 간단한 html과 js조합으로 쉽게 만들 수 있기 때문이다. 그러나 우리가 사이트들을 사용하면서 보이는 modal 중에는 html이 아닌 react를 이용해 만든 modal들도 있는데 둘의 차이는 react를 이용하면 url이 변경됨에도 modal 주변으로 이전 페이지가 렌더링되게 할 수 있다는 점이다.  대표적으로는 instragram이나 twitter에서 해당 방법을 사용하는 것을 알 수 있는데 이 방법을 사용했을 때 장점으로는 사용자들이 페이지 전/후 이동이 직관적이라는 점이다. url이 바뀌면서 modal이 보이는 경우 뒤로가기 버튼을 눌렀을 때 modal이 띄워지기 이전 페이지..