회사에서 Next.js 프로젝트를 개발하다가 이슈를 만났다.
/pages/some...path/[id]/index.tsx 이런 식으로 컴포넌트를 만들었고 이 페이지 url은 id=123인 경우 https://domain..name/some...path/123 이렇게 된다. 라우터 훅을 사용해서 router.push('/some...path/123') 이렇게 처리를 하면 동적 라우팅(dynamic routing) 처리가 되어 문제 없이 해당 페이지로 페이지가 이동한다.
문제는 이 페이지에서 새로고침(refresh)을 할 경우이다. 분명히 컴포넌트가 있는데 새로고침을 하면 403 에러가 뜨면서 접근을 할 수가 없다고 나오는 것이 아닌가?
분명히 페이지는 처음에 잘 나타났는데, 이후에 새로고침을 하면 페이지가 에러가 나는 것이 이해가 잘 되지 않았다.
배포의 경우는 AWS S3에 정적 빌드 파일을 저장해서 AWS cloudfront로 연결해서 가져오는 방식이었다.
디버깅을 여러차례 한 끝에 새로 고침을 한 경우 router.pathname 값이 /some...path/[id] 이렇게 나타나고 있음을 알게 되었다. 그래서 S3 버킷이 /some..path/[id] 라는 이름으로 만들어진 것이었다. 그래서 당연히 /some...path/123 이라는 이름의 버킷이 없고 그래서 400번대 에러가 나타난 것으로 발견이 되었다.
이 이슈는 다음과 같이 해결하였다.
AS-IS
- 디렉토리 : /some...path/[id]/index.tsx
- url : https://domain...name/some...path/123
TO-BE
- 디렉토리 : /some...path/detail/index.tsx
- url : https//domain...name/some...path/detail?id=123
const router = useRouter();
const [hospitalId, setHospitalId] = useState<string>('');
useEffect(() => {
const { hospitalId } = router.query;
if (hospitalId) setHospitalId(hospitalId as string);
}, [router.query]);이렇게 뒤에 쿼리 파라미터로 id값을 넣어주고 이 값을 /some...path/detail path에 도달했을 때 가져와서 사용하는 식으로 수정해 주었고 문제를 해결했다. 동적 라우팅을 쓸 때 다시 한 번 제대로 알고 써야 함을 깨닫는다.
'Web Frontend Developer' 카테고리의 다른 글
| Backend For Frontend는 무엇인가? (0) | 2022年05月13日 |
|---|---|
| [FeBase S3] SVG, Canvas, viewport와 viewbox (1) | 2022年04月17日 |
| [패캠] The RED : 김민태의 React와 Redux로 구현하는 아키텍처와 리스크 관리 (0) | 2022年03月23日 |
| 테스팅 라이브러리 (Testing Library) 란? (1) | 2021年12月24日 |
| [테스트] How To Test #1. Unit Test (feat. jest) (1) | 2021年11月24日 |