Nuxt js 무엇에 쓰는 물건인고?
첫인상
이 글을 쓰는 목적은 단순하다. Nuxt js 를 공부해오라고 회사에서 숙제를 받았기 때문이다. 똥 누러 갈 때랑 올 때 마음이 다르다는 말이 새삼스럽게 와닿는다. 오래 전 나는 배우고 성장할 수 있는 회사를 무척이나 꿈꿨었는데, 막상 출근하기 시작하니 퇴근하면 놀고 싶다(...) 게다가 집안일도 해야 되고(투덜..)
React 전용 서버사이드 렌더링 프레임워크인 Next.js 로 처음 프론트 개발을 시작한지 두달정도 된 시점에서, Nuxt.js 에 대한 아주 개략적인 정리를 해보고자 한다.
1.Vue js 전용 서버사이드 렌더링
React 와 Vue 모두 자바스크립트 웹 프레임워크이다. 서버사이드 렌더링이란 초기 렌더링 속도를 줄이고 동적으로 바뀌는 부분만 사용자의 접근에 따라 유동적으로 바꾸어주는 렌더링 방식인데, React 와 Vue 는 이 방식의 적용이 불가능했기 때문에(쉽지 않았기 때문에...?) 각각 Next js 와 Nust js 라는 서버사이드 렌더링 프레임워크를 개발, 채택하게 되었다.
2. Next js 보다 가볍고, 간편하다. (알아서 다 해주는 느낌)
레이아웃 파일에 <Template><nuxt></Template> 태그 세개만 이렇게 넣어주면 이 레이아웃을 활용할 파일에 일괄적으로 같은 레이아웃 디자인을 파바밧! 적용할 수 있다. 뷰에서는 이렇게 최대한 간편하고 효율적으로 공통레이아웃에서 시작해 코드조각들을 쌓아나가는 것이 메인인 것처럼 보인다.
그런데 사실 리액트도 부모 컴포넌트와 자식 컴포넌트로 이와 거의 비슷한 방식의 구조를 짤 수 있다. 그런데 리액트에서 코드를 짜다보면 대체로 개별파일을 개별적으로 짜게 되는 경우가 많고 공통적으로 이용할 컴포넌트는 아주 작은 조각인 경우가 많다. (나는 그렇다) 가령 동일하거나 비슷한 모양으로 사용되는 버튼이나 인풋에 약간의 props 옵션을 추가해서 공통으로 사용하는 식이다. 아니면 아예 가장 상위에 있는 컨테이너에서 마진과 패딩과 백그라운드 색상 정도만 잡아놓고 여러 컴포넌트에서 동일하게 사용하는 방식이다.
쓰다 보니 생각난 건데, 리액트에서도 map 을 돌려야하는 반복적인 형태의 컴포넌트는 하나의 레이아웃 컴포넌트를 만들고 그 안에 맵을 돌린 item 들을 넣어주거나, props 를 전달해주는 방식으로 활용하는 경우가 꽤 많았다. 그렇지만 분명한 건, 리액트는 모든 컴포넌트에서 기본적으로 동일한 레이아웃을 활용할 준비를 갖추고 개발을 시작하지는 않는다. 그러나 뷰에서는 번듯한 레이아웃 디렉토리가 준비된 채로 시작하게 된다. 물론 최초에는 가장 기본적인 레이아웃만 잡아주는 default.vue 파일만 들어있지만 말이다.
3. store
React 에서 context 에서 전역적인 state 관리를 했듯이 store 라는 곳에 전역적으로 사용할 state 를 넣어서 관리할 수 있는 모양이다.
4. 라우팅과 미들웨어
users > index.vue / users > _id.vue 로 리스트 페이지와 개별페이지를 나누는 중첩라우팅, 동적라우팅 방식은 리액트와 동일한 것 같다. 다만 특정 페이지로 갈때 반드시 특정 미들웨어를 거쳐가도록 (로그인을 거쳐야 하는 상황 등) 라우팅 하는 방식은 대략적으로는 감이 오는데 왜 필요한지, 어떤 사례가 있는지 아직 좀더 찾아봐야 한다.
회사 가서 뭐 공부했는지 이야기해야 하는데 큰일났다
Photo by Denys Nevozhai on Unsplash
