[TIL 2023.03.01] cookie의 옵션 / 순수함수

김헤일리·2023년 3월 1일

TIL

목록 보기

37/46

지식 보충을 위해 조금씩 정리를 해보자! #7

1. Cookie의 옵션

쿠키의 구성 요소

Name: 쿠키의 이름 (보통 key값으로 원할때 특정 쿠키의 값을 가져올 수 있다.)
Value: 쿠키의 저장된 값
Expires/Max-Age: 쿠키의 삭제 시간
- Max Age를 설정하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.
Domain: 쿠키가 사용되는 도메인을 지정
- 현재 도메인과 다를 경우 브라우저가 해당 쿠키 사용을 거부한다.
- 즉 다른 도메인에 대한 쿠키는 사용할 수 없다는 의미!
Path: 쿠키를 반환할 경로를 설정, 설정된 경우 Path가 일치하는 경우에만 쿠키를 전송한다.
- 쿠키의 path를 따로 명시하지 않으면 서버의 경로로 설정된다.
Secure: 보안 연결 설정
HttpOnly: Http외에 다른 통신 사용 가능 설정

쿠키의 종류

Session Cookie: 만료시간을 설정하고 메모리에만 저장되며, 브라우저 종료시 쿠키를 삭제한다.
Persistent Cookie: 장기간 유지되는 쿠키( Max-Age설정)로서, 파일로 저장되어 브라우저 종료와 관계 없이 사용 가능하다.
Secure Cookie: Https 에서 사용하고 쿠키의 정보를 암호화한다.
Third-Party Cookie: 방문한 도메인과 다른 도메인의 쿠키로, 보통 광고 배너를 관리 할때 유입경로를 추적하기 위해 사용한다.

Cookie의 MaxAge 옵션은 쿠키를 얼마나 유지할 것인지를 결정하고, Expires 옵션은 언제 폐기할 것인지 지정하는 옵션이다.

Expires의 경우, 브라우저는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제한다. 이때 쿠키의 유효 일자는 반드시 GMT(Greenwich Mean Time) 포맷으로 설정되어야 한다.

max-age는 expires 옵션의 대안으로, 쿠키 만료 기간을 설정할 수 있게 한다. 현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산한 값을 설정한다.

두 옵션을 동시에 설정하면 MaxAge가 더 높은 우선 순위로 적용된다.
이 두 옵션중 하나라도 설정하지 않으면 해당 쿠키는 브라우저가 닫힐 때 폐기 되기 때문에 쿠키를 빠르게 폐기하고 싶다면 옵션을 설정하지 않는 것이 좋고, 쿠키를 계속 사용하고 싶다면 두 옵션 중에 하나라도 설정해주는 것이 좋다.

2. 순수 함수

순수 함수에 대한 정의를 내리자면 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)다.
순수 함수는 동일한 매개변수가 주어지면 항상 결과를 반환해야하고, 원래 목적과 다른 효과(side effect) 를 만들지 말아야한다.

자바스크립트의 객체, 배열, 함수는 참조 타입(reference type)이다. 참조 타입은 그 값이 저장되는 것이 아니라, 그 값을 저장하고 있는 주소를 담고 있다.

만약 어떤 객체(또는 다른 참조타입)를 함수의 인자로 보내고, 함수 안에서 인자로 주어진 객체의 내용을 변경하면, 원본 객체도 그 값이 변하게 된다.

다시 말해, 외부에서 정의된 참조 타입을 함수 내부에서 변경시키는 것이다.

// impure addToCart mutates existing cart
const addToCart = (cart, item, quantity) => {
  cart.items.push({
    item,
    quantity
  });
  return cart;
};


test('addToCart()', assert => {
  const msg = 'addToCart() should add a new item to the cart.';
  const originalCart =     {
    items: []
  };
  const cart = addToCart(
    originalCart,
    {
      name: "Digital SLR Camera",
      price: '1495'
    },
    1
  );

  const expected = 1; // num items in cart
  const actual = cart.items.length;

  assert.equal(actual, expected, msg);

  assert.deepEqual(originalCart, cart, 'mutates original cart.');
  assert.end();
});

위의 함수는 cart에 item을 담고 리턴하게된다. 하지만 여기서 문제가 되는 것은 cart라는 객체의 내용이 변경되었다는 것이고, 만약 다른 곳에서 cart라는 객체를 다른 방식으로 사용하고 있었다면, 변경된 내용에 의해 예기치 못 하는 에러가 발생할 수 있다.

// Pure addToCart() returns a new cart
// It does not mutate the original.
const addToCart = (cart, item, quantity) => {
  const newCart = lodash.cloneDeep(cart);

  newCart.items.push({
    item,
    quantity
  });
  return newCart;

};


test('addToCart()', assert => {
  const msg = 'addToCart() should add a new item to the cart.';
  const originalCart = {
    items: []
  };

  // deep-freeze on npm
  // throws an error if original is mutated
  deepFreeze(originalCart);

  const cart = addToCart(
    originalCart,
    {
      name: "Digital SLR Camera",
      price: '1495'
    },
    1
  );


  const expected = 1; // num items in cart
  const actual = cart.items.length;

  assert.equal(actual, expected, msg);

  assert.notDeepEqual(originalCart, cart,
    'should not mutate original cart.');
  assert.end();
});

새로운 예시를 보면, 객체에 감겨있는 배열을 깊은 복사를 통해 복제를 하였고, 복제된 또 하나의 객체를 변경했기 객체의 불변성을 지켰다. 이제 외부에서 다른 방식으로 cart를 사용하고 있어도 addToCart 함수가 오리지널 cart를 변경 시키지 않았기 때문에 사이드 이펙트가 생성되지 않는 다는 것을 알 수 있다.

순수 함수의 장점

순수 함수는 실행 시점이 중요하지 않다.

순수 함수가 가지는 가장 큰 매력은 바로 실행되는 시점과 상관없이 항상 동일한 결과를 만들어내는 것이다. 순수 함수는 누가 언제 실행시키든 항상 동일한 기능을 수행한다. 다르게 말하면 멀티스레드 환경에서든 비동기적인 상황에서든 언제나 안전하게 믿고 사용할 수 있다. 반면 순수하지 않은 함수는 외부에 정의되어 있는 요소에 따라 결과가 판이하게 바뀌기 때문에 어떤 결과를 만들어 낼지 예측이 불가능하다.