DO MY BEST

📎  swr을 잘못 사용하면 패킷들을 마구마구 백앤드로 보내서 셀프 DDOS공격을 하는셈이 된다. 이를 막기 위해서 설정을 할 수 있다.

내가 원할 때 swr 호출하기

revalidate 함수

axios
    .post(
      ...
    )
    .then(() => {
        revalidate();
    })
    .catch((error) => {
        ...
    });

성공 했을 때 revalidate 호출 해주면 fetcher가 실행된다. 원래 내 정보가 들어있는 data는 revalidate가 실행되면 false가 된다.

swr 호출 주기를 늘리기

dedupingInterval

focusThrottleInterval

loadingTimeout

errorRetryInterval

errorRetryCount   

💡 swr은 요청을 보내서 받아온 데이터를 저장해둔다. post를 쓰지못하는 건아니지만 보통은 get 요청에 대한 데이터를 swr이 저장을 해준다.

이 때, 로그인을 할 때는 post요청이고 데이터를 돌려주는데 나는 swr을 쓰고 싶은 상황이다. 그러나 swr은 get요청만 되는데 어떻게 할까?

답: get 요청을 한번 더 보내면 된다. 내가 로그인을 했으니 내 정보갖다 줘라는요청을 서버에 보내주는 것이다.

🔨  설치 및 사용

터미널에 "npm i swr"

import useSWR from "swr";

📎  보통 형식은 이렇다

const {data, error} = useSWR(‘주소’, {config: withCredentials: true,}, 처리방식);

useSWR은 주소를 처리방식으로 넘겨준다. 이때주소는 처리방식에 매개변수로 넘어간다.
ex) const {data, error} = useSWR('http://localhost:3095/api/users', fetcher);


위의 예시의 fetcher를 따로 구현을 해보면 아래와 같다

const fetcher = (url) = axios.get(url, {config: withCredentials: true,}).then((response :AxiosResponse<any>) => response.data);

매개변수(url)로 주소가 넘어오면 그 주소로 axios.get요청을 보낸다. 그것에 대한 응답에서 데이터를 꺼내서 돌려준다. 그리고 그 데이터는 const{data, error}에 data에 들어가고 error는 서버에러 등이들어간다.

※ const fetcher = (url) = axios.get(url, {config: withCredentials: true,}).then((response :AxiosResponse<any>) => response);이면 const{response} 로 해야 한다.

※ 그리고 withCredentials: true를 해주어야 쿠키요청 응답이가능해진다. (백앤드와프런트 앤드의주소가 다를 때 필수 설정)

최종적으로

장점

• 로딩 상태도 알 수 있다. 만약 데이터가 존재하지 않으면 로딩 중이라는 뜻이다.
• 다른 탭에 갔다가 오면 자동으로 요청을 보내서 항상 최신 화면으로 유지시켜준다.

제로초 블로그[웹사이트]. (2021.06.25). 
URL: https://www.zerocho.com/category/HTTP/post/5b4c4e3efc5052001b4f519b

Access-Control-Allow-Origin

프론트엔드 개발자들에게 악명 높은 헤더입니다. 요청을 보내는 프론트 주소와 받는 백엔드 주소가 다르면 CORS 에러가 발생하는데요. 이 때 서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에 프론트 주소를 적어주어야 에러가 나지 않습니다.

Access-Control-Allow-Origin: www.zerocho.com
Access-Control-Allow-Origin: *

프로토콜, 서브도메인, 도메인, 포트 중 하나만 달라도 CORS 에러가 나서 슬픕니다. 만약 주소를 일일이 지정하기 싫다면 *으로 모든 주소에 CORS 요청을 허용하면 됩니다. 단 그만큼 보안이 취약해집니다.

유사한 헤더로 Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등이 있습니다. Request랑 Allow에서 Method 단수 복수 주의하세요!

CORS 요청 시에는 미리 OPTIONS 주소로 서버가 CORS를 허용하는지 물어봅니다. 이 때 Access-Control-Request-Method로 실제로 보내고자 하는 메서드를 알리고, Access-Control-Request-Headers로 실제로 보내고자 하는 헤더들을 알립니다. Allow 친구들은 Request에 대응되는 애들로, 서버가 허용하는 메서드와 헤더를 응답하는데 사용됩니다. Request랑 Allow가 일치하면 CORS 요청이 이루어지는 것이죠.

Allow

Allow 헤더는 Access-Control-Allow-Methods랑 비슷하지만, CORS 요청 외에도 적용된다는 데에 차이가 있습니다. 즉 GET www.zerocho.com은 되고, POST www.zerocho.com은 허용하지 않는 경우, 405 Method Not Allowed 에러를 응답하면서 헤더로

Allow: GET

를 같이 보내면 됩니다. GET 요청만 받겠다는 뜻입니다.

Content-Disposition

응답 본문을 브라우저가 어떻게 표시해야 할지 알려주는 헤더입니다. inline인 경우 웹페이지 화면에 표시되고, attachment인 경우 다운로드됩니다.

Content-Disposition: inline
Content-Disposition: attachment; filename='filename.csv'

다운로드되길 원하는 파일은 attachment로 값을 설정하고, filename 옵션으로 파일명까지 지정해줄 수 있습니다. 파일용 서버인 경우 이 태그를 자주 사용하게 될 것입니다.

Location

300번대 응답이나 201 Created 응답일 때 어느 페이지로 이동할지를 알려주는 헤더입니다.

HTTP/1.1 302 Found
Location: /

이런 응답이 왔다면 브라우저는 / 주소로 리다이렉트합니다.

Content-Security-Policy

다른 외부 파일들을 불러오는 경우, 차단할 소스와 불러올 소스를 여기에 명시할 수 있습니다. 하나의 웹 페이지는 다양한 외부 소스들을 불러옵니다. 이미지도 불러오고 script 태그로 자바스크립트 파일들도 불러옵니다. 폰트나 스타일, 아이프레임도 불러오고요. 하지만 해커들에 의해 원하지 않는 파일을 불러오게 될 수도 있습니다. 악성 코드가 담겨져있는 파일이라면 큰 일이 나겠죠. XSS 공격 같은 것이 하나의 예시입니다. 이럴 때 Content-Security-Policy로 허용할 외부 소스만 지정할 수 있습니다.

Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src https:
Content-Security-Policy: default-src 'none'

self로 지정하면 자신의 도메인의 파일들만 가져올 수 있습니다. www.zerocho.com에서는 www.zerocho.com/logo.jpg를 가져올 수 있지만, www.nero.com/logo.jpg는 못 가져오는 것이죠. https:로 지정하면 https를 통해서만 파일을 가져올 수 있게 됩니다. 'none'으로 지정하면 가져올 수 없습니다.

default-src는 모든 외부 소스에 대해 적용되는 것이고요. 각각 따로 지정할 수도 있습니다. 두 개나 세 개 정도만 추려서 지정할 수도 있고요.

Content-Security-Policy: font-src 'self'; script-src https://www.zerocho.com 'unsafe-inline'; img-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'

font-src, script-src, img-src, style-src, object-src 등이 있고, 소스 옵션으로는 도메인이나, https:, 'unsafe-inline'(인라인 태그 허용), 'unsafe-eval'(eval 함수 허용) 등이 있습니다. 옵션들이 매우 많으므로 자세한 내용은 여기 서 참고하세요!

이 외에도 다양한 응답 헤더들이 있으나, 자주 보이는 것만 추려보았습니다. 혹시나 궁금한 다른 헤더가 있다면 댓글을 남겨주세요. 다음 시간에는 쿠키&캐시 헤더들을 알아보겠습니다! Cache-Control, Cookie, Set-Cookie, Expires, ETag 등의 헤더입니다.