분류 전체보기
네트워크 JWT 🗝
JWT(Json Web Token)에 대해 알아보려 합니다. 이 글에서는 공식문서의 내용을 기반으로 제 경험을 섞을 것입니다. JWT란? JSON Web Token은 JSON 객체로 정보를 안전하게 전송하는 자체적인 방법을 정의한 표준입니다. 이 정보들은 디지털 서명이 되어있으므로 신뢰할 수 있습니다. 비밀키나 RSA 혹은 ECDSA를 사용한 공개/개인키를 사용하여 JWT는 서명되어 질수 있습니다. JWT를 사용하는 경우? 인증 : JWT를 쓰는 가장 흔한 경우입니다. 사용자가 로그인을 하면 이후의 연속된 요청들은 JWT를 포함하게 되고(헤더에 포함됨), user에게 routing, service 이용, 자원에 대한 접근을 허용합니다. jwt는 작은 overhead를 유발하고 다른 도메인간에 쉽게 사용될..
React Redux-saga's work flow from component 🙋♂️
컴포넌트에서 dispatch를 통해 action을 넘겼을때 동작하는 순서 1. ui에서 action creator를 통해 action을 생성하고 이를 dispatch를 통해 Store로 넘깁니다. 2. store로 넘어오면 이를 감지하고 있던 saga(watch)에서 action의 type에 맞는 effect를 실행하게 됩니다. 3. redux-saga에서는 effect를 통해 객체를 반환하기만 하고 이 객체는 middle-ware로 전달이 됩니다. 4. 실질적인 함수의 실행은 미들웨어에서 실행이 됩니다. 5. put을 통해 store에 dispatch를 전달하고 store에서는 리듀서를 통해 상태를 변화시킵니다. 6. 상태가 변화가 되면 상태를 참조하고 있던 컴포넌트는 리렌더링이 발생하게 됩니다. --..
React Jsx 🌱
jsx는 React.createElement를 반환하기 위한 Syntatic sugar 입니다. Syntatic Sugar은 좀 더 편리하게 사용하기 위해 도와주는 것으로 이해할 수 있습니다. 예를 들면 Javascript의 class, React의 jsx가 있습니다. javascript의 Class는 babel로 변환해 보면 prototype으로 구성되어 있음을 React의 jsx는 bable로 변환해 보면 React.createElement를 반환함을 확인할 수 있습니다. 둘다 원래는 직접 prototype, React.createElement로 작성해야 했던것을 Class, jsx를 사용함으로써 편리하게 사용할 수 있는 것이죠 jsx는 클래스형 컴포넌트에서 사용합니다. render내부에서 retur..
주소창에 www.google.com을 입력하면?(성공과 실패를 결정하는 1% 네트워크 원리)
간단하게 정리한 질문에 대한 답변 1. 유저가 브라우저에서 www.google.com을 입력하면 먼저 브라우저에서 HTTP request message를 생성합니다. 2. 이후 DNS lookup을 통해 보내야 하는 서버 주소 ip를 알아 옵니다. 3. HTTP 메시지를 TCP/IP층에 전달합니다. - TCP/IP 층에서는 HTTP 요청메시지에 자신들의 헤더를 추가하여 패킷을 생성합니다. - TCP층에서는 상대방의 포트, 나의 포트가 추가되고, TCP 연결을 위한 flag등이 헤더에 추가되고 - IP층에서는 상대방의 ip 주소, mac주소 등이 추가가 됩니다. 4. 패킷은 전기신호로 변환되어 랜선을 통해 라우터들을 거쳐 목적지 ip에 전달되게 됩니다. 5. 목적지 서버에서는 전달받은 패킷을 생성한 과정과..
네트워크 HTTP, HTTPS, SSL HandShake 😶🌫️
HTTP HTTP(Hyper Text Transfer Protocol)은 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 입니다. 웹 브라우저와 웹 서버간의 통신을 위해 디자인 되었습니다. HTTP 요청이 발생하면 브라우저는 HTTP 요청 메시지를 생성하고 TCP/IP 프로토콜을 이용하여 웹 서버에 요청을 전달합니다. 이후 브라우저는 웹 서버로부터 HTTP 응답을 전달 받습니다. HTTP요청 메시지는 크게 startline, 헤더와 바디로 구성되고 startline에는 메소드, 경로, 프로토콜의 버전이 추가됩니다. 헤더에는 요청에 설정한 HTTP 헤더들이 들어갑니다. 바디에는 POST 요청일 경우에 추가되고 다른 메서드의 경우에는 추가되지 않습니다. HTTP 응답 메시지에는 크게 sta..
네트워크 HTTP, HTTP 1.1, HTTP 2.0 🔥
HTTP HTTP(Hyper Text Transfer Protocol)은 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 입니다. 웹 브라우저와 웹 서버간의 통신을 위해 디자인 되었습니다. HTTP 요청이 발생하면 브라우저는 HTTP 요청 메시지를 생성하고 TCP/IP 프로토콜을 이용하여 웹 서버에 요청을 전달합니다. 이후 브라우저는 웹 서버로부터 HTTP 응답을 전달 받습니다. HTTP요청 메시지는 크게 startline, 헤더와 바디로 구성되고 startline에는 메소드, 경로, 프로토콜의 버전이 추가됩니다. 헤더에는 요청에 설정한 HTTP 헤더들이 들어갑니다. 바디에는 POST 요청일 경우에 추가되고 다른 메서드의 경우에는 추가되지 않습니다. HTTP 응답 메시지에는 크게 sta..
React 재조정 🌱
React의 재조정(Reconciliation)에 대해 정리해보려 합니다. 여기서 말하는 재조정에서는 diffing 알고리즘을 어떻게 정의했는지에 관한 것입니다. diffing 알고리즘에에 따라 가상 DOM과 실제 DOM의 차이를 판단합니다. 그리고 변경이 필요한 부분만 대체가 되는 것입니다. 두개의 가정을 먼저 인지하여야 합니다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 어떤 자식 element가 변경되지 않아야 하는지를 표시해 줄 수 있다. diffing 알고리즘 엘리먼트의 타입이 다른경우 리액트에서는 두 개의 트리를 비교할때, 두 엘리먼트의 root 엘리먼트부터 비교를 하게 됩니다. 이 root 엘리먼트가 다르다면 root 엘리먼트를 포함한 트..
Javascript Promise, async/await MicroTask queue 동작차이 🖇
Javascript 내에서 callback를 더 효율적으로 사용하기 위해 promise가 등장하였고 promise를 더 효율적으로 사용하기 위해 es8에서 async/await 이 등장하였습니다. promise와 async/await이 브라우저에서 어떻게 구현되는지 동작의 차이를 알게되었고 이를 글로 적어보려 합니다. promise, async/await은 둘다 promise를 return하거나 throw하므로 micro task queue에서 다루어집니다. callback queue에는 3종류가 있습니다. macro task queue, micro task queue, animationFrame 우선순위는 micro task queue > animationFrame > macro task queue 순..
Javascript Prototype 🤢
프로토타입(prototype)이란 한글로 원래의 형태 또는 전형적인 예라는 뜻을 가지고 있습니다. javascript는 프로토타입 기반의 언어입니다. 그래서 javascript에서 프로토타입 개념을 이해하는 것은 매우 중요합니다. 클래스 기반언어 에서는 클래스를 먼저 선언하고 새로운 객체(인스턴스)를 생성합니다. 하지만 javascript에서는 프로토타입(prototpe)을 원형으로 삼고 이를 이용하여 객체를 생성합니다. var jade = { name: 'jade' } jade.toString() // '[object Object]' function Person(name) { this.name = name } var wade = new Person('wade') wade.name // 'wade' wa..
React hook 🌱
React Hook이란? React Hook은 자바스크립트 함수 입니다. Hook은 class를 작성하지 않고도 state와 React의 기능들을 사용할 수 있게 해줍니다 Hook이 등장한 이유는 다음과 같습니다. 컴포넌트 사이에서 상태로직을 재사용하기 어렵습니다. -> Custom hook의 등장배경 - Render Props와 HOC 같은 패턴은 코드의 파악이 어렵다 - 상태 관련 로직을 추상화 하기가 어렵다 (이 내용은 클래스형 컴포넌트 공부후에 이해가 더 될듯) Class는 사람과 기계를 혼동시킵니다. - this가 동적으로 결정되기 때문에 클래스 내부에서 파악하기가 어렵다 - class는 코드의 최소화를 힘들게 만들고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 복잡한 컴포넌트들은 이해..