관리자 페이지 새로고침 오류

euny0ung commented 2 years ago

📒 이슈 내용

관리자 페이지에서 새로고침을 하면 페이지 내용은 그대로인데 사이드 탭과 상단 탭 표시가 교수로 바뀝니다.

📑 상세 내용

예를 들어 공지사항 탭을 누르고 새로고침을 하면 페이지 내용과 url은 그대로 공지사항 페이지이지만 사이드 탭, 상단 탭이 교수로 바뀝니다.

✔️ 체크리스트

[ ] 오류해결

suinj8 commented 2 years ago

좀 심각한 이슈인거 같아서 꽤 오랫동안 검색해보고 알아봤습니다. 제가 도달한 결론은 이와 같습니다.

새로고침은 sessionstorage를 이용한다.
뒤로가기는 이것저것 다해봐도 해결이 안되어서
- 등록, 세부조회같은 경우는 따로 뒤로가기 버튼을 만들어 제공
- 전체적인 내용, 요약내용을 보여주는 큰 페이지에서는 브라우저 뒤로가기 버튼 감지 시 초기페이지로 강제 이동 (이 경우는 왼쪽 헤더를 통한 이동이 가능하므로 사실상 브라우저 뒤로가기 버튼이 무의미함)

1번 경우는 sessionstorage에 저장하고 새로고침 되면 useEffect가 재실행 되는 원리를 이용해보았습니다. 보통 이방법을 사용하여 해결한다고 합니다. 이 방식을 이용하는데는 추가적인 세팅이 필요했습니다. 이부분을 해결하면서 추가적인 에로사항이 있었는데 create-react-app을 이용하여 만든 리엑트 개발환경은 자동적으로 strict모드가 실행되는 것이었습니다. (index.js 파일을 보면 로 감싸져있는걸 볼 수 있음) 아래 링크로 자세하게 확인하실 수 있습니다. https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-react-strict-%EB%AA%A8%EB%93%9C%EB%9E%80

간략하게 설명하면 잠재적인 오류를 방지하기위해 랜더링을 두번 하는 방법입니다. 따라서 useEffect가 두번 실행되게 되고, 첫 실행에 sessionstorage에서 값을 불러와 state에 잘 넣어주지만 두번째 실행 때 다시 초기값이 state에 덮어지면서 새로고침 시 sessionstorage방식이 적용되지 않았습니다. 따라서 strict모드를 제거하고 실행해 보았고 새로고침 하여도 상단 text가 바뀌지 않는것을 확인하였습니다. (단, 새로고침 시 왼쪽 메뉴 collapse가 닫히고 클릭되어 있던 메뉴에 들어오던 색깔은 복구할 수 없었습니다.) (추가적으로 strict모드는 배포 시 작동되지 않는다고 합니다. 즉 개발환경에서만 안정성을 위해 리엑트에서 제공하는 방법입니다.)

2번문제는 비교적 간단하게 해결하였습니다. onpopstate이벤트를 통해 뒤로가기를 감지하고 감지 시 admin메인으로 강제로 보내게 만들었습니다.

위 내용들은 추가적인 해결방안이 있을 수 있고 오류수정과 member 등록하기 페이지도 같이 구현해보았기 때문에 PR은 하지 않았습니다.

수정사항은 아래 브랜치에서 확인 가능합니다. 봐보시고 의견 달아주세요. https://github.com/AI-Research-Center-Homepage/frontend/tree/feature/Admin_Member_Detail

euny0ung commented 2 years ago

확인 했습니다!! 오류 해결을 위해 정말 많이 노력하신것 같아요. 수고하셨습니다. 2번 같은 경우는 navigate(-1)를 이용한 뒤로가기도 감지되는건가요??

suinj8 commented 2 years ago

확인 했습니다!! 오류 해결을 위해 정말 많이 노력하신것 같아요. 수고하셨습니다. 2번 같은 경우는 navigate(-1)를 이용한 뒤로가기도 감지되는건가요??

좋은 지적이네요. 저도 몰라서 직접 실행시켜봤는데 -1도 감지해서 자동으로 admin메인으로 이동하네요. 따라서 뒤로가기 버튼을 만든다면 onClick={() => navigate("/admin/members/professor")} 이런식으로 지정해서 사용해주어야 할거 같습니다.

AI-Research-Center-Homepage / frontend