프로젝트 issue 기록 (feat. SPA 사이트 권한 설계)

Castle_Junny·2023년 3월 7일
0

프로젝트 이슈

목록 보기
1/4
post-thumbnail

서론

현재 진행하는 프로젝트는 지도 기반의 웹 사이트로서 지도 위에서 모든 페이지가 동작된다.
( 해당 프로젝트는 Vue.js 기반으로 진행하였다.)
그렇기에 Single Page Application(SPA) 방식으로 개발하였다.
SPA 방식으로 개발한 이유는 router를 탈 경우 지도가 초기화가 되기 때문이다.
쉽게 이야기하면 아래사진 처럼 지도상에 작업한 작업물을 초기화 시키지 않기 위해서이다.
그래서 이번 프로젝트는 지도위에 여러 컴포넌트들을 얹어서 on/off하는 방식으로 진행하였다.

직면한 문제

이러한 화면 설계를 하였을 때 직면한 문제는 크게 두가지가 있었다.


  1. 컴포넌트 간의 데이터 전달
  2. SPA(Single Page Application)의 권한 설계

1. 컴포넌트 간의 데이터 전달

1번의 문제의 경우 선택한 대상(건물)의 정보와 기타 데이터들을 '상세 상권 정보 보기' 클릭 시 '상권정보' 메뉴로 전달을 하여 '상권정보' 메뉴를 보여줘야 한다.

하지만, router방식이 아닌 컴포넌트를 on/off 하는 방식이다보니 *속도이슈를 대비하여 선택하지 않은 메뉴의 경우 조건부 렌더링 방식으로(v-if="false") 해당 메뉴가 선택이 되었을 때 렌더링이 이루어 지다보니 DOM을 찾지 못하는 현상이 발생하였다.

속도 이슈
프로젝트의 특성 상 많은 정보를 한 번에 보여줘야 했기에 로딩 시 다수의 API 호출.(SPA페이지의 단점)
호출이 많아지면 로딩이 지연됨으로 속도에 많은 관심을 가졌다.

DOM을 찾지 못하는 문제는 Vue.nextthic() (문서) 을 이용하거나 자주 사용하는 컴포넌트의 경우 초기 렌더링을 하는 v-show를 사용하여 해당 문제를 해결할 수 있었다.
그 외에도 다른방법으로도 문제를 해결할 수 있었는데, 이 부분에 대해서는 추후에 정리해봐야겠다.

2. SPA(Single Page Application)의 권한 설계

1. 권한은 다섯가지로 나뉜다. (관리자, C-level, 개발팀, 운영팀, 매니저)
2. 세부권한은 팀, 부서, 직급 별로 나뉜다.
3. 권한에 상관없이 특정 팀만 볼 수 있는 항목이 있다. 

가장 어려웠던 문제는 권한 설계였다. 권한을 설계하는 단계에서 다양한 이슈가 있었다.
외부적인 이슈를 제외하고 내부적으로 어려웠던 것은 우선 경험의 부족이었다.
개발을 리드 해주시는 분이 안계셔서 단순하게 분기처리를 하면 될거라고 생각하고 개발하였는데 "수정에 취약하고 관리가 어렵다." 라는 크나 큰 문제점이 있었다.

초기 권한설계 로직
하지만 다수의 메뉴를 관리하고, 사원 정보의 변경이 생겼을 때 오류가 발생할 확률이 높다.

문제 해결

  1. 신규 db 테이블 생성 (참조 1)
    1.1 각 메뉴의 depth를 구분하여 code값 생성(pk) : menu_table
    1.2 권한 별 default 권한 설정 테이블 : default_user_role_table
    1.3 유저 별 메뉴에 대한 권한 테이블 : user_menu_role_table

  2. (위에서 나눈) 각 컴포넌트에 권한체크 로직을 적용

    • template 부분
        <v-list-item v-if="authCheck('2C01100')">
            <v-list-item-title>메뉴 1</v-list-item-title>
          </v-list-item>
    • method 부분
      this.authMenu 는 user_menu_roel_table(1.3) 에서 조회한 값을 담고 있다.
     function authCheck (menuCd, authList = this.authMenu) {
            let visible = false
    
            if (!menuCd) return visible;
            
            authList.forEach((menu) => {
                if (menuCd === menu?.menuCd && menu?.menuRole === 'Y') {
                    visible = true
                }
            })
            
            return visible
        }

개선 권한설계 로직

이렇게 권한 설계 구조를 변경한 뒤에
1. 관리자의 권한 관리가 용이해졌다.
2. 회원 정보 변경이 발생하더라도 유연하게 대처할 수 있다.
3. 개발 시 고려할 사항이 줄어들었다

이 경험을 통해...

처음에 했던 권한설계 방식을 통해서 한동안은 괜찮았는데... 조금 씩 인사변동이 생길 때 마다 계속해서 문제가 터졌고 내 멘탈도 같이 터졌었다. 그래도 옆에서 잘하고 있다고 우쭈쭈 해준 팀원들 덕분에 다시 정신차리고 로직을 개선 할 수 있었다.
그래도 이 덕분에 "flag를 세워서 권한 설계를 할 수 있구나~" 라는 새로운 방법론에 대해서 배울 수 있었다.


참조 1. DB Table 구성

0개의 댓글