Jae Front-end Study

목표

• Nuxt3 설치 및 테일윈드 CSS 설치
• 투두 리스트 마크업
• 투두 리스트 테일윈드 css 적용

결과 화면

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

1. Nuxt3 설치 및 테일윈드 CSS 설치하기

https://jae-study.tistory.com/114

Nuxt3 설치 및 테일윈드 CSS 설치에 대한 설명은 위의 링크를 참고한다.

2. 테일윈드 CSS를 이용해서 마크업 하기

• pages/index.vue

1. 새로운 toDo를 입력할 <form> 태그를 만들고, 입력한 toDo들이 나타날 수 있게 <ul> 태그로 목록을 만든다.
2. 테일윈드를 사용해 CSS를 적용한다.
3. toDoList 변수와 v-for를 이용해 toDoList를 보여준다.

<script setup lang="ts">
const toDoList = [
  {
    id: 1,
    content: '첫번째 할 일'
  },
  {
    id: 2,
    content: '두번째 할 일'
  },
  {
    id: 3,
    content: '세번째 할 일'
  }
]
</script>

<template>
  <section class="w-full max-w-screen-lg m-auto">
    <h1 class="mb-10 text-5xl font-bold text-center">ToDo List</h1>

    <form class="mb-5">
      <label for="toDo" class="block mb-3 text-xl font-bold">New ToDo</label>

      <div class="flex justify-between gap-5">
        <input
            type="text"
            id="toDo"
            class="w-3/4 px-3 py-4 rounded text-black"
            placeholder="할 일을 입력해 주세요."/>
        <button class="w-1/4 bg-slate-500 rounded">추가하기</button>
      </div>
    </form>

    <div>
      <div class="flex gap-2">
        <button>등록순</button>
        <i>|</i>
        <button>최신순</button>
      </div>

      <ul>
        <li
            v-for="(list, key) in toDoList"
            :key="key"
            class="flex justify-between items-center gap-5 mt-5 px-5 py-2 border rounded">
          <p class="flex gap-5 text-lg">
            <span>{{ key + 1 }}.</span> {{ list.content }}
          </p>
          <button class="px-5 py-2 bg-slate-500 rounded">
            삭제
          </button>
        </li>
      </ul>

      <button class="block w-1/3 mt-10 m-auto px-3 py-4 bg-slate-400 rounded">
        전체 삭제하기
      </button>
    </div>
  </section>
</template>

Create an app with Nuxt 3 — Course part 1
https://www.youtube.com/watch?v=hj3NNlTqIJg&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=1

유튜브 강의를 참고하고 있습니다.

Nuxt는 Vue.js를 사용하여 안전하고 성능이 뛰어난 풀 스택 웹 애플리케이션과 웹 사이트를 만들 수 있는 직관적이고 확장 가능성을 가진 무료 오픈 소스 프레임워크이다.

• 서버 측 렌더링(빠른 페이지 로드 시간, 캐싱, SEO)
• 파일 기반 라우팅
• Auto-imports 컴포넌트
• 타입스크립트 지원

1. Nuxt 3 설치하기

필수 조건

Node.js v18.0.0 이상

터미널에서 아래 명령어를 실행 후, 설치가 완료되면 해당 폴더로 이동한다.

npx nuxi init <project-name>

// 가장 최신 버전을 설치하고 싶으면
npx nuxi@latest init <project-name>

2. 로컬호스트 연결 확인하기

터미널에서 yarn dev 명령어를 실행하고, 아래 사진과 같은 화면이 나온다면 로컬호스트 연결에 성공한 것이다.

3. app.vue 수정하기

• app.vue

app.vue 파일은 로컬호스트에서 보이는 메인 화면이다.

<NuxtWelcome> 컴포넌트를 삭제하고, 다른 태그를 작성하면 화면이 수정된 것을 볼 수 있다.

<template>
  <NuxtWelcome></NuxtWelcome>
</template>

<script setup lang="ts">
</script>

4. 테일윈드 CSS 설치하기

https://tailwindcss.com/docs/guides/nuxtjs

Nuxt 테일윈드 CSS 설치에 대한 자세한 설명은 위의 공식문서를 참고한다.

터미널에서 아래 명령어를 실행한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

• assets/scss/main.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

• nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['@/assets/scss/main.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }
})

• app.vue

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

결과 화면

Nuxt.js란

Nuxt.js란, Vue.js 애플리케이션을 구축할 수 있는 오픈 소스 프레임워크이다.

Nuxt.js 공식 문서: https://nuxt.com/

• 코드 분할
• SSR, SPA 등 렌더링 결정 가능
• 서버 측 렌더링
• 최적화된 이미지
• SEO

1. npm init nuxt-app

터미널에서 아래 명령어를 실행하고, 나오는 옵션들을 선택한다.

프로젝트 이름, Javascript/Typescript 언어 선택 등을 설정할 수 있다.

잘 모르겠으면 전부 앤터를 누른다.

npm init nuxt-app 프로젝트 이름

2. 로컬호스트 연결 확인하기

설치한 프로젝트로 이동 또는 프로젝트를 열고, 터미널에서 아래 명령어를 실행한다.

yarn dev

또는

yarn build
yarn start

3. 결과 화면

로컬 호스트 접속 후, 아래 화면이 나온다면 로컬호스트 연결에 성공한 것이다.

4. 폴더 구조