Front End
Axios
Axios사용법AxiosAxios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. fetch API와 비슷한 역할을 하지만 사용이 간편하면서 추가적인 기능들이 포함되어 있다.AxiosFetch API서드파티 라이브러리로 설치 필요빌트인 API라 별도 설치 필요없음자동으로 JSON데이터 형식으로 변환.json() 메서드 사용 필요사용법Axios는 써드파티 라이브러리이기 때문에 사용을 위한 설치 과정이 필요하다.npm install axiosfetch API와 기본 원리는 거의 비슷하며, 기본적인 사용 방법은 전달인자로 정해진 옵션을 입력하는 것이다. 이외에도 메서드를 이용해 HTTP 요청 메서드를 설정할 수 있다. 기본적인 작성 방법은 아래와 같다./..
인증/보안(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) 기반의 네트워크는 냉전시대 당시 핵..
웹 표준
🌐웹(Web)웹 표준웹 표준의 장점Semantic HTML시맨틱 HTML의 필요성자주 쓰이는 시맨틱 요소웹 표준을 위한 마크업 시 주의사항크로스 브라우징(Cross Browsing)크로스 브라우징 워크 플로우1. 초기 기획2. 개발3. 테스트 / 발견4. 수정 / 반복🌐SEO 🌐웹 접근성 웹(Web)웹이라 하면 인터넷 그 자체를 떠올리는 사람들이 많겠지만, 사실은 인터넷이 웹보다 조금 더 포괄적인 개념이다. 인터넷은 전 세계적으로 연결된 컴퓨터 네트워크 통신망을 의미하며, 웹은 문서, 이미지, 영상 등 다양한 정보를 여러 사람과 공유할 수 있는 일종의 공간이자 플랫폼이다.웹 표준웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로..
Flux 패턴
🌐Flux 패턴등장 배경Flux 패턴?Flux 패턴Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, CSR 어플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 데이터 흐름을 일관성 있게 관리하여 예측가능성을 높이기 위해 고안되었다.등장 배경기존 어플리케이션이 보편적으로 사용하던 디자인 패턴은 MVC 패턴이었다. MVC는 Model, View, Controller의 약자로, Model에 데이터를 저장하고 Controller를 이용해 Model의 데이터를 관리한다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여지고, 사용자 역시 View를 통해 데이터를 입력하면 Model을 업데이트 할 수 있게 된다. React의 State Hook을 대입해서 생각해보면, Mod..