안녕하신가?
거의 1년만에 돌아온 프론트엔트 개발자 하상원이다.
그 동안 블로그를 작성하지 않았는데, 이제 공부를 재개하기 때문에 아마 종종 작성될 것이라고 생각한다!
이전 회사에서 고통스러운 시간과 함께, 개발이 약간 싫어질 뻔 했다만..
아쉽게도 코드는 죄가 없다. 응 회사를 바꾸면 그만이야~
지금은 극복하고 진화한 메탈 하상원몬 상태라고 할 수 있다.
하여튼 지금 비트코인 사이트 클론 코딩을 해보고 있다.
그 이유로는 아래의 문답 때문이다.
친구 : 코인 사이트 만드는거 어렵겠지?
나 : ㅇㅇ
친구 : 왜?
나 : 음... 아마 어렵지 않을까?아마 어려울텐데, 왜 어려운지 모르겠다. 그래서 만들어보기로 한다!!
나는 간단하게 개인 프로젝트로 만들더라도 react보다 next.js를 선호하는 편인데,
그 이유가 pages 폴더 구조로 간단하게 라우팅이 가능한 것 때문이다.
그런데 이게 무슨일인가. create next app을 했는데 pages 폴더가 보이질 않는다.
검색해서 알아보니 기존의 page router 방식에서 App router라는게 추가되었다고 한다!
(설치하면서 다 Yes 한 것 중에서 app router 사용이 Yes로 추천되고 있다!!)
감사한 Next.js 님의 추천이니 App router를 사용하기 위해,
기존 page router의 차이점과 App router를 어떻게 쓰는지 등을 알아보고 블로그에 적어보겠다.
일단 공식 문서에서의 app router 설명을 번역해봤다
버전 13에서 Next.js는 공유 레이아웃, 중첩 라우팅, 로드 상태, 오류 처리 등을 지원하는 React Server Components 기반의 새로운 App Router를 도입했습니다.
앱 라우터는 앱이라는 이름의 새로운 디렉터리에서 작동합니다. 앱 디렉터리는 페이지 디렉터리와 함께 작동하여 점진적인 채택을 허용합니다. 이를 통해 이전 동작을 위해 페이지 디렉터리에 다른 경로를 유지하면서 응용 프로그램의 일부 경로를 새 동작으로 선택할 수 있습니다. 응용 프로그램이 페이지 디렉터리를 사용하는 경우 페이지 라우터 설명서도 참조하십시오.
Good to know : 앱 라우터가 페이지 라우터보다 우선권을 갖습니다. 디렉터리 간의 경로는 동일한 URL 경로로 해결되지 않아야 하며 충돌을 방지하기 위해 빌드 시간 오류를 발생시킵니다.
음. 대충 읽어보니 내가 착각한 것 같다. 방식이 앱 라우터와 페이지 라우터로 나뉘는게 아니라,
페이지 라우터 기능은 그대로 있고, 앱 라우터라는 뭔가 상위의 고급 기능이 생긴 듯 하다.
설명에 써져있듯이, 앱 라우터가 페이지 라우터보다 우선권을 갖는다고 하니,
앱 라우터를 사용하는 환경에서도 페이지 라우터를 사용하는 듯 하다.
앱 라우터의 하위 폴더에 대한 자세한 내용은 공식 문서에 써져있으니 굳이 복붙하지는 않겠다
정보를 찾다보니 스오플(스택오버플로우라는 뜻ㅎ)에서 비교표와 함께 요악본을 찾아서 첨부한다.
추가 고려사항:
SEO: 앱 디렉토리의 페이지는 기본적으로 서버에서 렌더링되므로 잠재적으로 SEO에 더 좋습니다.성능: 앱 디렉터리의 서버 구성 요소는 성능상의 이점을 제공할 수 있습니다.유연성: 앱 라우터는 중첩된 레이아웃과 데이터 가져오기에 더 많은 유연성을 제공합니다.마이그레이션: 기존 프로젝트를 앱 라우터로 마이그레이션하려면 약간의 노력이 필요할 수 있습니다.
권장사항:
새 프로젝트: 최신 기능과 유연성을 갖춘 App Router로 시작하세요.기존 프로젝트: 앱 라우터로 마이그레이션하기 전에 잠재적 이점을 평가합니다.단순 라우팅: 간단한 라우팅이 필요한 소규모 프로젝트에는 페이지 라우터가 충분할 수 있습니다.복잡한 라우팅 및 데이터 요구 사항: 앱 라우터가 더 나은 선택일 가능성이 높습니다.
위의 자료와 nextjs 개발 블로그를 확인해보니, 기존 page router 방식의 pages 폴더 안에 무조건 페이지가 들어가는 방식에서, 더 많은 유연성을 줄 수 있는 요소들이 추가되었고, SEO 성능 증가 등이 있는 것 같다.
하지만 더 복잡해지고, 내가 원했던 폴더 구조로 페이지를 파악할 수 있는 기존의 장점들은 빈약해지는 것 같다.
나의 경우는
서버 없이 firebase를 사용해서 만드는 점,
협업 없이 혼자서 하는 개인 프로젝트인 점,
등을 감안해서 앱 라우터를 사용하는 것보다 기존의 페이지 라우터를 사용하는 것이 나을 것 같다.
고로 app router에 대한 글은 여기까지 작성하도록 하겠다.
다음에 사용할 일이 있다면 이 글을 보충하겠다!!!
굿바이 !
참고
https://nextjs.org/blog/june-2023-update
https://nextjs.org/docs/app/building-your-application/routing
What is different between App Router and Pages Router in Next.js?
I have started learning next.js in Next.js official documentation: next.js official document The document mentions two router features; App Router and Pages Router. What's the difference between th...
stackoverflow.com
'Coding > REACT' 카테고리의 다른 글
| [React + Next.js] Redux toolkit 사용하기 (0) | 2022.09.26 |
|---|---|
| [React] setState를 해도 렌더링이 안되는 이유 (0) | 2022.09.26 |
| [React] Context API + useReducer 로 전역 상태 관리 하기 (0) | 2022.08.23 |
| [React] 동적 라우팅 (0) | 2022.06.26 |
| [React] component, state, props, useEffect 연습 ( Monsters ) (2) | 2022.06.18 |
댓글