개발자 9Diin의 개발일기
Nuxt.js란 무엇인가? 본문
🚥 들어가기 전에 살펴보면 좋은 것
Vue.js란 무엇인가? https://sungjaecloud.tistory.com/290
Vue.js란 무엇인가?
상기 자료는 Vue.js가 무엇인지 필자의 소견대로 정리 작성한 내용입니다. 많이 부족하고, 다소 잘못된 부분이 있을 수 있기에 아래 자료를 보시는 분들께선 너그러이 이해해주시면 감사하겠습니
sungjaecloud.tistory.com
Vue.js 라이프사이클 훅은 무엇일까? https://sungjaecloud.tistory.com/335
Vue.js 라이프사이클 훅이란 무엇일까?
Vue.js라는 매력적인 자바스크립트 프레임워크를 가지고 처음 개발을 할 때, (필자 기준) 가장 어려웠던 점은 이번 포스팅에서 다룰 '라이프사이클 훅'이었다. Vue.js라는 언어를 가지고 공부를 한
sungjaecloud.tistory.com
이번 포스팅에서는 Nuxt.js란 무엇이고, 개념과 구조를 알아보는 시간을 가져보고자 한다. 가장 먼저 Nuxt.js를 배워보기에 앞서 알아야 할 개념이 있는데 그게 바로 CSR과 SSR 개념이다. 사용자가 자신의 컴퓨터에서 어떤 특정한 사이트를 보고 싶다고 가정해보자. 통상적으로 컴퓨터에서 서버에 데이터를 요청하고, 서버에서는 요청받은 데이터를 컴퓨터로 응답해준다. 이때 응답 값으로는 HTML, CSS, JS가 해당될 수 있다.
먼저, CSR(Client Side Rendering) 클라이언트 사이드 렌더링에 대해 간단히 살펴보자면, 페이지 렌더링을 통해 화면에 출력하는 방식의 차이가 가장 크다고 볼 수 있는데, 간단하게 이러한 렌더링이 자신의 컴퓨터에서 진행되는 것을 말한다. 우리는 '자신의 컴퓨터'라는 것을 클라이언트라고 부르는 것이고. 그래서 첫 번째 렌더링 과정에서 모든 소스를 한 번에 렌더링 하기 때문에 렌더링 시간이 오래 걸리지만, 그 이후에 화면 전환되는 렌더링 과정에서 속도가 기존의 SSR 구동방식 보다 빠르다는 것을 종종 들었을 것이다. 실제로도 첫 번째 통신 이후로 별도의 통신이 발생하지 않는다.
Vue.js라는 프레임워크는 SPA(Single Page Application) 구조로 동작이, 단일 페이지를 관리하는 것이기 때문에 가지고 와진 정보만 가지고 출력을 하게 된다. 그래서 자연스럽고 부드럽게 화면 전환이 가능하다는 장점이 있고, 코드 재활용 측면에서도 강한 이점을 보여주고 있다. 그러나 CSR 구동방식에도 단점은 있는데 그중 대표적인 것이 SEO 검색엔진 최적화가 어렵다는 것이다. 그 이유로는 React도 마찬가지이지만, Vue.js 역시 SPA(Single Page Application)이기 때문에 index.html이 하나이기 때문에 페이지 전환에 따른 모든 페이지의 메타정보를 온전히 담을 수 없기 때문이다.
다음으로, SSR(Server Side Rendering) 서버 사이드 렌더링에 대해 간단히 살펴보면, 서버 측에서 화면을 다 만들어서 내어주는 방식으로 화면이 출력된다. 그래서 요청마다 새로고침이 일어나고, 서버에 새로운 페이지에 대한 요청을 구하는 방식이다. View를 서버에서 렌더링 하여 보내주기 때문에 첫 로딩이 매우 짧다는 장점이 있다. 그리고 CSR과 달리 모든 콘텐츠가 저장되어 있기 때문에 SEO 검색엔진 최적화에 큰 문제가 없다.
정리하면, SSR의 장점은 SEO 검색엔진 최적화에 용이하고, SSR의 단점은 페이지 이동 시 화면이 깜박이고(새로고침), 불필요한 템플릿도 중복해서 로딩이 된다. 서버 렌더링에 따른 부하가 있고, 모바일 앱 개발 시 추가적인 백엔드 작업이 필요하다고 한다.
🚥 Nuxt.js란 무엇인가?
Nuxt.js는 Vue.js라는 자바스크립트 프레임워크 기반의 개발환경 구축에 보다 큰 도움을 주는 Vue.js 프레임워크라고 할 수 있다. 아니, Vue.js 프레임워크이다. 쉽게 풀어 설명해보자면, Vue.js 프로젝트에서 사용되는 여러 유용한 라이브러리들을 기본적으로 탑재하고 있는 프레임워크라고 보면 된다.
🚥 Nuxt.js의 특징
Nuxt.js에 포함된 기능은 다음과 같다고 한다.
- Vue 2 (최근에는 Vue3를 위한 Nuxt3가 출시됐다.)
- Vue Router
- Vuex
- Vue Server Renderer
- vue-meta
- vue-loader
- babel-loader
- Webpack
Vue + 라이브러리 구조이기 때문에, Nuxt.js는 다음과 같은 특징을 가진다.
- Vue 파일 사용
- 코드 분할 자동화
- 서버 사이드 렌더링
- 비동기 데이터 기반의 강력한 라우팅 시스템
- 정적 파일 전송
- ES2015+ 지원
- JS & CSS 코드 번들링 및 압축
- <head> 요소 관리 (<title>, <meta>, 기타)
- 개발 중 Hot module 대체
- 전 처리기 지원 : SASS, LESS, Stylus 등
'2021-2023' 카테고리의 다른 글
| 구디역 맛집, 소고기 육즙이 미쳐날뛰던 '한우정육마당' (0) | 2022.06.22 |
|---|---|
| 합정 맛집 '합정냉장고', 쾌적하고 깨끗한 맛의 삼겹살과 목살 (2) | 2022.06.20 |
| Vue.js 라이프사이클 훅이란 무엇일까? (0) | 2022.06.16 |
| 광명 맛집추천, 망향비빔국수로 매콤새콤하게 여름나기! (0) | 2022.06.08 |
| 연천 가볼만한곳, 시골느낌 물씬났던 카페 연천회관 (4) | 2022.06.06 |
