nuxt를 배워보자 - 1 폴더구조, 추천자료

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

Installation · Get Started with Nuxt

 

회사에서 넉스트를 사용하기로해서 넉스트를 공부하는데 처음 배울만한 자료들이 별로 없고 유튜브강의를 보면서 맨땅에 해딩하듯이 공부를 하는데 혹시나 넉스트를 사용하거나 넉스트를 배워 보고자하는 분들을 위해서 정리한다 

 

https://www.youtube.com/watch?v=GBdO5myZNsQ&list=PL4cUxeGkcC9haQlqdCQyYmL_27TesCGPC&index=1 

 

추천할만한 강의 코스로는 이걸 추천한다 여기에서 어느정도 기본적인 부분들을 짚어주는데

이정도만해도 처음에 큰도움이 되었다 

 

 

우선은  nuxt의 구조부터 보자면

 

pages - 라우터

pages 폴더를 만들어서 그안에 vue파일을 만들면 자동으로

/페이지명

이런식으로 라우터를 만들어준다

그리고 조금 신기했던게 폴더명을 [] 대문자에 받을 변수 명을 입력해서 [변수명].vue 를 써서 파일을 생성하면 라우터가

폴더명/변수명

이런식으로 만들어지고 변수를 해당페이지에서 받아올 수 있다.

그럼 여기서 한가지 의문인게 받아야하는 변수가 1개 이상일땐 어떻게 하면될까?

이부분은 내가 여러 테스트와 구글링을 한 결과인데

우선은 변수명이 겹치지 않는 폴더를 하나 만든다 폴더 형식은 [변수명2] 이런식으로 만든다

그리고 그안에 [변수명3].vue 라는 파일을 만든다 이렇게 사용하면 변수명3 페이지는 

폴더명/변수명2/변수명3

이라는 라우터를 가진다 앞에 폴더명이 같을때는 변수가 1개와 2개일때 완전 다른 페이지를 안내하기 때문에 이점을 주의해주어야한다

 

layouts 

layouts 폴더를 만들게 되면 페이지별 일괄적으로 공통으로 들어가는 요소들을 지정할수있다 예를들면 네브바나 푸터가있다. 이게 하나만 사용할수있는게 아니라 그때그때 조금씩 다르게 지정도 가능하기때문에 유연하게 사용이 가능하지만 페이지의 통일성과 사용자 경험을 고려했을때 전체 페이지를 통틀어서 관통하는 공통 요소는 페이지별로 나누려고 손대지 않는 것이 좋다

 

기본적으로 layouts 폴더에 default.vue 를 생성하면 자동으로 공통요소로 인식해서

별 다른 설정이 없어도 자동으로 추가해준다

<template>
    <div>
        <header class="shadow-sm bg-white">
            <nav class="container mx-auto p-4 flex justify-between">
                <NuxtLink to="/" class="font-bold">홈페이지</NuxtLink>
                <ul class="flex gap-4">
                    <li><NuxtLink to="/">홈</NuxtLink></li>
                </ul>
            </nav>
        </header>

        <div class="container mx-auto p-4">
            <slot />
        </div>
        
        <footer class="container mx-auto p-4 flex justify-between border-t-2">
            <ul class="flex gap-4">
                <li><NuxtLink to="/">홈페이지</NuxtLink></li>
            </ul>
        </footer>

    </div>
</template>

<style scoped>
    .router-link-exact-active {
        color: aquamarine;
    }
</style>

기본 형식은 이런데 slot태그에 페이지별 요소들이 들어간다 여기에 욕심내서 slot을 하나이상 사용하는 방법을 찾아보다가 말았는데 slot이 두개 이상 필요한 일을 되도록이면 안만드는 것이 layouts를 잘 사용하는 방법인거같다

그리고 다른 페이지에서는 다른 layouts를 사용하고 싶을땐 다음과 같이 사용하자

<template>
    <div>

    </div>
</template>

<script setup>

definePageMeta({
    layout: '사용하고자하는 layouts 파일명',
});

</script>

<style scoped>

</style>

이렇게 사용하면 자동으로 알아서 다른 layouts를 끼워준다

 

server

이걸 직접 써본적이 없고 처음 써봐서 생소하지만 엄청 강력한 기능같다 예제에는 그냥 api url 을 만들어주는정도 였는데 데이터를 받아서 가공하는 작업중에 반복되는 작업들을 선언해서 리턴해주는 작업도 시킬수있는 등 다양하게 사용이 가능할거같다.

우선 예제를 보면서 따라하기를 권장하지만 예제가 3개월 전인데도 문법이 안맞다... 그래서 지금 시점기준으로 잘동작하는 코드를 공유하자면 이렇다

export default defineEventHandler(async (event) => {

    const { name } = getQuery(event);
    const { aaa } = getQuery(event);

    const { age } = await readBody(event);

    return {
        message: `테스트 ${name}, 하나더 ${age}`
    }

    // getQuery, readBody 이부분에서 문법이 변경되었다 
    // getQuery는 쿼리스트링으로 요청오는거고 readBody는 post요청으로 오는걸 받아볼 수 있다
})