회원가입 없이 서비스 이용하기 (기록하기) / uuid, cookie-parser 예제 정리까지

이번 프로젝트에서는 사용자의 회원가입이 없이 기록을 관리하도록 만들기로 했다.

핸드폰 어플만 봐도 가입 없이 설치하면 바로 기록 관리를 할 수 있는 앱이 많기 때문에.. 어떻게 사용자의 기록을 관리하는 지 궁금해졌다.

앱과 웹 서비스와는 다른 모듈을 사용해야하지만..! (앱은 플랫폼에 맞는 웹뷰를 사용)

 

나는 웹 서비스를 만들고 있기 때문에 uuid와 cookie-parser를 이용한 쿠키와 로컬 스토리지를 사용하는 방법으로 결정했다.

 

쿠키와 로컬 스토리지를 사용

• 쿠키 또는 로컬 스토리지에 사용자 고유 식별자인 uuid를 저장
• 사용자가 웹 사이트를 방문할 때마다, 이 식별자를 사용해 데이터 조회, 업데이트 가능
• 식별자가 없으면 새로 생성하여 DB에 기록하고 사용자 장치의 쿠키나 로컬 스토리지에 저장

 - 장점 : 구현 용이, 사용자 식별, 비회원 데이터 관리, 세션 간 지속성(세션이 끝나도 쿠키 남음 -> 브라우저 닫고 다시 열어도 기록 유지)

 - 단계별 동작

• (1) 처음 접속
  • 서버는 접속한 사용자의 새로운 고유 식별자 생성(예 userId). 주로 uuid로 생성됨
• (2) 이후 접속
  • 사용자가 웹 사이트에 다시 접속 시, 브라우저는 저장된 모든 쿠키를 서버로 전송 -> 여기에 userId 포함
  • 서버는 요청에 포함된 쿠키에서 userId 확인
    • 그 후 userId 를 사용해 DBd에 기록된 해당 사용자의 데이터를 가져와 이전에 접속한 사용자임을 알 수 있음

 

uuid와 cookie-parser 설치 명령어

npm install uuid cookie-parser

• uuid : 고유 식별자를 생성하는 모듈, 사용자마다 고유 ID를 만들 때 유용
• cookie-parser : express에서 쿠키를 쉽게 다룰 수 있게 해주는 미들웨어, 사용자 id를 쿠키에 저장하고 가져오는 작업을 간편하게 해줌

 

예제코드 (gpt)

const express = require('express');
const cookieParser = require('cookie-parser');
const uuid = require('uuid');
const app = express();

app.use(cookieParser());

app.use((req, res, next) => {
  let userId = req.cookies.userId;

  if (!userId) {
    // 처음 방문한 사용자라면, 새로운 ID 생성
    userId = uuid.v4();
    res.cookie('userId', userId, { maxAge: 1000 * 60 * 60 * 24 * 365 }); // 1년 동안 유효
    console.log('New user assigned ID:', userId);
  } else {
    // 기존 사용자라면 쿠키에서 가져온 ID를 활용
    console.log('Returning user ID:', userId);
  }

  req.userId = userId; // ID를 req 객체에 저장하여 다음 미들웨어에서 접근 가능
  next();
});

app.get('/', (req, res) => {
  res.send(`Hello, user ${req.userId}`);
});

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

• userId = uuid.v4()
  • uuid.v4() : uuid 라이브러리에서 제공하는 함수 / *UUID(Universally Unique Identifier)**
  • UUID : 무작위로 생성된 고유 식별자 문자열, 쿠키에 저장되는 값
  • 예) uuid.v4() 호출 -> "b1a3bba0-9f45-4e2b-90c5-5d7f2cbfbd30" 같은 유니크한 문자열을 생성
• res.cookie('userId', userId, { maxAge: 1000 * 60 * 60 * 24 * 365 });
  • Express에서 쿠키를 설정하기 위한 함수
  • 첫 번째 매개변수: 'userId' 
    • 쿠키의 이름 / 이 이름으로 쿠키를 설정해 브라우저에 저장
    • 나중에 서버로 전송할 때 'userId'라는 이름으로 전달
  • 두 번째 매개변수: userId
    • 쿠키에 저장할 값, 앞에서 생성한 고유 식별자 userId를 저장
    • 예) userId 값이 "b1a3bba0-9f45-4e2b-90c5-5d7f2cbfbd30"이라면, 이 값이 'userId'라는 쿠키 이름으로 브라우저에 저장
  • 세 번째 매개변수: { maxAge: 1000 * 60 * 60 * 24 * 365 }
    • 쿠키의 옵션을 설정하는 객체/ 중요한 옵션: maxAge
    • maxAge: 쿠키의 유효 기간을 밀리초 단위로 설정
      • 예제 -> 1000 * 60 * 60 * 24 * 365로 설정해 1년 동안 쿠키가 유효 (1년 후 쿠키 만료)
      • 1000 밀리초 = 1초
      • 60 * 1000 = 1분
      • 60 * 60 * 1000 = 1시간
      • 24 * 60 * 60 * 1000 = 1일
      • 365 * 24 * 60 * 60 * 1000 = 1년
• app.use((req, res, next) => { ... })
  • express 에서 사용하는 미들웨어 함수의 예 / 모든 요청에 대해 특정 로직 실행
  • app.use() : express 애플리케이션의 모든 라우트와 http 메서드(get,post...)에 대해 미들웨어를 적용하는 역할
    • Express 애플리케이션의 미들웨어를 설정
    • 지정된 URL 경로나 조건 없이, 모든 요청에서 실행
  • (req, res, next) => { ... }
    • req (요청 객체): 클라이언트의 요청에 대한 정보가 담겨 있는 객체
      • 예) 요청 본문(req.body), 요청 URL(req.url), 쿠키(req.cookies) 등을 포함
    • res (응답 객체): 서버가 클라이언트에 응답할 때 사용하는 객체
      • 응답을 보내기 위한 메서드(res.send(), res.json(), res.cookie() 등) 포함
    • next (콜백 함수): 현재 미들웨어에서 작업이 끝났음을 알리고, 다음 미들웨어로 요청을 전달하는 함수
      • 이 함수가 호출되지 않으면, 요청은 다음 단계로 넘어가지 않고 현재 미들웨어에서 멈춥니다.

  - next 예제로 더 알아보기

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

app.use((req, res, next) => {
  console.log('첫 번째 미들웨어');
  next(); // 다음 미들웨어로 이동
});

app.use((req, res, next) => {
  console.log('두 번째 미들웨어');
  next();
});

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

 

실행 흐름

1. 첫 번째 미들웨어: 요청이 들어오면 첫 번째 미들웨어가 실행되고 next()가 호출됩니다.
2. 두 번째 미들웨어: next()로 인해 두 번째 미들웨어로 요청이 전달되고, 여기서도 next()를 호출합니다. 
   1. 다음 미들웨어 또는 라우트 핸들러로 이동 -> 위 예제에선 get으로 이동
3. 라우트 핸들러: 마지막으로 app.get()의 핸들러가 실행되어 'Hello, World!' 응답을 보냅니다.