비로그인 접속 시 로그인페이지 이동

if (response.status == 401) {
    alert("로그인이 필요한 서비스입니다.")
    window.location.href = "/users/login/index.html"

한 줄만 추가하는 간단한 작업이었습니다. 하지만 페이지를 이동하는 방법 중 href를 사용하는 방법과 replace를 이용하는 방법이 있었는데 해당 방법의 차이가 무엇이 있는지 알아본 결과

href를 이용하는 방법은 히스토리가 남아 뒤로가기를 했을 때 본래 있었던 페이지로 돌아 갈 수 있고, replace를 이용하는 방법은 페이지가 대체되기 때문에 뒤로가기를 했을 때 본래 있던 페이지가 아닌 메인페이지로 돌아간다는 것을 알게 되었습니다.

html코드 삽입 막기

innerHtml을 이용해 받아온 데이터를 입력해 주었는데 해당 방식을 사용하니 사용자가 의도적으로 html코드를 입력하면 그 html코드가 실행되는 것을 알게 되었습니다.

document.getElementById(`comment-content-${comment.id}`).innerText = comment.content;
document.querySelector(`#commnet-name`).innerText = comment.user.nickname;

그래서 innerHtml코드에 기입되는 변수들은 제거하고 getElementById, querySelector를 이용하여 해당 태그에 들어가야할 내용을 innerText로 넣어주니 html코드를 입력해도 글자로 받아들일 수 있게 되었습니다.

게시글 작성 버튼 광클 시 게시글 중복 생성

게시글 저장을 빠른 속도로 여러번 클릭하면 게시글이 중복 저장되는 현상이 있다고 피드백 받았습니다.

 createButton.disabled = true;
    setTimeout(() => {
        createButton.disabled = false;
    }, 2000);

게시글 중복 생성을 막기위해 선택한 방법은 작성 버튼을 클릭했을 때 일정 시간동안 버튼을 봉인하는 방법이었습니다. 일반적으로 버튼을 클릭하고 형식에 벗어나 알림이 뜨고 수정하는 일을 제외하고는 2초안에 버튼을 여러번 누를 일이 없다고 판단해 글이 저장되는 찰나의 시간동안 여러번 함수 실행이 되지 않게 2초동안 봉인하는 방법을 채택했습니다.

지도를 클릭하여 목적지를 생성할 때 도로명 주소 받아오기

var new_spotx = //x좌표
var new_spoty = //y좌표
var new_addr = // 주소가 들어갈 변수 선언
var geocoder = new kakao.maps.services.Geocoder();

geocoder.coord2Address(new_spotx, new_spoty, function (result, status) {
    var detailAddr = '주소를 가져올 수 없습니다';

    if (status === kakao.maps.services.Status.OK) {

        if (result[0].road_address) { // 도로명 주소가 있으면
            detailAddr = result[0].road_address.address_name; // 도로명 주소를 사용
        } else if (result[0].address) { // 도로명 주소가 없고, 지번 주소가 있으면
            detailAddr = result[0].address.address_name; // 지번 주소를 사용
        }

        new_addr = detailAddr;
    }
});

클릭하면 x좌표와 y좌표를 받아오고 마커를 지도에 새기는 코드에서 추가로 도로명 주소를 가져오는 코드를 작성했습니다.

geocoder를 사용해 x좌표와 y좌표를 입력해 해당 지점의 도로명주소를 가져올 수 있는데, 도로명 주소가 나오지 않는 현상이 있어 조건문으로 도로명 주소가 없을 경우 지번 주소를 사용할 수 있게 수정했습니다.