[Nuxt.js] nuxt.js로 프로젝트 시작하기

플젝을 바로 시작할 수 있는 설치가 되어있다고 가정하고 진행하도록 한다.

만약 설정이 안되있는 경우, 아래의 글의 vue-cli 설치방법을 따라 준비하도록 한다.

https://mirabo.tistory.com/122

[nuxt.js] NUXT(템플릿 설치는 vue-cli) 설치하기

프로젝트 설치 완료 시 아래와 같은 구조를 가진 프로젝트가 생성된다.

 

Axios / Proxy 설정

api통신을 사용하기 위해 Axios와 로컬에서의 CORS 문제 해결을 위한 Proxy를 설정해주어야 한다.

아래의 명령어를 해당 프로젝트의 터미널에 입력해 Axois 모듈과 proxy 모듈을 설치한다.

npm i @nuxtjs/axios
npm i @nuxtjs/proxy

그리고 설치한 모듈을 사용하기 위해 nuxt.config.js를 수정한다.

위와 같이 적용을 마치면 Axios를 사용할 수 있고 Proxy연동까지 마치게 된다.

/prefix-url로 시작되는 api는 모두 proxy-url로 프록시 될 것이다.

 

 

페이지 생성

nuxtjs 사용 시 pages에 vue 파일을 생성하게 되면 생성된 파일들은 자동으로 폴더 안 구조에 따라 라우팅되도록 되어있다.

 

index.vue

<template>
  <div>
    <h1>Main Page</h1>
    <NLink to="/loginForm">Login Page</NLink>
    <br/>
    <NLink to="/joinForm">User Join Page</NLink>
  </div>
</template>

<script>
export default {
  head: {
    title: 'Home page'
  }
}
</script>

<style>

</style>

 

loginForm.vue

<template>
  <div>
    <h1>Login Page</h1>
    <p>Hi! from {{ name }}</p>
    <table>
      <tr>
        <td><span>ID: </span></td>
        <td><input type="text"></td>
      </tr>
      <tr>
        <td><span>PW: </span></td>
        <td><input type="password"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><button>Login</button></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><NLink to="/">Go Home</NLink></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  asyncData() {
    return {
      name: process.static?'static':(process.server ? 'server':'client')
    }
  },
  head: {
    title: 'Login Page'
  }
}
</script>

<style>

</style>

 

joinForm.vue

<template>
  <div>
    <h1>User Join Page</h1>
    <p>Hi from {{ name }}</p>
    <table>
      <tr>
        <td><span>ID: </span></td>
        <td><input name="" type="text"></td>
      </tr>
      <tr>
        <td><span>PW: </span></td>
        <td><input name="" type="password"></td>
      </tr>
      <tr>
        <td><span>name: </span></td>
        <td><input name="" type="text"></td>
      </tr>
      <tr>
        <td><span>remark: </span></td>
        <td><input name="" type="text"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><button>Join</button></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><NLink to="/">Go Home</NLink></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  asyncData() {
    return {
      name: process.static?'static': (process.server?'server':'client')
    }
  },
  head: {
    title: 'Join Page'
  }

}
</script>

<style>

</style>

소스에 포함된 asyncData()는 비동기적 data를 출력할 수 있게 해준다.

출력결과를 return{}에 포함시키면 페이지에 적용된다.

 

예시로 현재 {{ name }} 부분에 현재 렌더링 주체를 구분하여 비동기로 값을 표현할 수 있도록 되어있다.

처음 페이지가 생성될때는 static으로 되어있고, server나 client에 의해 rendering이 발생하면 name 부분이 비동기적으로 알아서 변경하게 된다.

 

기본적인 프로젝트 생성 후 페이지