[데일리 과제] 4월 4일

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

 

React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있지만,
React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다든지, 스크롤바 위치를 가져오거나 설정해야된다든지, 또는 포커스를 설정해줘야된다든지 등 정말 다양한 상황이 있을 것입니다.

→React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있습니다.

 

---

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

Expires : 쿠키가 삭제되는 만료 날짜를 설정합니다.

💡 쿠키를 파기하는 속성입니다. 해당 만료일은 UTC 시간을 기준으로 지정합니다.
💡 구조: Expires=<date>

const expired = new Date();
expired.setTime(expired.getTime() + expiresHour * 24 * 60 * 60 * 1000);

// 쿠키 예시 
document.cookie = `userId=adjh54; Path=/; Expires=${expired}`;

Max-Age : 쿠키가 삭제될 시간을 초 단위로 설정합니다
쿠키를 따로 설정하지 않았다면 브라우저의 생존주기와 동일하게 가기 때문에 사라지게 됩니다. Max-Age 라는 옵션을 통해 브라우저와는 별개로 쿠키를 외부파일로 저장하는 것이 가능합니다.

💡 expries의 대안으로 쿠키의 만료시간을 설정할 수 있게 해주는 속성
💡 구조: Max-Age=<number>
 
// 쿠키 예시 
document.cookie = `userId=adjh54; Path=/; Max-Age=3600`;

expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다. 이런 쿠키를 "세션 쿠키(session cookie)"라고 부릅니다.