Nuxt 는 '파일시스템 기반 라우팅'을 제공한다. 간단하게 정리하면 디렉터리 및 파일 명으로 라우팅을 제공한다는 의미이다. 자세한 내용은 이 곳을 참조 하고 이번 시간에는 실습에 집중하자. 새로운 페이지 생성 프로젝트 디렉터리에서 하위 디렉터리로 pages 디렉터리를 생성한다. 이 후 pages 디렉터리에 events.vue 파일을 생성하고 아래와 같이 내용을 채운다. /pages/events.vue events page 파일시스템 라우팅이라는 말에서 직관적으로 해당페이지가 바로 디스플레이 될 것이라고 유추 할 수 있다. http://localhost:3000/events 를 호출해보자. app.vue 를 호출한 http://localhost:3000 의 내용과 동일할 것이다. 의도한 바와 다르다. 아..

테일윈드 CSS 는 CSS 프레임워크 중에 최근 2~3 년간 가장 주목받는 CSS 프레임워크가 되었다, 가장 최근에는 메타에서 만든 StyleX 도 급부상하고 있다. 최근 웹 프런트엔드 개발 생태계를 보면, 테일윈드 CSS를 기본 CSS 프레임워크로 정하고 만들어진 오픈소스, 강좌 및 블로그가 대부분인 것을 알 수 있다. 이 강좌에서도 테일윈드를 기본으로 쓰겠다. 1. 설치 설치는 테일윈드 사이트에 보면 각 프런트엔드 프레임워크에 맞는 설치 가이드가 이미 제공된다. Nuxt 가이드를 보면 두가지 방법이 있는데, 첫 번째 방법인 'Standard Installation' 에 나와있는 가이드를 따라 하겠다. npm install -D tailwindcss postcss autoprefixer npx tail..

1. 사전 준비 Node.js - v18.0.0 혹은 그이상 텍스트 에디터 - Visual Studio Code, 추가 플러그인 Volar Extension 터미널 - Nuxt 커맨드 용 2. Nuxt 설치 적당한 워크스페이스 디렉토리를 생성한다. 터미널을 열고 워크스페이스 디렉토리로 이동 후 아래 명령을 실행한다. VScode 안에 통합되어 있는 터미널을 쓰면 편리하다. // pnpm pnpm dlx nuxi@latest init 그 다음, 프로젝트 디레토리로 이동한다. cd 3. 의존성 설치 프로젝트 디렉토리로 현재 위치가 이동이 되었으면, nuxi 를 통해 구성된 프로젝트 의존성을 설치하거나, 업데이트 할 수 있다. 간단하게 페이지가 반응하는 것을 살펴보기 위해 sass 의존성을 설치하겠다. pnp..