6. 회원 관리 기능 구현

1. 화면 구성

Bootstrap의 collapse를 이용해 다음과 같이 관리자 메뉴를 클릭하면 관리자 메뉴인 [회원 관리, 출입 조회]가 나타나도록 구현

관리자메뉴 클릭 전

관리자메뉴 클릭

 

 

회원 관리 페이지는 다음과 같이 Bootstrap의 table로 구현, 각 회원의 정보와 회원을 수정, 삭제할 수 있는 버튼 배치

다른 관리자 메뉴인 출입 조회로 이동할 수 있는 버튼도 왼쪽에 배치

 

수정 버튼 클릭 시 해당 회원에 대한 정보를 모달창에서 수정 가능(input 태그)

 

 

별 표시(*) 되어있는 필수 입력 항목을 입력하지 않으면 아래와 같이 경고 메시지 출력

수정 버튼 클릭 시 입력한 내용으로 회원 정보가 수정되고, 테이블 새로고침됨

 

삭제 버튼 클릭 시 아래와 같이 해당 회원을 삭제할 것인지 경고 모달 출력, 삭제 버튼 클릭 시 해당 회원 삭제되고 테이블 새로 고침됨

 

 

 

2. 회원 정보들은 페이지가 로드될 때 필요한 정보들을 아래와 같이 가져와 모든 회원들을 forEach로 배열에 추가

가져온 회원 정보들은 아래와 같이 v-for로 모두 테이블에 출력

 

 

3. 수정 버튼 클릭 시 v-if를 통해 모달 창이 생성되며 다음과 같이 v-model을 이용하여 처음 load()에서 가져온 회원 정보와 매핑되어 수정되도록 구현

이 때 실시간 양방향 매핑으로 취소 버튼을 클릭해도 테이블에 반영되므로 취소 버튼 클릭 시 회원 배열 비우고 다시 load 하도록 처리

 

 

4. 백엔드의 MemberService에서 입력 값을 검증

필수 입력 사항인 값에 빈 값이 오면 오류 메시지를 리턴

이렇게 받은 오류 메시지를 axios.catch에서 받아 경고 메시지가 뜨도록 처리

 

 

 

5. 회원 정보 수정은 JPA Repository의 UPDATE문을 사용하지 않고 영속화 된 Member를 수정하면 더티체킹 되어 DB에 반영(flush) 되는것을 이용하여 처리

 

 

 

6. 회원 삭제는 간단하게 JPA Repository를 사용하여 DELETE

 

 

 

 

7. 문제 해결

문제: 삭제할 회원이 출입 체크 기록이 있다면 Entry 테이블에 연관관계가 생겨 삭제 불가능 에러 발생(다음과 같이 Entry 엔티티에 Member가 외래 키로 존재하기 때문)

해결: Member 엔티티에 Entry 리스트 추가 후 CascadeType.REMOVE로 자식까지 모두 제거 되도록 처리

이 때, Member 엔티티에 Entry를 추가하고 Member 모델을 가져올 경우, Member 안에 있는 모든 속성들이 가져와지는데,

Member 안의 Entry도 가져와짐 => Entry도 Member를 속성에 포함하고 있기 때문에 아래와 같은 무한 참조 발생

Member => List<Entry> => Member => List<Entry> => ...

해결: JsonIgnoreProperties를 이용하여 Entry를 가져올 때 안에 있는 Member는 가져오지 않도록 처리

 

 

 

 

8. 테스트

이김강 회원을 수정

 

이름을 이방방 으로 수정, 휴대폰 번호를 끝자리 1112로 수정, 나이를 21로 수정, 직업을 대학생으로 수정

회원 정보 수정됨

수정 전의 1111로 로그인 시 로그인 불가능

수정된 1112로 로그인 시 로그인 되며 바뀐 회원 이름으로 나옴

 

이방방 회원 삭제

 

삭제 시 다음과 같이 테이블과 DB에서 사라짐