2021. 10. 28. 11:26ㆍUX Engineer 이야기
들어가며
여러분은 SEO(검색엔진 최적화 - Search Engine Optimization)에 대해 들어보신 적이 있으신가요?
저는 처음에 조금 생소하다고 느꼈는데요,
관련 글을 읽다 보니(하단 참고 문서) 그간 제가 아무 생각 없이 검색을 통해 접근했던 글들이 생각이 나면서,
SEO('검색엔진 최적화(Search Engine Optimization)')의 중요성에 대해 알게 되었어요.
아무리 좋은 사이트, 글이라 해도 노출이 되지 않으면 결국 그 가치가 빛을 볼 수 없을 테니까요.
때문에 저는 늘 프로젝트를 진행하며 SEO(검색엔진 최적화 - Search Engine Optimization) 문제로 고민할 수밖에 없었고,
그 과정 속에서 Nuxt라는 프레임워크를 알게 되었습니다.
사용자 경험(UX)관점에서 보았을 때도 UX는 SEO에 필수적 조건이기 때문에 더더욱이 사용해 볼 수밖에 없었죠!
Nuxt는 사용법을 조금씩 익혀가면서 잘 활용한다면,
상당히 유용하고 좋은 프레임워크라고 느껴 포스팅을 하게 되었습니다.
Nuxt란?
Nuxt.js는 Vue.js 프레임워크를 기반으로 SSR(Server Side Rendering) 웹 페이지를 만들 수 있도록 해 주는 프레임워크입니다.
SEO 등의 문제로 CSR이 아닌 SSR 웹을 구축해야 하는 경우에 유용하게 사용할 수 있습니다.
직접 사용해 보았을 때, Vue와 거의 비슷한 구조를 가지고 있었으나 import 시키는 과정 등에서 더욱 간편한 사용법을 가지고 있었습니다. 자세한 내용은 조금 더 알아보도록 하겠습니다.
*CSR(Client Side Rendering): 데이터가 없는 HTML(이외에 static 파일들)만 받아오고, 데이터는 빈 문서와 여러 static 파일들이 로드된 이후에 요청해서 받아오는 방식
*SSR(Server Side Rendering): 데이터까지 전부 삽입하여 완성된 HTML을 받아오는 방식
시작하기
최신 Node 버전 설치
- 최신 Node 버전으로 시작하시는 것이 좋습니다.
create-nuxt-app
yarn create nuxt-app <project-name>
npm init nuxt-app@latest수동 설치
- (1) 프로젝트 명으로 디렉터리를 만들고 탐색합니다.
- (2) package.json 파일을 생성합니다.
{
"name": "my-app",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
}
}- (3) nuxt를 설치합니다.
npm i nuxt디렉터리 구조
| 디렉터리명 | 이름 변경 | 설명 |
|---|---|---|
| pages | 불가 | view와 route를 포함하는 디렉터리 |
| components | - | 컴포넌트를 포함하는 디렉터리 |
| assets | - | 스타일, 이미지, 글꼴을 포함하는 디렉터리 |
| static | 불가 | 정적 파일들을 포함하는 디렉터리 |
| plugins | 불가 | 응용 프로그램을 인스턴스화하기 전에 실행하려는 플러그인을 포함하는 디렉터리 |
* 해당 디렉터리 구조는 전반적으로 Nuxt 내에서 사용되는 디렉터리에 대한 설명이며, 외에도 store 등 필요에 따라 디렉터리를 추가/제거하여 사용하실 수 있습니다.
nuxt.config.js
모듈을 추가하거나 기본 설정을 재정의하려는 경우 변경 사항을 적용하는 곳
package.json
애플리케이션에 대한 모든 종속성과 스크립트가 포함되어 있습니다.
Nuxt에 대한 소개와 기본 구조에 대해 알아보았습니다.
자세한 내용은 아래 참고 문서 공식 페이지 docs를 통해서도 알 수 있으니, 기본 구조에 대해선 여기까지 알아보고 제가 사용하면서 느낀 Nuxt가 가진 기능적인 강점에 대해 바로 알아보도록 하겠습니다.
Nuxt의 강점 (1) 라우팅
기존 프로젝트 작업 시 페이지로 넘어가는 구조에서, 일일이 모든 경로를 추가하거나 import 시켜주어야 했습니다. 하지만 Nuxt는 다릅니다. Nuxt vue-router는 pages 디렉터리 내부에 제공된 Vue 파일을 기반으로 구성을 자동으로 생성합니다. 즉, 라우터 구성을 다시 작성할 필요가 없습니다! 또한 Nuxt는 모든 경로에 대한 자동 코드 분할 기능을 제공합니다.
쉽게 말해 pages 폴더에 파일을 생성하기만 하면 됩니다.
루트가 되는 index 파일에 NuxtLink를 지정해 줍니다.
<template>
<div id="wrap">
<NuxtLink to="/tutorial">페이지 이동 </NuxtLink>
</div>
</template>위처럼 작성해 주면 손쉽게 프로젝트 내에 페이지 이동이 가능합니다.
(*파일 구조는 아래 이미지 참고)
* 사이트 내의 페이지 이동이 필요한 경우 OR 사이트 내의 라우팅이 필요한 경우는 NuxtLink를 사용하세요. 다른 웹사이트에 대한 링크가 있는 경우 a 태그를 사용해야 합니다.
또한 생성된 페이지가 없어도 임의로 slug를 설정해 줄 수 있습니다. 이해하기 쉽게 '동적 라우터'라고 표현하죠.
<template>
<div id="wrap">
<h1>튜토리얼 페이지</h1>
<ul>
<li v-for="(item, index) in menuList" :key="index">
<NuxtLink :to="{ path: `/tutorial/${item.name}` }"> {{ item.name }} </NuxtLink>
</li>
</ul>
</div>
</template>export default {
data() {
return {
menuList: [{ name: '1' }, { name: '2' }, { name: '3' }, { name: '4' }],
};
},
};위처럼 작성해 주면 화면에는 아래와 같이 출력됩니다.
화면에 출력된 1~4를 클릭하면 해당 slug가 아래처럼 변경됩니다.
클릭 시 나오는 화면의 경로가 궁금하다면 폴더 내에 _id.vue를 생성해 만들어주면 됩니다.
Nuxt의 강점 (2) sass 사용하기
Nuxt에서 sass를 사용하기 위해서는 기존과 조금 다른 방법으로 접근해야 합니다.
npm
$ npm install -D sass sass-loader@10
npm을 이용하여 sass를 설치를 해주었으면, [nuxt.config.js] 파일에서 사용할 sass 파일을 지정해 줘야 합니다. 해당 파일은 후에 Nuxt에 대해 더 사용해 보시면 아시겠지만, 여러모로 편하게 많이 사용되어요. 참 좋은 것!
위에서 확인 가능한 css 섹션에 사용할 scss 파일 경로/파일을 지정해 주면, 따로 import 하지 않아도 적용 및 사용이 가능합니다. 참 간편하죠?
그런데, scss 변수 및 mixin 등의 기능을 사용하고 싶다면 추가로 해야 할 일이 있습니다.
npm
$npm i -D @nuxtjs/style-resources
npm을 이용해 style-resources를 설치한 뒤, [nuxt.config.js] 파일로 넘어가서 buildModules에 추가, styleResources 부분에 사용할 것들을 추가해 주면 됩니다.
export default {
buildModules: ['@nuxtjs/style-resources'],
styleResources: {
// 여기에 설정
sass: [],
scss: [],
less: [],
stylus: [],
},
};sass를 사용하면서 가장 많이 쓰이는 variable 및 mixin과 같은 공통 기능 파일은 해당 파일을 생성하고
styleResources: {
scss: ['./assets/scss/_variables.scss', './assets/scss/_mixins.scss'],
},styleResources 섹션에 파일을 선언해 주면, 따로 import 과정 없이 사용할 수 있게 됩니다. 편하지 않나요?
마치며
제가 포스팅한 내용 외에도, 혹은 제가 아직 사용하지 않은 부분 외에도 Nuxt를 활용해 손쉽게 할 수 있는 기능은 많습니다. 저처럼 Nuxt가 생소하셨던 분들도 포스팅을 읽으시면서 흥미를 느끼고 접근해 보셔도 좋을 것 같아요. 긴 글 읽어주셔서 감사합니다.
이 글은 pxd XE Group Blog에서도 보실 수 있습니다.