안녕하세요 위오의 다나입니다.
위오의 이름궁합테스트 프로젝트를 쌩 vue2로 개발하다가 nuxt를 도입하게 되었습니다.
왜냐 !!! nuxt는 SSR을 손쉽게 해준다네요 뿌뿌ㅃ뿌이 ~
(2023.05.01, 위오 공식 서비스 오픈)
개발인생이 짧은 저는 이번 기회에 nuxt를 처음 접했습니다.
nuxt의 n도 모르는 상태에서 스타트를 했다고 해도 과언이 아니지요.
과연 nuxt.js 별거 있나 !?!!
라는 생각으로 시작했는데 해보니까 별거 있슴다 nuxt 짱짱맨 (이라고 썼다가 ... 구글에 바로 nuxt 단점 쳐봤슴다...)
결론은 일단 무작정 프로젝트 생성해서 끄적끄적 해보고 있습니다. (추후에 다른 지식을 얻으면 글을 더 적어보도록 하겠습니다.)
nuxt 프로젝트 생성
npm init nuxt-app <프로젝트 명>
프로젝트 실행
# local 서버 기동
npm run dev
# dist 폴더 생성
npm run generate
nuxt.config.js
이놈이 아주 요물입니다. 거의 주인공이에요
index.html 이나 main.js 에 썼던거 다 여기에 때려넣으면 되더라구요.
- head: 메타 데이터, 타이틀, 파비콘 등등
- script: 외부 라이브러리 import
- css: css 파일 import
- server: port 설정
다른 설정들은 사용해보고 나중에 더 적어두도록 하겠심다.
router
nuxt router 설정 방법 ?! nuxt는 router 파일이 필요가 읎습니다.
nuxt 플젝 생성 시 만들어주는 기본 폴더 구조 중 pages 폴더 아래에 디렉토리 구조로 만들어주면 끝 !
빌드할 때 nuxt가 router 파일을 자동으로 만들어서 떨궈주는데 이게 아주 신기하고 편했습니다.
router의 children 속성을 이용하고 싶으면
- 폴더 만들고 (namelove)
- 그 폴더명과 같은 이름의 vue 파일 생성 (namelove.vue)
env 파일 적용
nuxt를 도입하니까
- .env.development .env.production 파일 생성
- nuxt.config.js 파일 수정
// nuxt.config.js
require('dotenv').config()
export default {
env: {
VUE_APP_SERVER_URL: process.env.VUE_APP_SERVER_URL,
VUE_APP_KAKAO_AD_SERIAL: process.env.VUE_APP_KAKAO_AD_SERIAL
}
.
.
.
}
- package.json 파일 수정
// package.json
{
.
.
.
"scripts": {
"dev": "nuxt --dotenv .env.development",
"build": "nuxt build --dotenv .env.production",
"start": "nuxt start --dotenv .env.production",
"generate": "nuxt generate --dotenv .env.production",
.
.
.
.
}
}
대망의 동적 meta
요놈 때문에 nuxt를 사용했떠라지요 !!!
각 페이지마다 메타데이터가 다르게 필요해서 pre-renderring도 사용해보고 이것 저것 해봤찌만
쿼리 붙이면 url 인식이 잘 안되서 그런지 메타데이터를 제대로 불러오지 못했습니다 SEO 나쁜넘 ....
nuxt는 매~~우 간단하게 해결해줬답니다. SSR이다보니 build할때 이미 각 페이지를 미리 만들어줘서 메타데이터도 제대로 박혔답니다.
// xxxx.vue
export default {
head() {
return {
title: '타이틀',
meta: [
{
hid: 'og:title',
property: 'og:title',
content: '타이틀틀틀'
},
{
hid: 'og:description',
property: 'og:description',
content: '상세설명'
},
{
hid: 'og:image',
property: 'og:image',
content: '이미지위치'
},
{
hid: 'og:type',
property: 'og:type',
content: 'website'
}
]
}
}
}
메타 데이터가 필요한 페이지에 head() 만 지정해주면 동적인 메타 데이터를 확인할 수 있습니다.
여기까지 보게되면 nuxt 추종자 같고, nuxt가 되게 좋은 것처럼 보일 수도 있지만 ~!
nuxt 요 친구 짧은 시간 함께했는데 build 시간이 정말정말 깁니다...
그치만 저희 위오는 앞으로도 nuxt와 함께 vue 개발을 하게 될거 같습니다. 추가로 얻게 되는 지식도 슬며시 적어가보도록 하겠습니다.
위오의 다나였습니다.
'위오의 서버 및 개발환경' 카테고리의 다른 글
AWS 하위 도메인 Netlify 서버에 연결하기! - [위오의 서버 및 개발환경] (2) | 2022.06.21 |
---|---|
Vue 시작하기! - [위오의 서버 및 개발환경] (4) | 2022.06.08 |
flutter, vs code에서 구동하기! - [위오의 서버 및 개발환경] (4) | 2022.05.31 |
최신! AWS Route53 도메인 구매 방법 및 후기! - [위오의 서버 및 개발환경] (2) | 2022.05.28 |
Netlify 서버, 정적 웹페이지 무료 호스팅하기! - [위오의 서버 및 개발환경] (2) | 2022.05.27 |
댓글