useRef / Cookie의 MaxAge, Expires

새양말·2023년 4월 4일
0

내일배움캠프TIL

목록 보기
70/74
post-thumbnail

useRef가 필요한 상황을 예시를 들어 설명해주세요

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.
직접적으로 DOM 조작을 하지 않는 React에서 DOM 요소를 참조할 때는 useRef를 사용합니다. useRef를 사용하면 DOM 요소의 참조를 생성하고, 해당 요소를 직접 조작할 수 있습니다.

  1. 포커스 관리
    useRef는 포커스 관리에 사용될 수 있습니다. 예를 들어, 검색 필드가 있는 웹 페이지에서는 검색 필드에 자동으로 포커스가 되도록 설정할 수 있습니다. 이를 위해서는, useRef를 사용하여 검색 필드를 참조하고, useEffect 훅을 사용하여 검색 필드에 포커스를 주는 작업을 수행할 수 있습니다.

  2. 애니메이션 관리
    useRef는 애니메이션 관리에 사용될 수 있습니다. 예를 들어, 페이드인 효과를 적용하는 경우 useRef를 사용하여 요소의 투명도 값을 조작할 수 있습니다.

  3. 이전 값 저장
    useRef는 이전 값의 저장에 사용될 수 있습니다. 예를 들어, 이전 값을 저장하고 비교하여 변경된 값을 감지하고자 할 때 useRef를 사용할 수 있습니다.

이외에도, useRef는 useImperativeHandle과 함께 사용하여 자식 컴포넌트에서 부모 컴포넌트의 함수를 호출하는 것과 같은 다양한 상황에서 사용될 수 있습니다.

Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

세션쿠키와 달리 브라우저를 꺼도 데이터가 저장되도록 하는 영구쿠키에선 2가지 방식으로 유효기간을 설정할 수 있습니다.

먼저 MaxAge는 쿠키가 유효한 시간을 초 단위로 지정합니다.
(예를 들어, MaxAge=3600은 쿠키가 생성된 후 1시간 동안 유효하다는 것을 의미합니다.)
다른 방식인 Expires는 쿠키가 만료되는 날짜를 GMT 형식
(그리니치 평균시. 왜 지금 세계 표준인 UTC로 변경하지 않았을까?)으로 지정합니다. Expires 옵션은 MaxAge보다 우선합니다.

MaxAge와 Expires를 설정하지 않으면 브라우저가 종료될 때 쿠키가 삭제됩니다.
MaxAge만 설정된 경우: 쿠키가 유효한 시간이 설정됩니다. 만료일자는 현재 시간부터 MaxAge초 후가 됩니다.
Expires만 설정된 경우: 쿠키는 Expires에 지정된 날짜까지 유효합니다. 만료일자는 GMT 기준으로 설정됩니다.
쿠키의 MaxAge와 Expires는 보안 및 개인정보보호를 위해 중요한 옵션입니다. 특히 로그인 정보와 같은 중요한 데이터를 저장할 때는 유효기간을 적절히 설정하여 보안을 강화해야 합니다.

profile
매번 기합넣는 양말

0개의 댓글