nextjs app router

Question

많이들 사용하시나요? 사용한다면 어느 조합으로 사용 하고 계신지 궁금합니다. 주로 궁금한거는 기존의 v13 or v14, 기존의 css-in-js 사용이 불가능한 상황에서 스타일링에는 무엇을 사용하는지, 별도의 데이터 패칭 라이브러리(swr, tanstack-query)와 전역상태도구(zustand, jotai)를 사용하는지. 음 기존 page router 쓰시던 분들은 프로덕션 레벨에서도 마이그레이션 해서 사용중인지도 궁금하네요

추가로 특정 조합에 장점이 있는지도 궁금합니다

감사합니다!

유길종 · Accepted Answer

저는 주로 tailwind-css를 이용하여 개발하고 있습니다.

저는 tailwind를 선호하는 편이지만 호불호가 강한 프레임워크이다보니 선호하지 않으시는 분들의 경우에는 제 주변에선 주로 scss 를 사용하시는 것 같아요

그 외에도 css-in-js의 스타일링 방식을 매우 선호하시는 분들의 경우에는 주로 css-in-ts라고도 많이 부르는 것 같은데 빌드타임 css-in-js 를 표방하는 프레임워크들을 사용하실 수 있습니다.

이것은 생각해보면 간단한 이유인데 css-in-js 방식을 채택하는 이모션, 스타일드컴포넌트와 같은 라이브러리들을 서버에서 사용할 수 없는 이유는 런타임에 css를 동적으로 평가, 생성하는 과정을 수행하기 때문입니다. 따라서 코드를 실행시켜봐야 css를 생성할 수 있다는 것인데 웹환경 자체에 대한 의존성이 있는 코드를 서버에서 실행시켜보는 것이 가능하지 않기 때문에 css를 평가할 수 없는 것이죠

따라서 코드를 실제로 실행시켜보지 않더라도 css를 정적으로 평가하고 생성할 수만 있다면 서버에서도 사용할 수 있습니다. 그러한 개념의 일환으로 빌드타임 css 프레임워크들을 생각할 수 있는 것입니다.

대표적으로 pandacss , 바닐라익스트랙트 등이 있는데 저같은 경우엔 pandacss의 개발자 경험이 괜찮았던 것 같습니다.

상태관리에 대한 질문도 남겨주셨는데 서버사이드 환경에 익숙치 않으신 분들의 경우 쉽게 의문이 생길 수 있는 영역입니다.

결론부터 말씀드리면 대부분의 경우 페칭라이브러리, 전역상태관리라이브러리는 사용해야합니다.

이것은 next.js와 같은 서버사이드에서도 동작하는 프레임워크를 사용하게되면 실제로 상태를 다루는 영역이 서버와 클라이언트 둘로 나뉘게 되기 때문인데요

서버쪽의 상태를 관리하는 것은 여러가지 솔루션이 있지만 서버쪽의 상태만 관리한다고해서 클라이언트측의 상태가 필요없어지는게 아니기 때문입니다.

서버상태까지 리액트쿼리로 관리할수도있고, 안할수도있습니다만 저같은 경우엔 클라이언트 상태는 주로 리액트쿼리를 이용하여 관리합니다.

조합은.. 상황에 따라 달라지거나 취향인 부분이 많을 것 같네요