[포스코 x 코딩온] 웹개발 과정 7주차 - 2 | Cookie, Session

강민혁·2023년 4월 11일
0

nodejs

목록 보기
1/6
post-thumbnail

7주차의 두번째 시간에는 cookie와 session에 대해서 공부했습니다 !

Cookie와 Session


쿠키(Cookie)와 세션(Session)은 모두 웹 개발에서 클라이언트와 서버 간의 상태 유지를 위해 사용되는 기술입니다.

쿠키는 클라이언트 측에서 저장되는 작은 데이터 조각이며, 클라이언트의 웹 브라우저에서 관리됩니다. 쿠키는 서버에서 응답으로 설정되면, 이후에 클라이언트가 같은 웹사이트에 방문할 때마다 쿠키를 서버로 보내게 됩니다. 쿠키를 통해 서버는 클라이언트를 식별하고, 클라이언트의 이전 상태나 활동을 추적할 수 있습니다. 쿠키는 브라우저를 종료해도 유지될 수 있으며, 만료일이 설정되어 있다면 해당 일자 이후에는 더 이상 사용할 수 없습니다.

세션은 클라이언트와 서버 간의 상태 유지를 위해 사용되는 방법으로, 클라이언트가 웹사이트에 접속하면, 서버 측에서 고유한 세션 ID를 생성하고, 이를 클라이언트에게 전달합니다. 이후 클라이언트는 서버에 요청을 보낼 때마다, 해당 세션 ID를 함께 전달합니다. 서버는 이를 통해 클라이언트를 식별하고, 클라이언트의 이전 상태나 활동을 추적할 수 있습니다. 세션은 일정 시간이 지나면 자동으로 만료되며, 클라이언트가 웹 브라우저를 종료하면 세션도 함께 종료됩니다.

쿠키와 세션은 각각 다음과 같은 특징을 가집니다.

  • 쿠키는 클라이언트 측에서 저장되므로, 클라이언트에서 쉽게 확인이 가능합니다. 따라서, 보안에 민감한 정보를 저장하면 안 됩니다.

  • 세션은 서버 측에서 저장되므로, 클라이언트에서는 세션 ID만 확인할 수 있습니다. 따라서, 보안에 민감한 정보를 저장해도 안전합니다.

  • 쿠키는 클라이언트에 저장되기 때문에 서버의 부담을 줄일 수 있습니다.
    세션은 서버에 저장되기 때문에, 서버의 자원을 많이 사용할 수 있습니다.
    보안에 민감한 정보는 세션을 통해 관리하고, 쿠키는 클라이언트의 이전 상태나 활동을 추적할 때 사용합니다.

웹 개발에서 쿠키(Cookie)는 클라이언트 측에서 저장되는 작은 데이터 조각입니다. 쿠키는 웹 브라우저에서 관리되며, 클라이언트가 웹사이트에 방문할 때, 서버에서 응답으로 쿠키를 설정하면, 이후에 클라이언트가 같은 웹사이트에 방문할 때마다 쿠키를 서버로 보내게 됩니다. 이를 통해 서버는 클라이언트를 식별하고, 클라이언트의 이전 상태나 활동을 추적할 수 있습니다.

쿠키는 document.cookie 객체를 통해 설정할 수 있습니다. document.cookie 객체는 문자열 형태의 쿠키 정보를 가지며, 이를 설정하면 클라이언트 브라우저에서 쿠키를 저장합니다. 쿠키는 name=value 형태로 구성되며, 이들은 세미콜론(;)으로 구분합니다. 예를 들어, userId라는 이름을 가지고 123이라는 값을 가지는 쿠키를 설정하는 코드는 다음과 같습니다.

document.cookie = 'userId=123';

쿠키는 다양한 옵션을 가질 수 있습니다. 예를 들어, 쿠키의 유효 기간을 설정하는 코드는 다음과 같습니다.

const now = new Date();
const expiryDate = new Date(now.getTime() + 1000 * 60 * 60 * 24); // 쿠키 만료일은 현재 시간 + 1일 후로 설정
document.cookie = `userId=123; expires=${expiryDate.toUTCString()}`;

위 코드는 쿠키의 만료일을 현재 시간으로부터 1일 후로 설정합니다. 이를 위해 Date 객체를 사용하고, toUTCString() 메서드를 사용하여 유효 기간 정보를 문자열로 변환합니다.

서버에서는 클라이언트에서 전달받은 쿠키를 읽을 수 있습니다. 예를 들어, Express.js에서는 req.cookies 객체를 통해 쿠키를 읽을 수 있습니다. req.cookies 객체는 쿠키의 이름을 키(key)로 가지고, 해당 쿠키의 값을 값(value)으로 가지는 객체입니다. 예를 들어, userId 쿠키를 읽는 코드는 다음과 같습니다.

const userId = req.cookies.userId;

쿠키는 보안에 민감한 정보를 저장하면 안 되므로, 중요한 정보는 쿠키에 저장하면 안 됩니다.

Session

세션(Session)은 웹 애플리케이션에서 클라이언트와 서버 간의 상태 유지를 위해 사용되는 방법입니다. 세션은 클라이언트가 웹 사이트에 접속하면, 서버에서 고유한 세션 ID를 생성하고, 이를 클라이언트에게 전달합니다. 이후 클라이언트는 서버에 요청을 보낼 때마다, 해당 세션 ID를 함께 전달합니다. 서버는 이를 통해 클라이언트를 식별하고, 클라이언트의 이전 상태나 활동을 추적할 수 있습니다.

세션의 동작 방식은 다음과 같습니다.

  • 클라이언트가 서버에 요청을 보냅니다.

  • 서버는 요청에 대한 응답으로 세션 ID를 전달합니다.

  • 클라이언트는 이후 요청에 대해 세션 ID를 포함시켜 서버에 보냅니다.

  • 서버는 세션 ID를 이용해 클라이언트를 식별하고, 해당 클라이언트에 대한 정보를 관리합니다.

세션은 보안에 민감한 정보를 저장하거나, 로그인 상태 등을 유지할 때 사용됩니다. 세션은 일반적으로 서버의 메모리나 데이터베이스에 저장되며, 일정 시간이 지나면 자동으로 만료됩니다. 세션 만료 시간은 서버 측에서 설정할 수 있습니다.

세션의 장점들 !

  • 보안에 민감한 정보를 안전하게 저장할 수 있습니다.
  • 클라이언트의 이전 상태나 활동을 추적할 수 있습니다.
  • 쿠키보다 보안적인 측면에서 우수합니다.

세션의 단점들 ..

  • 세션은 서버의 자원을 많이 사용할 수 있습니다.

  • 세션을 사용하는 경우, 클라이언트의 요청마다 세션 ID를 전달해야 하므로, 쿠키보다 성능이 느릴 수 있습니다.

다음은 Node.js와 Express를 사용하여 간단한 세션을 설정하는 코드입니다.

const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
  secret: 'mysecretkey', // 세션 ID를 암호화하기 위한 키값
  resave: false, // 세션 데이터가 변경되지 않은 경우에도 서버에 다시 저장할 것인지 여부
  saveUninitialized: true, // 초기화되지 않은 세션을 저장할 것인지 여부
  cookie: { secure: false } // 쿠키 설정 (https에서만 사용할 것인지 여부 등)
}));

app.get('/', (req, res) => {
  if(req.session.views) { // 이전에 방문한 적이 있는 경우
    req.session.views++;
    res.send(`You have visited this page ${req.session.views} times`);
  } else { // 처음 방문한 경우
    req.session.views = 1;
    res.send('Welcome to this page for the first time!');
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

위 코드에서 express-session 패키지를 사용하여 세션을 설정합니다. secret 속성은 세션 ID를 암호화하기 위한 키값으로, 임의의 값을 지정할 수 있습니다. resave와 saveUninitialized 속성은 세션 데이터를 저장할 때의 옵션을 설정합니다. cookie 속성은 쿠키에 대한 설정을 지정할 수 있습니다.

app.get() 함수에서는 이전에 방문한 적이 있는 경우, 이전 방문 횟수를 세션 데이터에 저장하고, 이를 출력합니다. 처음 방문한 경우에는 세션 데이터에 1을 저장하고, "Welcome to this page for the first time!"을 출력합니다.

위 코드에서는 서버에서 세션을 관리하는 방식으로 간단한 예시를 보여주었습니다. 보다 복잡한 상황에서는 데이터베이스와 연동하여 세션을 관리하는 방식 등 다양한 방법을 사용할 수 있습니다.

마무리

쿠키와 세션 둘다 서버에서의 상태유지를 관리하는 방법중 하나이므로 반드시 필요한 것 같습니다 쿠키보다 세션이 더 안전한 것 같아서 아마 세션을 더많이 쓸 것 같습니다. 세션을 공부더해야될 것 같습니다.

profile
화이팅

0개의 댓글