Nuxt.js - CSR 방식으로 프로젝트 구성과 이해하기

Corner·2022년 5월 9일
0

NuxtJS

목록 보기
1/6
post-thumbnail

CSR - Client Side Rendering 개요

참조링크

Client Side Rendering

SPA이며, 모든 작업을 Client Side에서 수행하는 것.

이를테면, React / Vue / Angular 등등 프레임워크도 Sing Page Application(SPA) 방식으로 사용한다.

그 안에 SSR/CSR 방식들이 나뉜다.

초기 렌더링이 오래 걸릴 수 있어도 이후 렌더링은 자원을 덜 소모하여 사용자 입장에서 이질감을 줄여준다.

동작 과정

HTML Download -> JS Download -> JS Run -> Data Server -> Content Rendering

장점

  • 사용자의 행동에 따라 필요한 부분만 다시 읽어들여 SSR 방식 보다 조금 더 빠른 인터랙션 가능
  • Vue의 라우팅 연결하기 위한 소스 작업을 할 수고를 덜어준다.
  • Import하는 방식이 더 간결하다.

디렉토리 구조

Nuxt.js 디렉토리 구조

Nuxt에서 기본으로 셋팅해주는 디렉토리 구조를 파악해 보자.

assets

css, image, font와 같은 리소스들을 포함한다.

components

애플리케이션에서 사용될 컴포넌트들을 포함하며 해당 경로에 위치된 컴포넌트들은 Nuxt.js의 비동기 데이터 함수인 asyncData또는 fetch를 사용할 수 없다.

content

content는 @nuxt/content 모듈을 사용하여 애플리케이션을 확장할 수 있다. Markdown, JSON, YAML, XML, CSV와 같은 파일을 가져오고 관리할 수 있다. nuxt/contents에서 더 많은 정보를 확인해보자.

layouts

애플리케이션 전체에 대한 레이아웃을 포함한다. 기본으로 default.vue가 생성되어 있을 것이고 상황에 맞게 layout을 생성할 수 있다. 해당 디렉토리는 이름을 변경할 수 없다.

middleware

애플리케이션에서 사용될 middleware를 포함한다. middleware는 페이지 또는 레이아웃이 렌더링 되기 전에 실행이 되며, middleware를 페이지나 레이아웃에 바인딩하였다면 해당 페이지나 레이아웃이 실행되기 전에 매번 실행된다.

module

Nuxt Module은 Nuxt 프레임워크의 핵심 기능을 확장하고 통합 및 추가할 수 있다. 사용자가 직접 모듈을 작성할 수 있으며 Nuxt 커뮤니티에 이미 많은 모듈이 공개되어있다.

pages

실제 애플리케이션의 페이지 구성을 포함하며 해당 디렉토리의 구조에 따라 router가 자동으로 생성된다. 해당 디렉토리는 이름을 변경할 수 없다.

plugins

애플리케이션에 바인딩 될 외부 혹은 내부 plugins를 포함한다.plugins는 애플리케이션이 인스턴스 화 되기 전에 실행하며 전역적으로 구성 요소를 등록하고 함수 또는 상수를 삽입할 수 있다.

static

해당 디렉토리는 정적인 파일들을 포함한다. 구성에 따라서 html, Javascript 파일도 포함 시킬 수 있다. 해당 디렉토리는 이름을 변경할 수 없다.

store

애플리케이션에서 사용될 vuex store 파일들을 포함한다. 기본적으로 비활성화 상태이고 store 디렉토리에 index.js 파일을 작성하면 store가 활성화된다. 구성에 따라서 모듈 형태의 store를 형성할 수 있다. 해당 디렉토리는 이름을 변경할 수 없다.


Nuxt 프로젝트 생성

step1. npm init nuxt-app project-name

step2. package manager만 Npm을 선택하고 웬만하면 Default 값으로 한다. 필요한 값은 임의대로 설정한다.

step3. nuxt.config.js 수정

export default {
 	ssr: false
  
  ...
}

CSR 방식을 사용하기 위해 ssr false 속성을 넣는다.

참고 Docs

step4. 프로젝트 구조 만들기

  • assets/css, assets/image , layouts/ 경로 생성
  • components/ 경로 안에 .vue 확장자 지우기, index.vue 템플릿 태그내용 비우기

라우터 사용법

vue.js에서는 라우터 경로에 router.js index.js등에서 라우터 연결 작업을 위한 소스를 만들어야 했었지만, Nuxt에서는 그러한 과정을 pass할 수 있다.

<NuxtLink to="path">Link</NuxtLink> 태그를 이용하면 $router.push기능을 할 수 있으며 pages에 파일만 있다면 페이지 연결은 되어있으며, 이동할 수 있다. 매우 편리하다..

pages/apple/apple.vue

<template>
  <div>
 		Text or Component Import
  </div>
</template>

<script>
export default {
  name: 'ApplePage',
}
</script>

pages/index.vue

<template>
  <div>
    This is Index Page.
<!--
Nuxt에서는 라우터 이동할때 NuxtLink 태그를 사용하며, 경로는 pages폴더 안에 있는 `폴더명/파일명`이 경로가 된다.
ex) apple폴더안에 apple.vue  localhost:8080/apple/apple
-->
    <NuxtLink to="/apple/apple">
      Move to "ApplePage"
    </NuxtLink>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
}
</script>

컴포넌트와 레이아웃

컴포넌트

components/apple/World.vue파일을 생성한다.

Component를 Import 할 때는 폴더명+파일명 조합 문법으로 Import할 수 있으며,

Vue.js에서처럼 별도의 components:{} 이벤트에 import를 하지 않아도 된다.

ex) <AppleWorld />

예제로 apple.vue에 테스트 코드를 작성한다.

<template>
  <div>
    <!--
    컴포넌트 임포트하는 방법 : "폴더명+파일명" 조합을 이룬다.
    apple/World.vue 일 때 <AppleWorld />로 사용할 수 있으며 별도의 import를 작성하지 않아도 된다.
     -->
    <AppleWorld/>
  </div>
</template>

<script>
export default {
  name: 'ApplePage',
}
</script>

components/apple/World.vue

<template>
  <div>
    This is `Component/World.vue`
    <NuxtLink to="/">Move to Main</NuxtLink>
  </div>
</template>

<script>
export default {
  name: "World",
}
</script>

여기서 <NuxtLink to="/"> index.vue IndexPage 로 자동적으로 매핑되어있다.

레이아웃

layouts 경로에있는 Layout 역할은 보통 항시 고정(Header,Footer, SideMenu 등등)적 또는 다른 페이지에서도 중복사용을 하는 UI를 사용해야할 때

사용하면 매우 효과적으로, Vue.js에서는 Layouts를 Template View주요 컨텐츠 UI들(퍼블리싱)이 화면에 보여지는 용도로 사용했지만

Nuxt.js에서는 앞에서 말한 방법으로 사용한다.

layouts/AppleLayout.vue 파일을 생성하고 아래와 같이 코드를 작성한다.

<template>
  <div>
    This is Layout Top
  <Nuxt/> <!-- 내용안에 Pages or Component를 보여준다. -->
    This is Layout Bottom
  </div>
</template>

<script>
export default {
  name: "AppleLayout",
}
</script>

그리고 Layout을 Import 하는 방법

apple.vue<script> 태그 export default {layout: 'fileName'을 넣어주면 된다.

<script>
export default {
  name: 'ApplePage',
  /*
Layout 임포트하는 방법 : 이벤트 사이클에 layout: '파일명",
Layout안에서는 <Nuxt />라는 태그를 작성해 화면에 Page 또는 Component를 렌더링(표시)하겠다는 태그를 사용한다.
<Nuxt />를 사용하지 않으면 무조건 Layout 템플릿만 화면에 표시되기 때문임.

  */
  layout: 'AppleLayout',
}
</script>

최종 결과

초기 페이지 접속 시 서버로부터 .js를 전달 받았지만, 페이지를 아무리 전환시켜도 네트워크 소스에서는 데이터 변화 등이 이루어지지 않으면 렌더링 필요가 없다는 점을 알 수 있다.


  • Firebase realtime database 와 시너지가 좋음
profile
Full-stack Engineer. email - corner3499@kakao.com,

0개의 댓글