이 글을 진행하기 전에 먼저 작성해야하는 내용이 있습니다.
Nuxt에 관하여 논할 레벨이 아니지만, 제가 기대했던 방향과는 달리 실제 사용경험에서 느꼈던 부분을 이야기해보려합니다. 지금도 역시 제가 Nuxt를 잘 이해하지 못하고, 쓸 줄 몰랐기 때문이라고 생각하고 있습니다 : )
Nuxt!?
아, 그러고보니 Nuxt가 무엇인지부터 시작해야겠군요.
Nuxt는 Vuejs 기반으로 만들어진 SSR(Server Side Rendering) 오픈소스 프로젝트입니다.
홈페이지의 설명을 덧붙이자면, Vuejs 프로젝트를 진행할 때 서버부분을 미리 구성하여 보다 나은 UI 렌더링을 제공하고, static(정적) 페이지를 만들어내는 기능들을 포함하고 있다고 합니다.
또한 프레임워크의 레벨로서 비동기 데이터, 미들웨어, 레이아웃등과 같은 클라이언트/서버 사이에 개발해야하는 부분들을 많이 줄여준다고도 적혀있습니다.
제가 React는 깊게 사용해보지 않았지만 React 진영에도 이미 Nextjs라는 SSR 오픈소스 프로젝트가 있는 것으로 알고 있고, 이와 비슷하게 Nuxt가 탄생한 것으로 알고 있습니다.
본론으로 돌아와서, Vue와 서버를 동시에 해야할 상황이 오게 되면서 Nuxt를 선택하게 되었습니다. 저 같은 경우는 Static페이지를 만드는 목적보다는 서버와의 원활하고 간편하게 통신하며 개발할 수 있기를 원했습니다.
Nuxt가 (무조건) 좋을 줄 알았다.
처음에 Nuxt로 새 프로젝트를 만들었을 때, CLI에 의해 쉽게 프로젝트를 시작할 수 있어서 이 부분은 굉장히 만족스러웠습니다. 혼자서 SSR 구성을 하며 이 모든 것을 준비했다면 분명 엄청 고생하고, 중간에 포기 했겠지요.
CLI를 통해서 만들다보니 기본적으로 vue-router, vuex 들은 이용할 수 있도록 디렉토리가 준비되어 있기 때문에 기존에 Vue로 즐겨 개발했다면 익숙하게 시작할 수 있을 것 같았습니다 : )
Nuxt. 장점이 확실히 많이 있었습니다. 홈페이지를 처음 만들게 되면 당연히 여러 검색엔진에 노출이 되어야하는데, 일반적인 SPA로 개발하게 된다면 영원히 검색엔진에서 조회될 일은 없겠지요. SSR로 구성되어 있는 Nuxt를 이용하게 되면 서버렌더링으로 화면을 보여주다보니 검색엔진봇들이 각 화면들을 잘 긁어갈 수 있습니다. SPA로 개발하나 SEO를 걱정할 필요가 없게되는 거지요.
그다음은 Express가 뒤에서 돌아가다보니 SPA임에도 서버가 뒤에서 돌고 있습니다. 이 뜻은 내가 원하는 API를 한 프로젝트에서 만들어서 사용할 수 있다는 것이지요. 그런데 저는 여기서 문제가 발생했습니다.
제가 Nuxt를 사용하면 좋겠다라는 부분이 단순이 백엔드/프론트엔드를 한 프로젝트에서 개발할 수 있지 않을까에서 시작했습니다.
분명 한 프로젝트에 있으니 간편한 것 같기는 하나 애매한 부분들이 분명 존재했습니다.
한예로, API를 요청하다가 500에러가 발생할 수도 있겠죠? (제가 예외처리를 잘 못해서 이런오류가 자주 발생하나 봅니다 ㅠ)
멘붕…
그런데 500에러가 떨어지면 프론트엔드에는 오류발생상태로 전달해줘야 프론트엔드에서 예외적으로 처리하거나 할텐데, 왜인지는 모르겠으나 Nuxt에서 에러가 발생하면서 에러페이지로 리디렉션… 후덜덜
멘붕을 겪게되고, 하나하나 절대 오류가 나지 않도록 열심히 만졌습니다…. Nuxt가 Express 위에 올라가 있다보니 Express에러나면 Nuxt에서 그 예외를 받고 바로 오류처리를 진행하는 것 같았습니다.
이로 인해, 꾸역꾸역 진행했지만 처음에 생각했던 것 만큼은 만족스럽지 않았던 것 같습니다.
다만 처음에 Nuxt로 진행하고 API부분을 별도 서버프로젝트로 구성해서 했다면 훨씬 괜찮지 않았을까 생각이 드네요.
그 이후에 다시 SEO문제로 인해 Nuxt를 다시 시작하게 되었고, API코드는 분리하여 진행하기로 했고, 이 부분을 제외하니 나쁘지 않다라는 생각이 들기는 합니다.
잘 알고 쓰자 ㅇ_ㅇ
당연히 SSR쓰는 이유라면 SEO를 해결하고, 정적페이지를 만들기 위해 시작하시는 분들이 대다수이겠지만, 몇몇 저처럼 서버까지 한 프로젝트에서 진행해야지! 라는 생각으로 접근하시는 분들도 분명 계실 것이라 생각됩니다.
Nuxt가 지향하는 프로젝트의 방향을 먼저 숙지하고 고민한다음 시작한다면 저처럼 고생하거나 하지는 않을 것 같네요
이상 Nuxt가 좋다하여 그냥 사용해본 진블로그의 포스팅이였습니다.
감사합니다.
댓글 영역