~이전 이야기~
세션으로 대박 깨지고 멘탈 나가고 암튼 그랬음

⚠️ 해결 후 기억에 의존해서 쓰는 글

🪄 4트

session.touch()

req.session.touch()는 express-session 미들웨어를 사용할 때 사용할 수 있는 메소드입니다. 이 메소드는 세션의 lastAccess 시간을 현재 시간으로 업데이트하여 세션의 만료 시간을 연장합니다.

세션은 일정 시간동안 사용되지 않으면 만료되는데, touch() 메소드를 사용하면 사용자가 활동을 계속하고 있는 동안에는 세션을 유지할 수 있습니다. 이는 로그인된 사용자가 일정 시간동안 사이트를 이용하고 있는 경우에도 세션이 만료되는 것을 방지하는데 유용합니다.

따라서 req.session.touch()는 일반적으로 사용자의 활동에 따라 세션 만료 시간을 동적으로 관리해야 하는 웹 앱에서 자주 사용됩니다.

끝없는 구글링 지옥에서 이젠 챗gpt지옥으로 걸어들어왔다. touch()메소드가 있는 것은 알았지만 필요가 없는 것으로 알았단 말임...? 하지만 이게 이런게 있대서 touch()까지 사용을 해보기로 함.

    req.session.cookie.maxAge = 300000;
	req.session.touch();
    res
      .setHeader(
        'Set-Cookie',
        'connect.sid=s%3A' + req.sessionID + '; Max-Age=3600000;',
      )
      .json({
        success: true,
        message: SUCCESS_MESSAGE.SESSION_EXTENDS,
        expiredTime: req.session.cookie.expires.getTime(),
      });

음 지금 보니 왜 이렇게 코드를... req.session.cookie.maxAge = 300000;이거나 req.session.touch();이거나 역할은 같습니다. (멘탈이 좀 나가있었던듯...)

아무튼 이렇게 코드를 변경해본 결과!

이 때는 여차하면 새로 만들어진 쿠키로 세션을 바꿔치기를 할까 고민을 하고 있었기 때문에 최초의 쿠키와 내가 setHeader로 새로 만든 쿠키 두 개가 확인이 된다.

중요한 것은 저기 Expires 부분이다. (만료 시간이 3월 20일인건 왜지?... 시간만 봐가지고 그 땐 눈치채지 못했는데 일단 이건 넘어가도록 하자...)

이 상황에서 한 번 더 연장을 누르면

!!!!! 바뀐다

기존 쿠키 만료 시간은 여전히 변함이 없지만 새로 만들어진 쿠키의 만료 시간은 변한다!! 그것도 아주 잘!!! 와!! 하지만... 왜 기존의 세션은 건드리지 못하는 걸까... 여전히 알 수 없었다.

🪄 5트

그러던 중 문득 생각난 session.save() 메서드...! 초반 세션 생성 때 이 메서드 때문에 자꾸만 세션이 두 개가 생겨서 고생했던 기억이 스쳐지나가면서 혹시...? 이 친구가 여기에서 날 구원해줄까...? 하는 생각이 들었다.

    req.session.cookie.maxAge = 300000;
	req.session.touch();
	req.session.save()
    res
      .setHeader(
        'Set-Cookie',
        'connect.sid=s%3A' + req.sessionID + '; Max-Age=3600000;',
      )
      .json({
        success: true,
        message: SUCCESS_MESSAGE.SESSION_EXTENDS,
        expiredTime: req.session.cookie.expires.getTime(),
      });

그 결과 화면이다.

여전히 쿠키가 두 개 생기는 것은 문제이다. 하지만! 최초 쿠키의 만료 시간을 봐보자!

이 상황에서 다시 한 번 연장을 누르면!!

짠!!!! 시간이 바뀌었다!!! 이제 최초의 쿠키도 시간이 연장이 되는 것이다!! 와우!!!
res.setHeader만 지워주면 새로운 쿠키가 생성될 일도 없고, 우리는 세션 연장을 무사히 쓸 수 있는 것이다!! 하하하!!

🪄 6트

계속 궁금했던 건 새로 생긴 쿠키에 /api/account라는 path가 왜 생기는 걸까였다. 이게 뭔지 모르겠지만 그래서 세션 경로에 추가를 해주었다.

path 추가

	cookie: {
      sameSite: 'lax',
      secure: false,
      httpOnly: true,
      maxAge: 1000 * 60 * 5,
      path: '/api/account',
    },

짜잔~ 만료 시간도 잘 바뀌고~ 쿠키가 두 개 생기는 일 따위는 발생하지 않는답니다!!

이렇게 끝!!!

⚠️ 문제 상황 발생

인줄 알았다면 큰 오산임.

혹시나... 하는 생각으로 글쓰기 테스트를 해봤음. 그랬더니...

응~ 생성 실패야~

세션에 담긴 admin_name이 정의되지 않은 상태라 읽을 수 없다는 이야기다. 초창기에 많이 발생했던 에러였다. 야야... 잘만 읽어오던 녀석이 왜그래 갑자기... 나 슬퍼...

🪄 7트

다시 생겨난 생각지도 못한 에러에 다른 블로그를 유랑하면서 여러가지 로그인 방식을 참고하던 중 이 블로그에서 떠오른 생각이 있었다.

나 왜... 따로 저장할 생각을 여기에선 안 하고 있었던 걸까...? 다른데선 잘만 저장했었으면서...? 그래서 다급하게 data 변수에 세션 정보를 담아 코드를 완성해봤다.

그랬더니 결과는!

	const data = req.session;
    if (!data.admin_name) {
      console.log('NO SESSION DATA');
      return res.status(401).json({ message: ERROR_MESSAGE.NO_LOGIN });
    }
	// data.touch()는 중복인 것 같고 요즘은 거의 쓰이지 않는다고 하여 생략
    data.resetMaxAge();
    data.save();
    res.json({
      success: true,
      message: SUCCESS_MESSAGE.SESSION_EXTENDS,
      expiredTime: req.session.cookie.expires.getTime(),
    });

여전히 같았음. 하지만 그래도 대뜸 req.session을 던지는 것보다 기존 코드와 통일성도 있고 괜찮은 것 같았다.

🪄 8트에 성공 😭

계속해서 생각하던 중... 혹시 쿠키에 준 path가 문제인 것은 아닐까? 하는 생각이 들었다.

쿠키의 'Path' 옵션은 웹 브라우저가 쿠키를 서버에 전송해야 하는 URL을 지정하는 역할을 합니다.

예를 들어, 'Path=/books'로 설정하면, 이 쿠키는 웹 사이트의 '/books' 디렉토리 아래에 있는 모든 페이지에서 전송됩니다. 반면, 'Path=/'로 설정하면, 웹 사이트의 모든 페이지에서 쿠키가 전송됩니다.

이 Path 옵션은 쿠키의 범위를 제한하므로, 웹 사이트 내에서 특정 부분만 쿠키를 사용하도록 할 수 있습니다. 이를 통해 보안과 성능 최적화를 도모할 수 있습니다.

코드에서는 이 Path 옵션에 따라 쿠키의 접근성이 결정됩니다. 특정 디렉토리에 대한 쿠키 접근을 제한하거나, 전체 웹사이트에 대한 쿠키 접근을 허용하는 등의 조작이 가능해집니다. 따라서, 웹 애플리케이션의 동작 방식과 보안 수준에 직접적인 영향을 미치게 됩니다.

뤼튼의 친절한 설명... 원래는 공식 문서를 자주 읽는 편이고, 이번 세션 관련한 이슈가 굉장히 많았기 때문에 공식문서라면 이골이 난 상황이라 냅다 gpt에게 질문을 갈겼다. 그랬더니 path의 역할에 대해서 이렇게 설명을 해줌.

그러니까, 내 오류는 당연한 거였다. /api/account라는 path를 주었으니 당연히 account 내에서만 사용이 가능한 쿠키가 되어버렸던 것이었다.

위에서 '왜 새로 만들어진 쿠키에 path가 생기는 걸까?'하는 의문도 풀리고 내가 잘못 사용하고 있었다는 것을 깨달았다.

그래서 다시 바꾼 쿠키 설정은 이렇다. 원래는 기본 path였지만 약간으 접근 제한을 줘봤음.

	cookie: {
      sameSite: 'lax',
      secure: false,
      httpOnly: true,
      maxAge: 1000 * 60 * 5,
      path: '/api',
    },

게시물 업로드 성공이지요 ^~^ 물론 쿠키 만료 연장도 잘 된다.

이렇게... 정말 길고 길었던 세션과의 싸움이 막을 내리는 것 같다.
하... 지금껏 성공이다! 생각하면 계속해서 다른 문제가 터지곤 했는데 ㅋㅋㅋ 글로 적어둬야지! 하고선 여태 못 적고 있다.

이번엔 테스트 하면서 캡쳐한 사진들 편하게 볼겸 해서 벨로그에 사진을 올리다보니... 이렇게 바로 올릴 수 있게 됨. 유후~^^ 연휴 전에 해결해서 정말 기쁘다.

그리고 세션 너 말이야 너...

마음같아선 이렇지만 절대 나중에 계속 보겟죠?... 인생이란.

그래도 이번에 세션 로그인 진행하면서 진짜 많이 배운 것 같다... 하하... 더이상 문제 없길...