24.01.15 TIL

오늘의 트러블 슈팅

어제부터 프론트 구현과 함께 토스 결제 API 연동 개발에 들어갔다.
근데 문제점

1. 401 Unauthorized

tossPayments = TossPayments(key);

해주는 과정에서, 키 값이 권한이 없는 거다라는 오류가 주구장창
..........
분명 공식 사이트에서 받은 값을 잘넣어줬는데 문제가 발생
계속해서 다른 값도 넣어주고 다시 넣어주고를 반복하니 됏다....
왜 됐지????
뭔가 뒤에 공백이라던가 .... 이런게 들어간거 같다....
됐으니뭐

2. 로그인 여부 확인 후, 헤더에 표시되는 메뉴가 달라져야하는데

function checkLoginStatus() {
    var token = Cookies.get('Authorization');

    // 로그인 상태 확인 API 호출
    $.ajax({
        url: "/api/v1/auth/status",
        type: "GET",
        headers: {
            "Authorization": token
        },
        success: function (data) {
            if (data.isLoggedIn === true) {
                // 로그인 상태일 경우 처리
                $("#logout, #mypage, #name, #charge").css("display", "block");
                $("#name_a").text(data.user.nickname);
                $("#login, #signup").css("display", "none");
            } else {
                // 비로그인 상태일 경우 처리
                $("#login, #signup").css("display", "block");
                $("#logout, #mypage, #name, #charge").css("display", "none");
            }
        },
        error: function (jqXHR, textStatus) {
            console.error("Error checking login status:", textStatus);
        }
    });
}

이 함수로 로그인 여부를 체크하고 그에 맞게 메뉴들을 hidden or show 처리를 해주는데,
어떨 때는 나오고, 어떨 때는 전부다 히든이고 이런식으로 페이지가 렌더링됐다.....

그래서 GPT에게 상담을 했더니,

비동기 문제: checkLoginStatus 함수가 비동기적으로 실행될 수 있기 때문에, 다른 스크립트가 실행되는 동안 로그인 상태가 변경될 수 있습니다. checkLoginStatus 함수가 완료된 후에 UI를 조작하도록 확인하십시오.

라는 답변과 이러한 코드를 알려줫다.

function checkLoginStatus() {
    var token = Cookies.get('Authorization');
    var deferred = $.Deferred();

    // 로그인 상태 확인 API 호출
    $.ajax({
        url: "/api/v1/auth/status",
        type: "GET",
        headers: {
            "Authorization": token
        },
        success: function (data) {
            if (data.isLoggedIn === true) {
                // 로그인 상태일 경우 처리
                $("#logout, #mypage, #name, #charge").css("display", "block");
                $("#name_a").text(data.user.nickname);
                $("#login, #signup").css("display", "none");
            } else {
                // 비로그인 상태일 경우 처리
                $("#login, #signup").css("display", "block");
                $("#logout, #mypage, #name, #charge").css("display", "none");
            }
            deferred.resolve(); // 작업이 끝났음을 알림
        },
        error: function (jqXHR, textStatus) {
            console.error("Error checking login status:", textStatus);
            deferred.reject(); // 에러 발생을 알림
        }
    });

    return deferred.promise();
}

오~ 잘됐다. 그런데 문제는
공통으로 사용하는 헤더를 JQuery를 가지고 load 시켜주도록 코드를 수정했는데,

$(document).ready(function () {
    $("#headers").load() 
    checkLoginStatus();
});

다시 문제가 발생했다....

팀원의 도움을 받아 해결했는데, 원인이 load는 비동기 함수라, load 가 끝나든 말든간에 checkStatus가 호출되기 때문에 어떨 때는 잘 적용되고, 어떨 때는 안되는 것이었다.

$(document).ready(function () {
    // 페이지 로드 시 로그인 상태 확인 후 UI 업데이트
    $("#headers").load("/header.html", function (response, status, xhr) {
        checkLoginStatus();
    });
});

이렇게 수정해줌으로써 load 함수 즉, "header.html"을 완전히 로딩해준 후에 checkLoginStatus를 호출함으로써, 잘 작동했던 것!!
많은 것을 깨닫게되었다..ㅎ