7월 3일 월요일 TIL 회고록

프론트엔드 구현

---

로그인을 한 뒤 메인화면에 가면 사용자의 이름이 나오면서 ~~님 반갑습니다. 란 문구가 나오게 만들었다.

 

.ajax(settings).done(function (response, status, xhr) {
  console.log(response);
  console.log(xhr.getResponseHeader('Authorization'))
  localStorage.setItem('accessToken', xhr.getResponseHeader('Authorization'))
  alert("로그인 성공");
  window.location = '/index.html'           
}).fail(function(response) {
    console.log(response.responseJSON);
    if(response.responseJSON.statusCode === 404) {
        alert('아이디와 비밀번호를 확인 해 주세요.');
    } else {
        alert('서버에 문제가 발생하였습니다.');
    }
});

먼저 매개변수로 response, status, xhr을 받는다.

로그인을 하면 response의 값이 콘솔에 표시되고, xhr.getResponseHeader()를 사용해 Authorization의 값이 콘솔에 표시된다. 

그 후 localStorage.setItem을 이용해 xhr.getResponseHeader('Authorization') (Value)의 값을 accessToken (Key)에 담는다.

로컬스토리지 : 사용자(로컬)에 저장하는 임시저장소. 영구적. windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장, 조회가 이루어진다.

 

function getUserMe() {
    var settings = {
        "url": "http://localhost:8080/api/user/me/profile",
        "method": "GET",
        "timeout": 0,
        "headers": {
          "Authorization": localStorage.getItem('accessToken')
        },
      };
      
      $.ajax(settings).done(function (response) {
        console.log(response);
        console.log(response.nickname);
        $('#loginUser').empty();
        $('#loginUser').append(response.nickname + '님 반갑습니다.');
      });
}

response를 매개변수로 받는 getUserMe() 함수를 만들었다.

"headers"에 "Authorization"의 값을 localStorage.getItem('accessToken)를 받도록 만들었다. 

함수가 실행되면 response와 response.nickname이 콘솔에 표시된다. 

그리고 $('#loginUser')의 값을 비운 뒤 (empty()), append를 사용해서 (response.nickname + '님 반갑습니다')를 넣었다.

<div id="loginUser" style="float: right;"></div>

 

실행 결과

---

지도 마커 수정

현재 위치 마커와 검색 결과 마커 아이콘을 바꿨다.

 

현재 위치 마커

 

검색 결과 마커

---

현재 고치고 있는 부분

카카오 API를 사용해서 상세 정보가 나오는 커스텀 오버레이를 만들었다.

근데 저기 X버튼이 안먹힌다. 누르면 htmldivelement.onclick 오류가 나오면서 먹통이다..

구글링 해봐도 답이 없다.. ㅠㅠ 얼른 고쳐봐야겠다.. 왜 꼭 하나가 고쳐지면 하나가 안되는걸까..