자바스크립트/라이브러리

아이언 세션 (Iron session) 이란 무엇인가? (쉬운 설명과 보안 관련 생각해볼점)

iron session 이란? 안전하고 무상태인 쿠키 기반의 세션 라이브러리 더 쉬운 말로 설명하면? 사용자가 입력한 암호를 통해 쿠키값을 암호화하고 복호화해주는 것이다. 쿠키는 원래 클라이언트에게 공개되고 클라이언트가 임의로 변경할 수 있는 값인데 이에 보안을 주기 위해서 암호화/복호화를 하는 것이다. 작동 방식 세션 데이터가 서명되고 암호화된 쿠키에 저장된다. 서버 코드에서 네트워크가 필요 없는 상태 비저장 방식으로 디코딩된다. Ruby on Rails 에서 쓰는 것과 동일한 기술이다. 특징 서버리스 환경에 적합하다. 세션 데이터를 쿠키에 저장하여 별도의 서버측 저장소 필요 없음 사용자 패스워드가 없어도 안전하게 암호화가 가능하다. 미들웨어 하나로 쉽게 세션 기능을 추가할 수 있어서 러닝커브가 작다...

자바스크립트의 Socket.io 라이브러리란? (웹소켓 통신 라이브러리)

개요 WebSocket 프로토콜을 사용해서 만든 양방향 통신이다. 웹에서 일반적으로 사용하는 HTTP 는 기본적으로 클라이언트가 서버에게 요청하는 관점이라면, WebSocket 은 서로서로 요청하는 양방향이다. low-latency (낮은 지연), bi-directional (양방향), event-based (이벤트 기반) 로 클라이언트와 서버가 통신할 수 있게 해준다. 기본 통신 예제 emit() 은 메세지를 보낸다. (연결된 모든 소켓에게 보낸다.) boradcast.emit() 이란 것도 있는데, 이는 나 빼고 모두에게 메세지를 보낸다. on() 은 메세지를 받는다. 서버 코드 import { Server } from "socket.io"; // 웹소켓 서버를 생성 const io = new Ser..

자바스크립트 라이브러리 Axios 란?

Axios 란? Javascript 진영에서 사용되는 Promise를 기반으로 한 HTTP 클라이언트이다. Isomorphic 한 라이브러리이다. 간단하게, 서버 사이드와 클라이언트 사이드 두 곳에서 모두 정상적으로 작동한다. 서버 사이드에서는 node.js 의 네이티브 http 모듈을 사용한다. 클라이언트 사이드에서는 XMLHttpRequests API 를 사용한다. 특징 브라우저에서 XMLHttpRequests 를 사용한다. 서버에서 http 모듈을 사용한다. Promise API 를 지원한다. 요청, 응답 인터셉터를 지원한다. 요청, 응답 데이터 변환을 지원한다. 요청을 취소할 수 있다. JSON 데이터에 대한 자동 변환이 가능하다. 클라이언트 사이드에서 XSRF 에 대한 방어를 지원한다. 인터셉터..

Socket.io 소켓 IO 란?

Socket.io 란? 소켓통신을 잘 모른다면 이 게시글을 먼저 읽고 오자. 실시간 양방향 통신을 구현하기 위해 가장 많이 사용되는 라이브러리이다. 다양한 언어로 구현되어 있는 구현체가 있으며, 이름처럼 주로 웹소켓을 이용한 소켓 통신을 하지만, 웹브라우저 지원이 되지 않거나 다양한 네트워크 문제가 존재하는 경우 폴링 방식으로 통신하기도 한다. 공식문서 본문 중... Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. Diagram of a communication between a server and a client. It is bui..

리덕스 툴킷 (Redux toolkit) 이란?

리덕스 툴킷(Redux toolkit) 이란? 리덕스를 있는 그대로 활용하려면, 매우 많은 보일러 플레이트 코드를 작성해야 한다. 또한, 너무 자유도가 높아서 다양한 형식으로 사용할 수 있다. 리덕스 툴킷은 리덕스의 보일러 플레이트 코드를 줄이고 표준을 강제해 Best Practice 의 형태로 사용하기 위해 탄생한 라이브러리이다. 툴킷 없는 리덕스 사용의 복잡함과 툴킷의 필요성 리덕스 작성의 일반적인 사이클은 이렇다. 액션 정의 -> 액션 함수 정의 -> 액션의 구체적 행위인 리듀서 정의 위 세가지의 코드를 작성해야 1개의 액션이 생성되는 것이다. 또한 다양한 이유로 부가 라이브러리가 사용된다. 불변성을 지키기 위한 immer 라이브러리 store 값을 효율적으로 핸들링하고, 불필요한 렌더링을 막기 위..

리덕스 핵심 개념 10분만에 배우기

리덕스란? 리덕스란 무엇이고 왜 사용하는 것인지 알아보자. 리덕스는 사실 알고나면, 정해진 구조를 배신하지 않는 형태이고 단방향으로 데이터를 제어하기 때문에 전혀 어렵지 않다. 리덕스를 배우기 전에: '상태' 란? 리덕스를 공부하다보면 '상태' 란 말을 많이 사용한다. 여기서 말하는 '상태' 란, 간단히 '변수'라고 생각해도 된다. '상태'는 보통 리액트와 같은 SPA 프레임워크에서 UI 가 변하는 기준점이 되는 변수를 말한다. 리덕스는 보통 '상태 관리' 라이브러리라고 불리우며, 리액트 앱의 전역에서 사용되는 '상태' 를 관리할 때 주로 사용된다. 예측 가능한 앱 작성을 도와준다. 리덕스로 만든 앱은....