폴더가 주소가 되는 next.js
D+47
next.js는 개성이 확실하다. 하면서 배우는(뚜드려 맞으며 배우는) 프로그래밍 오늘도 이야기를 펼쳐본다.
생각은 하지 말고 일단 받아들이자
next.js에서는 'pages'아래 파일은 한 웹사이트의 각각 페이지를 표시한다. 예를 들어 네이버라고 한다면 www.naver.com의 가장 메인이 되는 내용을 담는 파일은 pages/index.js가 된다. 만약 만들고자 하는 앱이 한 페이지짜리라면 이 정도만 있어도 충분하다. 하지만 보통 여러 페이지를 분산해서 만들게 된다. 자기 자신을 알리는 'about'페이지, 연락처를 기재한 'contacts' 페이지 등이 여기 속한다. 또한 블로그 홈페이지라면 'post/[각 id]'와 같은 식으로 페이지가 구성된다.
next.js 이외의 react방식은 react router나 axios 등을 이용했던 것으로 기억한다. 그것은 일종의 클라이언트 사이드 랜더링으로 볼 수 있을 것이다. 해당방식은 이 책에서 말하는 바에 의하면 SEO상 불리하고 매번 데이터를 백엔드에 요청해야 하기 때문에 보안상 불리하기도 하다 그런다. 초심자 입장에선 그냥 그런갑 보다 한 게 사실이지만.
코드와 화면으로 보자
위에서 설명한 것을 코드로 보면 위와 같다. 각 코드 안에 들어가 있는 내용보다는 폴더 구조에 주목하면 된다. 앱을 띄워서 보면 좀 더 자세히 볼 수 있다. 각 navigation bar에 해당하는 링크가 존재한다. 해당 링크를 클릭하면 각각의 위치로 갈 수 있다.
그러니까 하나하나 버튼을 눌러보면 'about' 버튼은 'root/about-us'로 연결되어 있다. root/about-us에 해당하는 페이지를 랜더링 해주는 친구는 about-us.js가 된다.
다시 정리를 하면, 내가 각 버튼에 링크를 만들어 놨다면, 해당 링크에 대응되는 페이지를 pages아래 만들어야 한다는 것이다.
하지만 포스트와 같이 유사하지만 각 고유번호가 다르다면?
블로그 포스팅을 생각해 보자. 가령 브런치의 경우 https://brunch.co.kr/username/number 형태를 띠고 있다. 그럼 이와 동일하게 next.js에서 한번 해보도록 하자. next.js에서는 변하는 값을 표현할 때 []를 게 되어있다. 그럼 위 url을 보면 username도 변수, number도 변수임을 볼 수 있다. 위 url을 위한 파일구조를 표현하면 아래 그림과 같다.
[username] 폴더와 [post]. js가 추가된 것을 볼 수 있다. 다소 난해한 표현방식이지만 된다는 게 더 난해하다. 각 폴더에는 index.js가 있어야 하기 때문에, index.js에 다음 내용을 넣었다.
그리고 [post]. js에는 다음과 같이 넣었다.
항상 export까지 해줘야 한다. 안 그러면 안 되는 것을 볼 수 있었다. 그럼 대응되는 페이지로 가보면 아래와 같이 볼 수 있다.
root아래 about-us, contacts를 제외한 나머지는 user페이지로 넘어가게 되어있다. 왜인지 갸우뚱하실 분들도 분명 있을 것이다. 그렇다. 사실 기술적으로 문제는 아니지만 직관적으로 이해가 가지 않는 폴더 구조이긴 하다. 여기선 개념적인 부분만 익히기 위해서 했으니 그 부분은 넘어가도록 하자. 최초 기획 의도는 user/id를 쓰면 포스팅이 보이는 기술적인 내용을 보고자 했으니 슬쩍 넘어가 보자
슬쩍 넘어가서 보면 위와 같이 잘 작동하고 있음을 볼 수 있다. 번호를 쓰나 post라고 쓰나 지금은 작동하지만 개념을 익혀서 번호 또는 타이틀에 맞게 변경되게 만드는 것이 나의 임무
오늘을 마치며
오늘은 next.js에서 각 page별로 내비게이션 하는 예제를 살펴보았다. 대괄호([])를 사용하는 다소 난해한 문법을 가지고 있으나 결과는 잘 나온다는 점이 신기했다. 특히 폴더구조 기반의 페이지 구성은 호불호가 갈리는 요소라고 한다. 나는 개인적으로 이러한 방식이 구조화가 잘되어서 좋긴 했다. 다만, 이런 예제가 흔치는 않은 거 같아 걱정은 된다. 왜냐하면 유사한 사례가 많을수록 시행착오를 쉽게 돌파할 수 있기 때문이다. 오늘은 이 정도로 마치고 내일 또 보충해 나가는 것으로.
