본문 바로가기

Web

(5)

[Web] CORS 한 사이트에서 주소가 다른 서버로 요청을 보낼때 이 CORS에 의한 에러가 발생하게 된다. 하지만 신기하게도 같은 요청이더라도 어떤 부분에서는 되고 또 다른 부분에서는 안되는 경우가 있는데 이때 CORS로 요청을 막는 것은 브라우저의 영역이다. 왜냐면 우리의 브라우저는 우리들이 방문하는 사이트를 믿지 못하기 때문이다. 📘 CORS(Cross-Origin Resource Sharing) MDN - CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 서버가 브라우저가 리소스 로드를 허용해야 하는 자체가 아닌 다른 출처 (도메인, 체계 또는 포트) 를 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘입니다 . CORS는 또한 서버가 실제 요청을 허용하는지 확인..

[Web] Socket, WebSocket (소켓과 웹소켓) 프로젝트를 진행하면서 소켓을 정말 많이 사용하게 되었었다. 시간이 꽤 지났지만 다시 한번 학습해보면서 복기도 하고 나름대로 정리도 해보려고 포스트를 작성하기 시작했다! 🌏 Socket 프로그램이 네트워크에서 데이터를 주고받을 수 있도록 네트워크 환경에 연결할 수 있게 만들어진 연결부 데이터를 주고 받을 수 있는 구조체로 소켓을 통해 데이터 통로가 만들어진다. 서버 소켓, 클라이언트 소켓으로 구분된다. (요청을 하는 쪽이 클라이언트, 받는 쪽이 서버) TCP/IP, UDP/IP 유형이 존재하나 일반적으로 TCP/IP 프로토콜을 이용함. 소켓은 클라이언트와 서버가 데이터 패킷을 교환할 수 있도록 하는 IP 주소와 포트 번호라고 하는 통신용 끝점(End-Point)을 만들어 작동 📒 동작방식 ✓ Server ..

[Web] 브라우저에서 도메인을 입력하면 일어나는 일 만약 Naver 홈페이지에 접속하고 싶을 때 우리는 브라우저의 주소창에 다음과 같이 입력을 하는데 이때 어떤 과정을 통해서 Naver에 접근할 수 있을까? 먼저 그림으로만 표현해보자면 다음과 같다. 우리가 입력하는 주소(www.naver.com)는 웹 상에서 사람들이 편하게 사용하기 위한 도메인이다. 하지만 우리가 해당 홈페이지에 접근하기 위해서는 결국 접근하고자 하는 곳의 IP를 알아야 한다. 우리가 주소를 입력하고 Enter를 누르게 되면 먼저 우리의 PC에 존재하는 Hosts 파일을 살펴본다. 도메인과 IP가 매핑되어있지 않다면 DNS를 통해 IP주소를 받아와야 한다. DNS (Domain Name System) 웹 사이트의 IP주소와 도메인 주소를 이어주는 시스템 - 계층적 구조로 되어 있으며 상..

[Web] JWT JWT 기반 인증은 쿠키/세션 방식과 유사하게 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별한다. 📘 구조 JWT는 Header, Payload, Sigmature 세가지로 구분된다. Header { "alg": "HS256", "typ": "JWT" } alg: 정보를 암호화할 해싱 알고리즘 typ: 토큰의 타입 Payload { "sub": "1234567890", "name": "John Doe", "iat": 1516239022 } Payload는 토큰에 담을 정보를 지님 주로 클라이언트의 고유 ID 값 및 유효 기간 등이 포함 key-value 형식으로 이루어진 한 쌍의 정보를 클레임(Claim)이라고 한다 클레임을 공개(public) 혹은 비공개(priv..

[Web] Webpack 📘 webpack은 뭘까? webpack 공식 문서를 확인해보면 다음과 같이 나와있다. At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from. 한국어로 번역한다면 다음과 같다. webpack..

이전 1 다음

티스토리툴바