사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 물론 서버쪽에서 체크를 해주긴 하지만, 해당 URL로 넘어간다는 것 자체를 프론트측에서 막아주는 것이 바람직하다. 이를 그림으로 표현하면 다음과 같다. 1. 접근 제한 (Access Control) PrivateRoute는 로그인한 사용자에게 제공되는 루트이고, 만약 로그인하지 않은 사용자가 이 루트로 접근하고자 한다면 로그인 페이지로 Redirection한다. 반대로, PubilcRoute는 로그인 여부와 상관없이 사용자에게 제공되는 루트이다. 아래 그림과 같이 이미 로그인한 사용자가 해당 루트로 접근하는 것을 막고자 한다면 restricted 옵션을 줘서 제어할 수 있다. 2. 구현 1) 로직 App.jsx의 Router 컴포넌트 안..
리액트를 쓸 일이 있어서 리덕스 구조부터 코드를 짰는데, 코드만 짜고나니 기본적인 개념이 너무 머리에 정리가 안돼서 리덕스에 대해서 간략하게 정리하고자 남겼다. 1. 리덕스(Redux)란? 리덕스는 상태를 전역(global)으로 관리하게 해주는 라이브러리다. 즉, 리덕스는 상태 관리를 컴포넌트 바깥에서 할 수 있게 도와준다. 2. 리덕스 동작 방식 1) 스토어 설정 2) 컴포넌트의 스토어 구독하기(subscribe) 3) 스토어에게 상태 변경하라고 알리기(dispatch) 3. 리덕스 용어 정리 스토어(store) 상태에 관한 데이터들이 담겨있는 저장소 액션(action) 상태변화를 일으킬 때 참조하는 객체 디스패치(dispatch) 액션을 스토어에 전달하는 행위 리듀서(reducer) 상태를 변화시키는..
Node.js에서 비동기(async)방식 mysql을 사용하는 이유를 예제와 함께 살펴보자. 1. 동기식 mysql (mysql) pool+connection을 이용한 트랜잭션 예제 (sync) var mysql = require('mysql'); var pool = mysql.createPool(...); pool.getConnection(function(err, connection) { if (err) throw err; // not connected! connection.beginTransaction(function(err) { if (err) throw err; connection.query('INSERT INTO posts SET title=?', title, function (error, re..
module.exports와 exports의 차이를 살펴보던 중 쉬운 설명과 깔끔한 코드로 간단하게 설명해준 글(링크)이 있어 공부차 참고하여 포스팅하게 되었다. 1. 모듈이란? 모듈은 특정한 기능을 하는 함수나 변수들의 집합이다. 코드의 길이를 줄이고, 유지보수를 용이하게 할 수 있다는 장점이 있다. 이러한 모듈을 export하는 두 가지 방법인 module.exports와 exports의 차이점을 알아보자. 2. module.exports module.js const john = { name: "John", intro: "Hi" } module.exports = john; main.js const user = require('./module'); console.log(user); output $ no..
JWT 플로우를 작성하면서 access 토큰과 refresh 토큰에 대한 구현에 대한 많은 고민이 있었다. 좋은 글들이 많았고 이런 저런 방법을 고민하던 중, 내가 구현한 코드를 정리하고자 포스팅하게 되었다. 계속되던 삽질 끝에 깨닫게 된 것은 "JWT Access Token과 Refresh Token을 구현하는 방식은 너무나도 많다."라는 점이었다. 따라서 내가 포스팅하는 구현 방식이 절대 정답이 아니고 여러 방법 중 하나일 뿐임을 명심하길 바란다. 이번 포스팅은 간단한 JWT 소개와 시나리오, 그리고 구현으로 이어진다. 구현에 있어 세부적인 많이 생략했음을 고려하여 흐름만 이해하도록 하자. 글에 부족한 부분이 많이 있는데, 주기적으로 수정하여 살을 덧붙일 예정이다. 1. JWT란? JWT는 JSON ..
