주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

back작업01번에 이후 작업을 진행하겠습니다. 실제 api 요청과 응답 값 받아서 로그인 절차를 진행해보겠습니다. Front front 하위에 sagas 폴더를 생성한 후에 관리할 파일명으로 js파일을 생성합니다. 예를 들어 user 정보를 관리할 것이다라고 한다면 user.js가 되겠죠. 저는 user.js로 만들었습니다. sagas는 리덕스 생태계 패키지입니다. 비동기 작업을 세분화 시킬 수 있습니다. reducer는 리액트의 상태 생성자입니다. 액션이 오면 리듀서가 스토어의 상태를 변경시키는 방식으로 동작합니다. reducers와 sagas를 짝으로 사용하기때문에 동일한 파일명으로 작업했습니다. 두 파일모두 확인해보겠습니다. sagas/user.js api 호출 주소는 back의 서버 포트를 입력..

보안 강화를 위해 Chrome 80부터 SameSite의 기본 속성값이 None 에서 Lax로 변경되었습니다. 현재 Chrome 84 에서 코로나로 인해 기능을 롤백했지만 Chrome 84이후(안정적인 버전, 7/14일 이후) 다시 재개할 계획이라고 합니다. 해당 속성의 변화는 Chrome 80 이상의 웹 브라우저만 해당하며 이후 Firefox, Edge등의 브라우저도 동일하게 적용한다고 합니다. , , , , 등에서 영향이 있습니다. Android의 chrome에는 적용하지 않으며 iOS의 chrome은 영향이 없습니다. SameSite 3가지 속성 None 쿠키 사용에 있어서 소스가 되는 주소를 검증하지 않습니다. 동일 사이트, 크로스 사이트에 모두 쿠키 전송이 가능합니다. Strict 보안 정책으로..

쿠키란? 쿠키, 스토리지 비교 쿠키 사용의 예시 /** * 쿠키 세팅 * @param {string} value 쿠키 저장할 name * @param {string | number} days 쿠키 저장 날짜 * @example * this._setCookie('레이어팝업123', 7); */ _setCookie(value, days){ const date = new Date(); date.setDate(date.getDate() + Number(days)); document.cookie = this.uniqueName + "=" + escape(value) + "; path=/; expires=" + date.toUTCString() + ";" } /** * 저장한 쿠키 가져오기 * @param {str..

요약 데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장 할 때 사용하는 것 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다. 대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다. 글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다. (form) 쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장 할 때 사용한다. 방문자의 이동 경로를 저장하였다가 이동 시에 사용한다. 그 외 서버에 저장할 필요가 없는 정보들을 저장 할 때 사용한다. 가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다. 쿠키 브라우저 요청이 있을 경우 자동으로 ..