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..

LCS? LCS (longest common substring)는 두 문자열 사이에 가장 긴 공통 부분 문자열을 구하는 문제이다. dp를 이용해 쉽게 해결할 수 있다! str1 = "ABCGI" str2 = "ACGIK" dp = [[0] * (len(str2) + 1) for _ in range(len(str1) + 1)] result = "" for i in range(1, len(str1) + 1): for j in range(1, len(str2) + 1): if str1[i - 1] == str2[j - 1]: result += str1[i - 1] dp[i][j] += dp[i - 1][j - 1] + 1 else: dp[i][j] = max(dp[i - 1][j], dp[i][j - 1]) ..

이게머임? DP 알고리즘의 문제 해결 기법 중 하나로, 어떠한 수열이 주어졌을 때, 원소가 증가 혹은 감소 하는 형태(내림차순 or 오름차순)가 가장 긴 부분 수열을 찾는 방법! 길이가 n인 수열에서 dp 테이블의 모든 원소 값을 1로 초기화 한 후 dp[i]가 array[i]를 마지막 원소로 가지는 부분 수열의 최대 길이라고 정하면 점화식은 아래와 같다! 모든 0

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로 만들어서..