Next 배포시 Dynamic Route 에서 404 가 뜨던 문제 해결
Next 로 배포를 하던 중 아주 치명적인 에러가 발생했다.
사용자의 프로필 페이지로 들어갈 때 404 에러가 뜨던 것이 원인이었다.
특별한 원인을 찾을 수 없던 발을 동동주처럼 구르던 중 해결책을 찾게 되었다.
여러 다방면으로 시도를 하던 중 vs코드의 터미널 콘솔에서 힌트를 얻을 수 있었다.
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".
:first-child
속성으로 인해서 서버사이드 렌더링 시에 문제가 발생한다는 문구였다.
부족한 영어실력으로 해석하자면 ":first-child"
속성은 SSR 시에 잠재적으로 안전하지 않으니 ":first-of-type"
으로 바꾸라는 문구였다.
여기서 힌트를 얻었다.
first-child vs first-of-type
div > p:first-child { color: blue; }
div > p:first-child { color: blue; }
위의 코드는 div 의 자식 p 요소 중 첫번째 요소의 글자 색상을 파란색으로 스타일링해주는 코드다.
가장 일반적으로 쓰이는 방식이고 나도 이 방식을 사용했다.
div > p:first-of-type { color: blue; }
위의 코드 또한 div 의 자식 p 요소 중 첫번째 요소의 글자 색상을 파란색으로 스타일을 입혀준다.
그럼 :first-child
와의 차이가 무엇일까?
<div>
<div>div element 1</div>
<p>p element 1</p>
<p>p element 2</p>
</div>
HTML 구조가 이렇게 있다고 됐을 때 위의 :first-child
의 경우 스타일이 입혀지지 않는다.
왜냐하면 first-child 는 "div element1"의 <div>
요소인데 앞에는 p
를 가리키면서 불일치하기 때문이다.
반면 :first-of-type
을 쓸 경우 p
요소만을 기준으로 div 의 자식 p 요소 중에서 첫번째 자식요소를 선택하게 된다.
즉 가상클래스 중에서도 '타입만을 체크'하는 것이기 때문에 비교적 '안전'하다고 볼 수 있다.
const Section = styled.section`
// ...
& > div:first-of-type {
cursor: auto;
}
& > div:last-of-type {
border-right: none;
}
`
때문에 코드 상에서 :first-child
와 :last-child
가 쓰이는 부분을 :first-of-type
과 :last-of-type
으로 수정해주었고 문제를 해결할 수 있었다.
Author And Source
이 문제에 관하여(Next 배포시 Dynamic Route 에서 404 가 뜨던 문제 해결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ckm960411/Next-배포시-Dynamic-Route-에서-404-가-뜨던-문제-해결저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)