[TIL] 24.09.06 FRI

GDORI·2024년 9월 6일
0

TIL

목록 보기
33/79
post-thumbnail

이야.. 시간은 진짜 빨리간다.
불금불금 외쳤던 TIL 쓴게 어제 같은데 벌써 한 주가 흘렀다..
무섭다 😥

오늘은 오전에 알고리즘 코드카타를 진행하고 밀린 강의를 보았다. 전체 강의 시간은 얼마되지 않지만 집중력 이슈로 인해 몇번을 뒤로가기 눌러서 시간 지체가 많이 되었다.

내일 안으로는 강의 모두 완료 하고 개인과제 들어갈 생각이다.

[ 오늘 푼 알고리즘 코드카타 ]

118666. 성격 유형 검사하기
133502. 햄버거 만들기
161990. 바탕화면 정리

밑에는 오늘 공부한 강의 중 일부를 정리한 내용이다.
풀로 정리하기에는 시간이 부족하다...

쿠키와 세션은 사용자 정보를 저장하고 관리하는 데 사용되는 두 가지 주요 메커니즘입니다.

쿠키

개발자 Lou Montulli가 웹 쿠키를 개발하던 중 데이터를 저장하는 방식에 대해 고민하다가 그 당시 사용되었던 특정 데이터를 담고있는 작은 조각이라는 뜻을 지닌 magic cookie라는 용어를 떠올렸고 그렇게 cookie라고 불렸다합니다.

클라이언트 측에 저장되며, 사용자가 삭제하면 관련 정보가 삭제됩니다.
데이터를 여러 사이트에 공유할 수 있기 때문에 보안에 취약할 수 있습니다.
우리가 쇼핑몰에서 뭐 하나 보면, 광고가 따라 다니는 이유도 쿠키때문이죠.

세션

세션은 서버측에서 사용자의 상태를 저장하는 메커니즘입니다. 사용자가 접속하면 서버는 고유 세션 ID를 생성하여 클라이언트에게 전달하고 이 세션ID를 통하여 서버는 해당 사용자 정보를 추적합니다.
쿠키보다 안전하겠죠.

쿠키 만드는 법

2가지의 방법이 있습니다.
set-cookie
res.cookie()

set-cookie 의 경우 아래와 같이 작성합니다.

let expire = new Date();
  expire.setMinutes(expire.getMinutes() + 60); 

  res.writeHead(200, {
    'Set-Cookie': `name=sparta; Expires=${expire.toGMTString()}; HttpOnly; Path=/`,
  });
  return res.end();

현재 시간 + 쿠키를 유지할 시간을 expire 변수에 담고,
respon의 헤드부분에 Set-Cookie 안 데이터와 만료시간, args를 담아서 내보냅니다.

res.cookie()는 더 간편합니다.


let expires = new Date();
  expires.setMinutes(expires.getMinutes() + 60); 

  res.cookie('name', 'sparta', {
    expires: expires
  });
  return res.end();

쿠키 조회

기본적으로 쿠키는 Request의 헤드부분에 담겨져있습니다.

const cookie = req.headers.cookie;
  console.log(cookie); 
  return res.status(200).json({ cookie });

헤더부분에 있는 쿠키를 변수에 담고
그대로 json으로 응답해주면 됩니다.

cookie-parser 미들웨어를 사용하면, 더 간단하게 접근하고 쿠키의 내용을 json 객체로 받을 수 있습니다.


import cookieParser from 'cookie-parser';

app.use(cookieParser());

app.get('/get-cookie', (req, res) => {
  const cookies = req.cookies;
  console.log(cookies);
  return res.status(200).json({ cookie: cookies });
});

req.headers.cookie 부분이 req.cookies 로 바뀐 것을 알 수 있고, 조회되는 쿠키 정보도 json 객체인 것을 알 수 있습니다.

세션 만들기

let session = {};
app.get('/set-session', function (req, res, next) {
  
  const name = 'sparta';
  const uniqueInt = Date.now();

  session[uniqueInt] = { name };

  res.cookie('sessionKey', uniqueInt);
  return res.status(200).end();
});

set-session이 호출되면 name='sparta' 의 정보를 세션에 삽입하고 해당 정보를 검색하기 위한 시간정보를 쿠키로 전달합니다.

세션 조회


app.get('/get-session', function (req, res, next) {
  const { sessionKey } = req.cookies;

  const name = session[sessionKey];
  return res.status(200).json({ name });
});

쿠키에 담긴 sessionKey를 변수에 담아주고 그걸 토대로 세션 객체에서 조회 후 변수에 저장하여 json으로 응답합니다.

JWT가 뭔데..

JWT는 Json Web Token 의 줄임말로 서버, 클라이언트 간 정보를 안전하게 전송할 수 있는 웹 토큰입니다.

header.payload.signature 의 형식으로 3가지 데이터를 포함합니다.

JWT는 비밀 키를 모르더라도 복호화가 가능하기 때문에 민감한 정보를 담지 않도록 주의해야 합니다.
데이터 변조 방지용으로 생각하면 좋을 것 같습니다.

암호화


import jwt from 'jsonwebtoken';

const token = jwt.sign({ myPayloadData: 1234 }, 'mysecretkey');
console.log(token); // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJteVBheWxvYWREYXRhIjoxMjM0LCJpYXQiOjE2OTA4NzM4ODV9.YUmYY9aef9HOO8f2d6Umh2gtWRXJjDkzjm5FPhsQEA0

jwt.sign 메서드를 사용하여 JWT를 생성합니다.

복호화


import jwt from 'jsonwebtoken';

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJteVBheWxvYWREYXRhIjoxMjM0LCJpYXQiOjE2OTA4NzM4ODV9.YUmYY9aef9HOO8f2d6Umh2gtWRXJjDkzjm5FPhsQEA0";
const decodedValue = jwt.decode(token);

console.log(decodedValue); // { myPayloadData: 1234, iat: 1690873885 }

jwt.decode 메서드를 사용하여 JWT를 복호화 합니다.

검증


import jwt from 'jsonwebtoken';

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJteVBheWxvYWREYXRhIjoxMjM0LCJpYXQiOjE2OTA4NzM4ODV9.YUmYY9aef9HOO8f2d6Umh2gtWRXJjDkzjm5FPhsQEA0";
const decodedValueByVerify = jwt.verify(token, "mysecretkey");

console.log(decodedValueByVerify); // { myPayloadData: 1234, iat: 1690873885 }

jwt.verify 메서드를 사용하여 JWT를 검증 합니다.
JWT 생성 당시 사용하였던 시크릿키와 동일하지 않으면 에러를 발생시키고 동일하면 페이로드에 담긴 정보를 제공합니다.

profile
하루 최소 1시간이라도 공부하자..

0개의 댓글