nuxt.js 도입 !(SSR, SEO 대비) - [위오의 서버 및 개발환경]

안녕하세요 위오의 다나입니다.

 

 

위오의 이름궁합테스트 프로젝트를 쌩 vue2로 개발하다가 nuxt를 도입하게 되었습니다. 

왜냐 !!! nuxt는 SSR을 손쉽게 해준다네요 뿌뿌ㅃ뿌이 ~

https://retro.wiodaily.com/ 

(2023.05.01, 위오 공식 서비스 오픈)

https://wiodaily.com

위오

 

개발인생이 짧은 저는 이번 기회에 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 속성을 이용하고 싶으면

1. 폴더 만들고 (namelove)
2. 그 폴더명과 같은 이름의 vue 파일 생성 (namelove.vue)

 

env 파일 적용

nuxt를 도입하니까 

• .env.development .env.production 파일 생성

.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 개발을 하게 될거 같습니다. 추가로 얻게 되는 지식도 슬며시 적어가보도록 하겠습니다. 

 

위오의 다나였습니다.