스텝2) setup web application for naver maps

web application은 여러가지가 있는데
현재 셀에서 최근에 작업했던 nuxt3으로 진행하려고 합니다.

참고 : https://nuxt.com/docs/getting-started/installation

1) 설치
npx nuxi@latest init <project-name>

cd jejuMap
npm install
npm run dev

result)

InteliJ를 사용한다면 아래와 같이 run 스크립트로 실행하게끔 해놓는다.

nuxt 파일 중에 nuxt.config.ts 라는게 있는데 이 파일은 스크립트 추가, 모듈 등록 또는 렌더링 모드 변경등에 사용 됩니다.

import없이 globally하고 사용할 수 있다!

runtimeConfig

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api'
    }
  }
})

------------

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>

App Configuration
  - app.config.ts

export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

-------

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

runtimeConfig와 app.config의 차이점은
runtimeConfig는 빌드 이후에 환경변수가 사용된다.
app.config는 빌드타임에 결정 된다.

그밖에도 많은 config들이 있다. 왜이리 많은겨;;
tsconfig.json / .eslintrc.js / vitest.config.ts 등등 

nuxt3관련 특징
- https://github.com/nuxt/nuxt/blob/main/docs/1.getting-started/12.upgrade.md

nuxt는 많은 컴포넌트 레이어들을 제공한다.
app.vue
- 이 파일은 entry point(진입점, 즉 시작하는 지점이다.) vuejs에서는 mian.js랑 비슷하다.
Components
- 대부분의 컴포넌트는 재사용가능하다. 버튼이나 메뉴 등 components/ 디렉토리를 생성 후 만들면 됩니다.
Pages
- 라우터 패턴에 대한 것을 나타냅니다. pages/ 디렉토리를 생성 후 만들면 됩니다. 
Layouts
- Layouts는 머리글 및 바닥글 표시 등 여러개의 페이지를 포함한 페이지이다. layouts/default.vue를 만들면 됩니다.
Assets
 - pulibc/ directory는 어플리케이션의 정의된 url에서 공개적으로 사용 가능한 static asserts , root url / -> public/img/ dir은 /img/nuxt.png로 사용

<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

 - asserts/ directory
    nuxt는 viet또는 webpack을 사용하여 어플리케이션을 빌드하고 묶습니다.
    이런 빌드도구의 주요 기능은 javascript파일을 처리하는 것이지만
    플러그인(vite용) 또는 로더(webpack용)를 통해 확장하여
    스타일시트, 글꼴 또는 SVG와 같은 다른 종류의 자산을 처리할 수 있습니다.
    이 단계에서는 주로 성능 또는 캐싱 목적을 위해 원본 파일을 변환 합니다.
    관습적으로 nuxt는 이러한 파일을 저장하기 위해 asserts/directory를 사용.
    어플리케이션 코드에서 경로를 사용하여 asserts/directory ~/asserts/에 있는 파일을 참조 할수 있습니다.

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

Routing
라우팅은 page/directory를 사용한다고 위에서 언급했습니다.
에를 들어 아래처럼 만들면 

pages/
--| about.vue
--| index.vue
--| posts/
----| [id].vue

아래처럼 표현이 된다는 것이죠!

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

Navigation
- <NuxtLink> component 는 페이지를 연결합니다.
  페이지의 경로로 설정된 속성은 <a>태그로 렌더링 합니다.
  이는 전체 페이지 새로고침을 방지하고 애니메이션 전환을 허용 합니다.

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

Route Parameters
- <script setup> block이나 setup() 메소드에서 useRoute()를 사용할 수 있습니다.

<script setup lang="ts">
const route = useRoute()

// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>

Route Middleware
- nuxt는 어플리케이션 전체에서 사용할 수 있는 사용자 지정 가능한 경로 미들웨어 프레임워크를 제공하며
   특정 경로로 이동하기 전에 실행하려는 코드를 추출하는데 이상적입니다.

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

위의 Route Middleware는 사용자가 지정을 해야해서 plugins를 사용 했던 적이 있었다.

따로 지정하는 코드를 넣지 않으며 전체 route에 반응을 한다.

import axios from "axios";
export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-test', () => {
        console.log('this global middleware was added in a plugin and will be run on every route change')        
    }, { global: true })
})

Route Validation
- nuxt는 route validation을 제공 합니다. definePageMeta를 통해서~

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    // Check if the id is made up of digits
    return /^\d+$/.test(route.params.id)
  }
})
</script>

일단 요런 느낌의 친구라는것을 알았다!

이제 naver map을 붙여보도록 하자~:)