[Web] HTTP - req, res, cookie, session

HTTP / request, response 역할

웹브라우저와 웹서버가 통신(커뮤니케이션)할 때 사용하는 통신규칙.
html, css, javascript, image와 같은 파일들을 컨테츠로서 서로 주고받기 위해서는 클라이언트와 서버가 서로가 알아들을 수 있는 공통의 약속인 메시지가 필요하다. 이 메시지는 크게 request를 위한 메시지, response를 위한 메시지로 구분된다.

• request(요청) : client(웹브라우저)가 sever(웹서버)에게 html,data,contents 등 을 달라고 하는것
• response(응답) : server(웹서버)가 client(웹브라우저)에게 html,data,contents 등 을 주는것

브라우저 개발자도구의 network탭에서 웹서버와 웹브라우저가 어떤 통신을 하고 있는지 모니터링 가능하다.

즉, 웹브라우저는 사용자가 요청한 정보를 request header라는 text정보로 만들어서 웹서버에 대신 물어봐 주는 역할을 한다.
마찬가지로 웹서버는 자신이 가진 정보를 보내주면서 response header 를 만들어주는 역할은 한다고 볼 수 있다.

request header

형관펜 칠한 첫번 째 줄(request line)이 중요.

• GET - method 브라우저와 서버가 어떤 방식으로 통신할 것인가

• / - 웹서버에 요청하는 정보가 무엇인가 (여기선 그냥 루트/)

• HTTP/1.1 - version

response header

• 2xx : 성공
• 3xx : 리다이렉션 완료
• 4xx : 요청 오류
• 5xx : 서버 오류

마찬가지로 첫째 줄 status가 중요. 상태를 알려주는 행

위 사진엔 없지만 웹서버가 응답할때 이 응답의 type을 담은 행 Content-Type이라는 header가 있다.

POST 방식의 경우 body부분에 내용이 들어가니 잘 봐야함 (request header도 마찬가지)

Cookie 와 Session

위에서 언급한 브라우저의 기본 기능외에도 여러가지 기능들이 생겼는데, 파일이나 데이터를 저장할 수 있는 기능이 생김. 그것이 바로 Cookie이다.

cookie : 쿠키값을 웹브라우저에 설정하면 접속할때마다 설정된 쿠키값을 서버에 전송하는 것을 통해서 사용자의 상태를 유지할 수 있고 사용자를 식별할 수 있다.

웹브라우저와 웹서버의 기능을 통해 데이터를 주고 받으며 header부분을 조작할 수 있다. 여기에 cookie를 만들어주는 명령어를 전달하면 cookie가 생성된다.

app.get('/',(req,res)=>{
    console.log(req.headers)
    res.setHeader('Set-Cookie', 'token=true')
    res.render('index')
})

let session = 'token=true';

여기에 더해 특정변수에 ‘token=true’라고 해주면 이게 session.

즉, 서버의 메모리를 사용해 저장하는게 session. 브라우저에 저장하는게 cookie다.

이러한 HTTP, 웹브라우저, 웹서버의 기본적인 기능에대한 이해를 바탕으로 로그인, JWS, Oauth2.0, 토큰인증방식을 이해해야 한다.

추가로 학습할 것

• REST API 이해하기
• React의 axios 1
• React의 axios 2
• express와 middleware