230707 백엔드/프론트엔드 코드 정리 [TIL]

<오늘 한 일/>

- 백엔드 권한 설정 및 수정

accompanies 앱

• 일단 accompanies 앱은 post, put, delete 요청뿐이라 ReadOnly가 필요하지 않다 그래서 permission_classes를 IsAuthenticatedOrReadOnly에서 IsAuthenticated로 수정했다

---

exhibitions 앱

• 전시회 작성 및 목록 조회 부분은 작성은 IsAdminUser가 적합하고, 조회는 AllowAny가 적합하기 때문에 get_permission 함수를 추가해서 조건문을 걸어주었다
• 그렇게 권한 설정을 했으므로 전시 작성함수에서 request.user가 admin 계정인지 확인하는 조건문은 필요하지 않으므로 삭제했다

• 전시 상세 조회 및 수정, 삭제 부분은 상세 조회는 AllowAny, 수정/삭제는 IsAdminUser가 적합하므로 get_permission 함수로 조건문을 걸어서 권한을 설정해줬다

• 좋아요 기능도 로그인 사용자만 이용 가능하므로 권한을 설정해주었다

---

reviews 앱

• accompanies 앱과 마찬가지로 조회 함수를 삭제해서 ReadOnly가 필요하지 않으므로 IsAuthenticated로 수정했다

---

- 프론트엔드 권한 설정 및 알림창 추가

좋아요

// 좋아요 하트 관련 코드
function heart(exhibition_id) {
    let fullHeart = false;
    if (payload) {
        postExhibitionLikeAPI(exhibition_id).then(({ response, responseJson }) => {
            const heartElement = document.getElementById(exhibition_id);
            const heartNum = document.getElementById(`heartNum${exhibition_id}`)
            if (response.status == 201) {
                heartElement.style.backgroundImage = 'url("../static/img/filled-heart.png")';
                heartNum.innerText = responseJson.likes
            } else {
                heartElement.style.backgroundImage = 'url("../static/img/empty-heart.png")';
                heartNum.innerText = responseJson.likes
            }
            fullHeart = !fullHeart;
        })
    } else {
        alert("로그인 후 이용 가능합니다.")
    }
}

• 17~19번째 줄을 추가했다
• 로그인 하지 않은 사용자가 하트를 클릭할 경우 "로그인 후 이용 가능합니다"라는 알림창이 뜨게 해서 비로그인 사용자로 하여금 로그인을 유도했다
• 하트를 눌렀을 때 알림창이 뜸으로써 해당 기능이 있음을 이용자로 하여금 상기시키는 역할도 한다

---

전시 작성

function checkAdminBackOfficePosting() {
    if (!payloadParse || !payloadParse.is_admin) {
        alert("관리자만 전시를 등록할 수 있습니다.")
        window.location.replace(`${frontendBaseURL}/`)
    }
}

checkAdminBackOfficePosting()

• 전시 등록 html에 url을 직접 입력하여 접속하는 경우 해당 페이지로 접근할 수 없게 함수를 만들었다
• 원래는 작성 페이지에서 작성하기 버튼을 눌렀을 때 관리자가 아닌 경우 전시 등록을 할 수 없게 막는 알림창이 있는데 아예 페이지에 접근조차 못하게 막고자 위 함수를 넣었다

• 페이지 접근 자체를 막았으므로 사실상 위 이미지의 else문을 만날 일은 없지만 그래도 백엔드에서 권한 설정을 했으니 실제적으로 전시 등록을 막는 문을 삭제하고 싶지는 않았다

---

회원 정보 수정

function checkNotRequestUser() {
    if (payloadParse.user_id != user_id) {
        alert("본인의 정보만 수정 가능합니다.")
        window.location.replace(`${frontendBaseURL}/`)
    }
}

checkNotRequestUser()

• 회원 정보 수정 페이지도 위 전시 등록과 마찬가지로 수정 페이지에 접속한 유저가 본인임을 확인하는 함수를 추가해줬다

• user_id는 수정 페이지의 url에서 가져온다

---

<느낀 점/>

• 나는 코드를 정리하고 통일시키는 것이 재밌는 것 같다
• 뭔가 자잘자잘한 일을 좋아하는 듯..ㅋㅋㅋ
• 권한 설정으로 디테일을 잡은 것도 뭔가 뿌듯하고~
• 실제로 아예 모르는 사람이 우리 프로젝트 코드를 봤을 때 잘 읽히려나..?
• 최대한 정리 한다고 했는데 내가 이미 이 코드의 구조를 알고 있기 때문에 더 깔끔하게 보이는 걸지도 ㅋㅋ
• 여튼 프로젝트가 진짜 끝나가는 것 같다~ 뿌듯..~