[Nuxt3] 5. 간단한 TODO 앱 만들어보기

기본적으로 설정할 것들은 거의 다 했기 때문에

간단하게 TODO앱을 만들어보면서 nuxt3에 조금씩 적응해 나가보겠다

 

nuxt.config.ts 파일 설정

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  typescript: {
    shim: false,
  },
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      title: 'My Todo App',
    },
  },
  css: ['~/assets/scss/main.scss'],
})

전역으로 설정할 Head 태그를 config 파일에 설정해 주었다

css 설정이 추가 되었는데 전역으로 설정할 css 파일을 추가 해 주었다

 

mina.scss 파일

body {
  background-image: url('@/assets/img/background.jpg');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 16px;
}

button {
  width: 50px;
  height: 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input {
  width: 200px;
  height: 30px;
  border-radius: 5px;
  border: none;
  padding: 0 5px;
  margin-right: 5px;
  box-sizing: border-box;
}

전역 설정한 scss 파일에는 배경 이미지를 넣어 주고 버튼과 input 창을 공통으로 디자인 해주었다

 

app.vue 파일

<template>
  <div>
    <NuxtPage />
  </div>
</template>

app.vue 파일에는 현재 페이지를 표시하기 위한 NuxtPage 태그만 넣어 줬다

 

pages/index.vue 파일

<template>
  <main>
    <div class="center">
      <div class="todo-input">
        <input
          v-model="todo"
          type="text"
          placeholder="할 일을 적어주세요"
          @keypress.enter="todoSubmit"
        />
        <button @click="todoSubmit">등록</button>
      </div>
      <div class="todo-list">
        <div v-for="(item, index) in todos" :key="index" class="item">
          <div
            class="todo"
            :style="{ textDecoration: item.isLive ? 'none' : 'line-through' }"
          >
            <span>{{ index + 1 }} : </span>{{ item.todo }}
          </div>
          <div class="button">
            <button @click="todoComplete(item)">완료</button>
            <button @click="todoCancel(item)">미완료</button>
            <button @click="todoDelete(index)">삭제</button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
type Todos = {
  todo: string
  isLive: boolean
}

const todos = ref<Todos[]>([])
const todo = ref<string>()

onMounted(() => {
  const existTodo = window.localStorage.getItem('todos')

  if (existTodo) {
    todos.value = JSON.parse(existTodo)
  }
})

const todoSubmit = () => {
  if (todo.value) {
    todos.value = [...todos.value, { todo: todo.value, isLive: true }]
  }

  todo.value = ''
}

const todoComplete = (item: Todos) => {
  item.isLive = false
}

const todoCancel = (item: Todos) => {
  item.isLive = true
}

const todoDelete = (index: number) => {
  todos.value.splice(index, 1)
}

watch(
  () => todos.value,
  (currentTodos, _) => {
    window.localStorage.setItem('todos', JSON.stringify(currentTodos))
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
main {
  height: 100vh;

  .center {
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .todo-input {
      display: flex;
      align-items: center;

      button {
        color: #fff;
        background-color: mediumturquoise;
        font-weight: 500;
      }
    }

    .todo-list {
      margin-top: 10px;

      .todo {
        font-size: 18px;
      }

      .item {
        width: 255px;
        margin-bottom: 10px;
        .button {
          margin-top: 5px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;

          button {
            background-color: indianred;
            color: #fff;
            font-weight: 700;

            &:first-child {
              background-color: lightcyan;
              color: black;
            }

            &:last-child {
              background-color: crimson;
            }
          }
        }
      }
    }
  }
}
</style>

나머지 소스는 기존 vue 작성하듯이 진행하면 된다

페이지 새로고침시 데이터가 날라가는 걸 방지하기 위해 localStorage에 데이터를 저장해주고 랜더링 되는 시점에 불러와 주면 된다

 

 

완성된 todo 앱이다

nuxt3 로 프로젝트를 진행하기 전에 간단하게 셋팅부터 todo앱 까지 진행해 보았다 

아직 nuxt3 의 기능을 다 활용하진 않았지만 공식문서를 보면서 그때 그때 필요한 기능들을 찾아서 적용해 보는 것도 나쁘지 않을 것 같다