며칠 전부터 계속 고생하고 있는 부분이 있었고, 그 부분은 해결해서 간단하게 기록을 해둬야겠다는 생각이 들었습니다...
문제 상황
현재 우리가 만들고 있는 서비스는 social login 기능을 구현해둔 상황이었습니다... 예를 들어 google auth 로그인을 시도해 성공하면 승인된 redirection URI를 보내주는데, 클라이언트 측에서 redirection URI을 받아서 몇가지 처리를 한 후 다시 메인 페이지로 보내주는 흐름으로 개발했습니다.
여기서 redirection URI는 제대로 받았는데 리액트에서 받은 경로를 인식하지 못해서 계속 404 not found 에러가 생겼습니다.
원인
항상 이건 react router 문제라는 걸 까먹고 있는 것 같습니다...
React 어플리케이션을 개발할 때, 주소 변경에 따라 화면을 업데이트하기 위해 React Router를 사용합니다. (
React Router는 사용자로 하여금 애플리케이션 내에서 다른 경로로 이동할 때 페이지를 다시 로드하지 않고도 해당 내용을 업데이트 할 수 있게 해주는데, 이런 라우팅은 주로 HTML5 History API를 사용하여 구현됩니다.
HTML5 History API는 브라우저의 주소 표시줄의 URL을 변경하고 페이지를 다시 로드하지 않고도 페이지 상태를 변경할 수 있는 메서드와 이벤트를 제공합니다.
이 API를 기반으로 클라이언트 측에서 라우팅을 처리할 수 있게 해주는 데 주의할 점이 있습니다. 서버 측에서는 클라이언트 측 라우팅을 알지 못한다는 점입니다.
즉, 사용자가 특정 경로로 직접 브라우저 주소창을 통해 접근하거나 새로고침을 하면 서버가 해당 경로에 대한 요청을 받지 못할 수도 있다는 것입니다. (서버가 정적 파일로 인식해 존재하지 않는 경로로 처리할 가능성이 높다고 합니다.)
원인 해결 과정
서버 측에서 클라이언트 측 라우팅에 대한 처리를 추가해 줘야 하는 것 같았습니다.
대표적으로 모든 경로에 대해 클라이언트 측에서 제공하는 HTML 파일을 반환하도록 설정하는 방법이 있다고 하는데...
따라서 지금 정적 웹 호스팅을 해주고 있는 nginx의 config 파일을 수정을 해주면 되지 않을까? 하는 상상을 했지만...
그런데 지금 시놀로지 나스 내 웹스테이션이라는 패키지를 통해서 정적 파일을 호스팅하고 있는 중이었고, 시놀로지 나스는 nginx.conf 파일을 아무리 만져도 원복이 된다는 문제가 있었습니다.
사실 이 부분은 이미 빌드 파일을 올리면서 몇 번 당했던 부분이라 ㅠㅠ nginx.conf를 아무리 만져도 안 될 것임을 눈치채고 다른 방법을 모색하기 시작했는데...
이 부분을 발견했고...
좀 더 들어가서 확인해 보니 default로 세팅 되어 있음을 확인 했습니다. (아마 웹 스테이션을 설치하고 난 후 디폴트 설정 그대로 되어 있는 것 같았습니다.)
이거 왠지 이용할 수 있을 것 같아서 구글링을 얼른 했고 이 분의 글을 발견했습니다. [참고 글]
이 분처럼 404 에러가 나는 페이지를 전부 index.html으로 돌려 버리면 될 거란 생각을 했습니다. 실제로 모든 경로에 대해 클라이언트 측에서 제공하는 HTML 파일을 반환하도록 설정하는 방법으로 처리를 할 수 있으니까...
똑같이 해주고 저장한 뒤 잘 동작하는지 확인해 봤습니다.
다른 팀원과 확인해본 결과 아주 잘 되고 있음을 테스트 할 수 있었습니다...!
느낀 점
항상 그렇지만 개발 단계 뿐만 아니라 배포 단계에서도 많은 문제들을 만날 수 있는 것 같습니다. 특히 배포 환경에서 마주칠 수 있는 문제들이라고 해야 할까요...
개발 코드에 매몰 되어 있었다면 해결하지 못했을 문제인 거 같다고 생각하면서도, 개발 코드에 매몰 되어 있었다 보니 실마리를 찾을 수 있었던 것 같기도 합니다.
이 문제만 해도 처음에 리디렉션으로 돌려준 URI를 받았을 때 뿌려지는 404 페이지가 저희가 준비해둔 404 페이지가 아님을 깨닫고 개발 코드에 문제가 있는 게 아니라 다른 부분에 문제가 있다고 추론하고 찾기 시작해서 해결할 수 있었으니까요...
(실제로 개발 단계에서는 리디렉션 URI를 잘 받아서 처리했으니 코드적 문제가 아니기도 했습니다... 애꿎은 빌드만 몇 번이나 한 건지... 주르륵...)
이런 문제들을 해결하는 것은 늘 경험에서 나오는 것 같습니다. 항상 처음 경험해보는 건 두렵긴 하지만 두려움을 이기고 경험해야 쌓이는 거 같습니다...
