[TIL_Carrotww] 78 - 22/12/22

📝Carrotww의 코딩 기록장

🧲 javacript cookie 관련 함수 모음

쿠키 적용

• 기본

var setCookie = function(name, value, exp) {
    var todayDate = new Date();
    todayDate.setTime(todayDate.getTime() + exp*24*60*60*1000)
    document.cookie = name + '=' + value + ';expires=' + todayDate + ';path=/' + ';SameSite=None' + ';Secure';
};

• 내 코드
  프로젝트에서 조회수 중복 방지를 하기 위해 브라우저에서 게시글 번호를 쿠키에 담아 다음날 정각에 사라질 수 있도록 설정하기 위해 바꾼 코드이다.

var setCookie = function(name, value, exp) {
    var todayDate = new Date();
    var need_hour = todayDate.getHours()
    var need_min = todayDate.getMinutes()
    var need_sec = todayDate.getSeconds()
    todayDate.setTime(todayDate.getTime() + exp*24*60*60*1000)
    todayDate.setHours(todayDate.getHours() - need_hour);
    todayDate.setMinutes(todayDate.getMinutes() - need_min)
    todayDate.setSeconds(todayDate.getSeconds() - need_sec)
    document.cookie = name + '=' + value + ';expires=' + todayDate + ';path=/' + ';SameSite=None' + ';Secure';
};

exp를 1로 고정시켜주면 되지만 틀 그대로 사용하기 위해 사용할때 exp 파라미터에 1을 넣어주고 있다.

쿠키 가져오기

var getCookie = function(name) {
    var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value? value[2] : null;
};

가져올 쿠키의 이름을 지정해주면 된다.

쿠키 삭제하기

var deleteCookie = function(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
}

1999년도의 날짜가 들어가 있는 이유는 expire 시간을 터무니없이 먼 시간으로 잡아 날려버리려고 의도된 것이다.

🧲 cross domain cookie

🔍 cross domain 으로 쿠키를 전달하는 방법을 열심히 찾아보고 시도해봤지만 결국에는 실패하여 쿠키정보를 그냥 파라미터로 던져서 게시글 조회수 중복방지 처리를 하기로 하였다.

js

async function get_article_detail(article_id) {
    let article_view_str = getCookie('article_views')
    if (article_view_str) {
        let article_view_array = article_view_str.split('|')
        if (article_view_array.includes(article_id)) {
            const response = await fetch(`${back_end_url}/articles/${article_id}/?articleview=${article_view_str}`, {
                mode: 'cors',
                method: "GET",
                credentials: 'same-origin',
            })
            return response
        }
        else {
            const response = await fetch(`${back_end_url}/articles/${article_id}/?articleview=${article_view_str}`, {
                mode: 'cors',
                method: "GET",
                credentials: 'same-origin',
            })
            article_view_str += `|${article_id}`
            setCookie('article_views', article_view_str, 1)
            return response
        }
    }
    else {
        article_view_str = article_id
        setCookie('article_views', article_view_str, 1)
    }

    // deleteCookie('article_views')
    const response = await fetch(`${back_end_url}/articles/${article_id}/`, {
        mode: 'cors',
        method: "GET",
        credentials: 'same-origin',
    })
    return response
}

쿠키 함수는 위에 사용한 함수들을 사용하였다.
mode의 cors 설정과 credentials 설정들은 cross cookie 전달을 위해 이것 저것 해본 흔적인데 굳이... 지우지는 않았다.
클릭한 게시글 아이디 정보를 파라미터에 담아서 전달하므로 굳이 필요는 없다.

django

class ArticleDetailView(APIView):
    permission_classes = [permissions.IsAuthenticatedOrReadOnly]
    def get(self, request, article_id):
        article = get_object_or_404(Article, id=article_id)
        view_str = self.request.GET.get('articleview')
        if view_str:
            view_list = view_str.split('|')
            if str(article_id) not in view_list:
                article.views += 1
                article.save()
        else:
            article.views += 1
            article.save()
        slz = ArticleDetailSerializer(article)

        return Response(slz.data, status=status.HTTP_200_OK)