web

여러가지 정보를 나누는 공간을 웹이라고 한다

browser

웹에 접근할 수 있게 해주는 소프트웨어

client 와 server

클라이언트 -> 내 랩탑
서버 -> 요청을 받고 응답하는 컴퓨터

쉽게 말하면

클라이언트가 서버한테 요청하고
서버가 클라이언트한테 응답한다

URL

웹의 자원들(웹페이지, 이미지, 파일 등)의 위치를 나타내는 주소

URI는 여러 부분으로 나눌 수 있다.

• protocol : 통신에 사용할 프로토콜(http, https, file 등)
• domain : 서버의 주소
• path : 서버에서 원하는 자원의 경로
• parameter : 서버에 전달할 추가 정보
• fragment : 페이지 내부의 특정 위치

port

컴퓨터에서 통신할 때 사용하는 구역

하나의 컴퓨터에서 여러 프로그램이 네트워크 통신을 할 수 있기 때문에 port 번호로 어떤 프로그램과 통신할지 구분한다.

http & https

인터넷에서 데이터를 주고받기 위한 통신 프로토콜이다.

http(s)란?

HTTPS는 HTTP에 Secure가 붙은 것이다.

HTTP로 주고받는 데이터를 암호화해서 중간에서 패킷을 가로채도 내용을 쉽게 볼 수 없게 만든다.

HTTP  -> 데이터가 암호화되지 않음
HTTPS -> 데이터를 암호화해서 전송

cookie & session

HTTP는 기본적으로 이전 요청과 다음 요청을 구분하지 못한다.

그래서 사용자를 기억하기 위해 cookie와 session 등을 사용한다.

• cookie
  브라우저에 사용자의 정보를 저장한다.
  key와 value 형태로 저장한다.

• session
  사용자의 정보를 서버에 저장하고
  브라우저에는 session을 식별하기 위한 값을 저장한다.

쉽게 말하면

cookie  -> 브라우저에 저장
session -> 서버에 저장

SOP(Same Origin Policy)

한 웹사이트의 JavaScript가 다른 웹사이트의 데이터를 마음대로 읽지 못하게 하는 보안 정책이다.

origin은

protocol + domain + port

로 이루어져 있다.

이 3개가 모두 같아야 같은 origin으로 판단한다.

결국 다른 origin으로 요청을 보내는 것 자체는 가능하지만
SOP 때문에 응답 데이터를 JavaScript가 마음대로 읽지는 못한다.

CORS

SOP 때문에 다른 origin의 응답을 읽을 수 없는데

서버가 특정 origin의 요청을 허용하도록 HTTP 헤더를 설정하면 다른 origin에서도 응답을 가져올 수 있다.

이것을 CORS라고 한다.

http request 구조

HTTP 요청은 크게

헤더

CRLF

body(본문)

로 이루어져 있다.

http header

HTTP 요청을 보낼 때 같이 보내는 부가정보이다.

예를 들어

• 현재 도메인
• 요청 메소드
• 본문의 길이
• 데이터의 형식
• 쿠키

등의 정보를 담고 있다.

메소드란?

클라이언트가 웹서버에 무엇을 원하는지 나타낸다.

• GET : 서버의 데이터를 읽거나 가져오기
• POST : 서버에 데이터를 보내기
• HEAD : 응답 본문 없이 응답 헤더만 받기

등이 있다.

프런트엔드 & 백엔드

프런트엔드

사용자가 직접 보는 부분이다.

HTML, CSS, JavaScript 등을 이용해서 UI를 만들고
사용자의 요청을 백엔드와 주고받는 통로 역할을 한다.

백엔드

사용자가 직접 보지 못하는 서버 측 부분이다.

사용자의 요청을 받아서 실제 데이터를 처리하고
데이터베이스와 통신하거나 필요한 작업을 수행한다.

쉽게 말하면

프런트엔드 -> 사용자가 보는 부분
백엔드     -> 실제로 일하는 부분