NUXT로 혼자 웹사이트 만들기 1 소개

항상 고민하던 부분이 있습니다.

백엔드, 프론트엔드 어떻게 나눠야할까?

백엔드와 프론트엔드의 통신 이질감을 최대한 없애기 위해 한 저장소(리포지토리)에 놓고 여러가지 방법을 동원해도..

복잡함을 피할 수 없었습니다.

많은 이가 고민하는 곳에는 항상 해결된 방법이 존재하기 마련입니다.

바로 넉스트(NUXT)가 그런 고민을 조금 덜어주고 생산성을 높여줄 수 있다고 봅니다.

기존 모던웹(NEMV) 제작 를 이해하고(백엔드, 프론트엔드, 디비등의 개념..) 오셔야 진행이 수월합니다.

생산성이 핵심

구구절절한 세팅 스터디는 점차 사라지고 있습니다.

개발 흐름에 대해 읽어보기

이제는 프론트만 하면 배포는 다양하고 쉬운 방법이 존재합니다.

잘 만들어진 다양한 플랫폼을 잘 조립하는 것이 관건인 시대입니다.

빠르고 효율적인 생산성이 중요한 것입니다.

넉스트(NUXT)란

https://ko.nuxtjs.org/guide

Vue.js 어플리케이션을 만드는 프레임워크라고 소개되어 있습니다.

여러명이 연구를 거듭해 가장 보편적이고 쉽게 만들어서 생산성을 높힌 작품이라고 볼 수 있습니다.

리액트에 next가 있다면 뷰에는 nuxt가 있는 것입니다.

서버사이드? SPA?

아직 뭐가 뭔지 잘 모를 수 있습니다.

기존 강좌와 비교하며 설명을 드리겠습니다.

기존 방식

기존 강좌에서는 SPA를 사용해서 구현했습니다.

페이지 리프레쉬가 없어서 부드럽게 동작하고 서버 부하를 줄이는 것이 제일 큰 이유였습니다.

백엔드의 할일은 두가지 였습니다.

• 웹뭉탱이 전송: html과 js등이 포함된 클라이언트에서 돌아갈 프론트 자체
• API: 웹뭉탱이에서 화면 변화를 위해 주고 받는 데이터 처리를 위한 라우팅

처음에 한번 웹뭉탱이를 내려 받고 나서 실제로는 API로만 백엔드와 송수신을 하는 것입니다.

SPA는 결국 웹뭉탱이 안에서 혼자 화면(DOM)을 동적으로 바꾸는 행위를 표현한 것이죠..

넉스트 방식

넉스트 또한 SPA로 작동합니다.

기존 방식처럼 뭉탱이도 던지지만 서버사이드렌더링을 통해 특정 페이지도 던질 수 있습니다.

서버사이드렌더링(SSR)는 언제 필요할까?

SPA라 하면 웹뭉탱이로서 사실은 index.html 하나 달랑 있는 것입니다.

html파일 헤드의 메타를 주로 이용하는 검색엔진(SEO) 최적화가 어렵습니다.

그렇다고 SPA를 버리고 예전 스타일로 매번 페이지(html)을 내려 주는 것은 부담이기 때문에..

적절하게 섞어쓰는 것이 중요한 것이죠.

물론 넉스트는 매번 렌더링 하는 것이 아닌 헤드, 메타 등의 값만 조절한다든지 해서 SPA의 사용자 경험을 가진 채로 동작하게 됩니다.

사실 넉스트가 아니더라도 서버사이드렌더링이라는 것은 어려운 일은 아닙니다.
res.sendFile(‘about.html’) 을 내려주면 그만이죠.. 익스프레스에는 그래서 pug 같은 제네레이터도 같이 깔린답니다..

적절하게 섞어 쓰는 시나리오

예를들어 이런 상황에 어울립니다.

• 상단에 회원명단이 있는 콤보박스(단 한번 호출)
• 하단에는 콤보박스에서 선택한 회원 정보(여러번 호출)

서버에서 콤보박스 채워서 내려 보내주면 클라이언트가 좀더 편하죠~

너무 많은 api호출 보다는 적절한 균형을 가진 개발을 할 수 있는 것이죠~

서버

파이어베이스나 아마존클라우드를 고려중입니다.

선정하게 된다면 가장 큰 이유는 아마도

• 가격
• 편의성: 서버 지식 최소, 프론트 중심적
• 유명도: 취업 희망하시는 분들을 위해…(사실 크게 어려울 것도 없고 비슷하지만.. AWS의 뽀대가 있죠..)

를 보게 될 것 같습니다.

영상