SOP Same Origin Policy → 동일 출처 정책. 동일한 출처(프로토콜, 호스트명, 포트가 모두 같아야 함)의 리소스에만 접근하도록 제한! https://duckgugong.kr:80 → https: 프로토콜, duckgugong.kr: 호스트명, 80: 포트 브라우저는 동일한 서버가 아닌 곳에서 받아온 데이터를 기본적으로 차단한다. 예를 들어 https://duckgugong.kr에서 로그인을 한 후 쿠키에 토큰을 받은 후 https://duck90.kr에 접속해서 axios나 ajax를 이용해서 HTTP 요청을 보내면 자동으로 쿠키에 토큰이 전송된다! 이러한 이유로 브라우저는 기본적으로 HTTP 요청(axios, ajax, javascript)을 동일한 출처로 제한했다! CORS Cros..

Why?refresh token과 access token을 사용할 때, 인증이 필요한 api 요청 시 access token이 만료되면 refresh token을 이용해서 access token을 받아온 후 요청하려고 했던 api를 다시 요청하는 axios interceptor를 구현해보자.만약, refresh token이 만료되면 로그인 페이지로 이동시키자! intercetor 구현서버에서는 refresh token과 access token을 header로 각각 X-REFRESH-TOKEN과 X-ACCESS-TOKEN으로 준다고 가정.refresh token과 access token 둘 다 백엔드의 보안 미들웨어를 통과하는데 필요하다 가정클라이언트는 refresh token을 local storage에..

What to do? react-slick이라는 라이브러리를 이용해서 간단하게(?) carousel(캐러셀)을 구현해보자. 우선 react-slick을 설치하자. yarn add react-slick 그리고 react-slick에 기본적인 디자인을 입혀줄 slick-carousel을 설치하자. yarn add slick-carousel react-slick과 slick-carousel만 이용하면 디자인이 별로?라서 조금의 커스텀을 해주었다. 위 두 라이브러리를 설치한 후 개발자도구를 열어서 태그의 classname을 확인하면서 누구든 css를 수정하면서 커스텀할 수 있다. 사용법 Slider 컴포넌트 우선 react-slick의 Slider 컴포넌트와 기본적으로 slide될 아이템들을 하나씩만 보이게 해..

Why? 기존의 video 엘리먼트의 디자인이 진행중이던 프로젝트와 어울리지 않아서 디자이너의 요청으로 아래처럼 재생 버튼이 가운데 있고 hover할 때 서서히 등장하고 volume 버튼도 오른쪽 위에 있고 hover할 때 서서히 등장하게 만들었다. react의 useState와 useRef를 이용하면 쉽게 만들 수 있다! video 엘리먼트의 autoplay 속성과 mute 속성의 초기값을 각각 false와 true로 정했기 때문에 그에 따른 state인 isPlaying과 isMuted를 각각 false/true로 만들고 이 상태값을 기준으로 버튼을 다르게 보이도록 구성했다! ref를 이용해서 play()와 pause() 함수로 비디오를 재생/정지 시켰고 muted 값을 true/false로 만들어서..