cookie, session

로그인을 구현하려면 어떻게 해야 할까?

session?

session은 프런트엔드(웹 브라우저)와 백엔드(웹 서버) 간의 활동을 기록한다. Velog에 로그인하는 과정을 보자.

사용자가 브라우저에서 정보를 입력하면 서버에서 그 정보가 맞는지 확인하고 맞으면 로그인된다. 브라우저를 잠시 껐다가 재접속하더라도 로그인이 되는 이유는 방금한 활동(사용자 정보 확인)에 대한 결과가 session에 남아있기 때문이다.

cookie?

session이 동작하기 위해서는 브라우저와 서버가 연결되어 있어야 한다. 그러나 브라우저가 요청하고 서버가 그 요청에 응답하면 둘의 연결은 끊기게 된다. 예를 들어, 브라우저가 특정 url로의 이동을 요청하고 서버가 해당 url로 이동시켜주기 전까지는 연결되어있지만 이동하면 둘의 연결은 끊긴다.

여기서 연결이 끊겼다는 것은 기록이 사라진다고 생각하면 됨.

그래서 cookie를 통해 유저의 행동을 기록한 session의 id를 저장한다.

유저는 각자의 쿠키를 가진다.

회사는 사원증을 통해 개인을 구분한다.
마찬가지로 서버(회사)는 cookie(사원증)를 통해 유저를 구분한다.

그림을 보면 맨처음에 브라우저가 요청을 하면 서버가 자동으로 쿠키를 생성해서 유저에게 준다. 그 뒤로는 요청과 함께 쿠키를 서버에 전달하면 서버는 어떤 유저가 무슨 요청을 했는지 기록한다.

예시

app.use((req, res, next) => {
  console.log(req.headers);
  next();
});

위의 코드에 대한 서버의 응답 내용이 아래에 있다.

cookie: 'connect.sid=s%3AtMzTB6I4KKN614h6PjNFMgsOC-Sibrg_.POVtnMQCuReNqnc7x%2F6gE5Y3B1HU07nx%2Br0p7RYfHQc'

이렇듯 모든 유저는 각자의 쿠키를 가진다.

app.use((req, res, next) => {
  req.sessionStore.all((error, sessions) => {
    console.log(sessions);
  });
  next();
});

또한, cookie를 통해 session을 저장함을 알 수 있다.

[
  {
    cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: '/' },
    user: {
      _id: '',
      username: '',
      email: '',
      birth: '',
      gender: '',
      phone: '',
      password: '',
      createdAt: '2021-07-10T11:47:43.968Z',
      __v: 0
    }
  }
]

req.session.user를 통해 정보를 저장할 수 있다.

결론

유저는 쿠키를 통해 구분되고, 유저가 활동한 내용은 session에 기록된다.

---

Reference

• cookie, session
• cookie, session