Front End/Web
브라우저
🌐브라우저웹(Web)브라우저의 특징과 웹의 동작 원리브라우저의 구조사용자 인터페이스(User Interface)브라우저 엔진(Browser Engine)렌더링 엔진(Rendering Engine)통신(Networking)자바스크립트 해석기(JavaScript Interpreter)자바스크립트 엔진 구조 (V8 엔진을 토대로)UI 백엔드자료 저장소웹 스토리지(Web Storage) 특징브라우저웹 브라우저, 웹 탐색기로도 불리는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTMl 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 휘해 응용 계층의 대표적 프로토콜인 HTTP를 통해 송수신한다.웹(Web)브라우저 상에서 제..
인증/보안(Cookie, Session, Token, OAuth)
🌐Cookie쿠키 옵션쿠키를 이용한 상태 유지Session세션 기반 인증 (Session-based Authentication)로그인로그아웃express-session을 이용한 Session 구현Cookie vs. SessionHashing레인보우 테이블과 솔트(Salt) 해싱의 목적Token토큰 기반 인증 (Token-based Authentication)토큰 기반 인증의 장점JWT(JSON Web Token)JWT의 종류JWT의 구조JWT 사용 예시토큰 기반 인증 절차OAuthOAuth를 쓰는 이유OAuth에서 꼭 알아야 할 용어OAuth 인증 흐름Authorization Code Grant TypeRefresh Token Grant TypeCookieHTTP는 기본적으로 서버가 클라이언트의 상태를 ..
네트워크(IP, TCP/UDP, HTTPS)
🌐네트워크의 기원과거에 사용한 회선교환 방식패킷교환 방식IP (인터넷 프로토콜)IP 프로토콜의 한계TCP / UDPTCP/IP 패킷TCP의 특징UDPTCP vs. UDP네트워크 계층 모델OSI 7계층 모델각 계층의 구분데이터 캡슐화TCP/IP 4계층 모델각 계층의 구분응용 계층HTTPHTTP의 역사HTTP의 특징클라이언트-서버 구조무상태(Stateless) 프로토콜비연결성(Connectionless) 모델HTTP HeaderHTTP 요청/응답 주요 헤더표현 헤더컨텐츠 협상 헤더HTTPS암호화 방식1. 대칭 키 암호화 방식2. 공개 키(비대칭 키) 암호화 방식SSL/TLS 프로토콜SSL/TLS 프로토콜 암호화 과정네트워크의 기원우리가 지금 사용하는 인터넷 프로토콜(IP) 기반의 네트워크는 냉전시대 당시 핵..
Flux 패턴
🌐Flux 패턴등장 배경Flux 패턴?Flux 패턴Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, CSR 어플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 데이터 흐름을 일관성 있게 관리하여 예측가능성을 높이기 위해 고안되었다.등장 배경기존 어플리케이션이 보편적으로 사용하던 디자인 패턴은 MVC 패턴이었다. MVC는 Model, View, Controller의 약자로, Model에 데이터를 저장하고 Controller를 이용해 Model의 데이터를 관리한다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여지고, 사용자 역시 View를 통해 데이터를 입력하면 Model을 업데이트 할 수 있게 된다. React의 State Hook을 대입해서 생각해보면, Mod..
[Git] Git으로 협업하기
Git항상 올바른 표현으로 코드를 작성하고 수정할 수 있다면 좋겠지만, 우리는 사람이기 때문에 실수를 할 수 있다. 비단 실수 뿐 아니라, 새로운 기능을 추가하거나 버그를 해결하면서 돌이킬 수 없는 문제가 발생할 수 있기 때문에 코드를 작성할 땐 이전에 작성한 내용을 보존할 필요가 있다. 이렇게 버전별로 코드를 보존해주는 시스템을 버전 관리 시스템(Version Control System)이라 한다. 버전 관리 시스템은 단순히 버전을 관리해주는 것을 넘어, 협업을 하는데에 있어서도 중요하다. 여러 사람이 동시에 같은 코드를 작업했을 때 버전 관리가 가능하다면 손쉽게 이전 상태로 돌아갈 수 있으며, 해당 버전에 어떤 사항이 변경되었는지 코멘트를 남기는 것도 가능하기 때문이다.버전 관리 시스템 중 가장 많이..