리액트를 써본 사람들은 훅(hook)에 대해 알것이다. Nuxt/Vuejs 에서도 3.0 이후로 비슷한 개념이 생겼는데, 이를 컴포저블이고 하며 Vue 에서는 Composite API 라고 부른다. 아래는 Composition API 에 대한 Vuejs 의 소갯말 이다. Composition API는 함수 범위에서 직접 반응 상태 변수를 선언하고 여러 함수의 상태를 함께 구성하여 복잡성을 처리하는 데 중점을 둔다. 더 자유로운 형식이며 효과적으로 사용하려면 Vue에서 반응성이 어떻게 작동하는지 이해해야 한다. 대신, 그 덕분에 로직을 구성하고 재사용하기 위한 더욱 강력한 패턴이 가능해졌다. 내장 컴포저블과 관련해 자세한 내용은 이 곳을 참고한다. 커스텀 컴포저블 생성 반복적으로 호출해서 쓸 수 있는 기능..

Nuxt 는 스타일시트, 폰트, 이미지 등의 정적 자산을 관리하기 위해 public/, assets/두개의 디렉토리를 사용한다. public/ 디렉터리는 서버에서 사용되고, assets/ 디렉터리는 vite 혹은 webpack 같은 번들러에 의해 빌드될 때 사용된다. 자세한 내은은 이 곳을 참고하자. 이미지 불러오기 /pages/index.vue Hello Nuxt 3 Static URL 스태틱 URL 이 필요하다면 public/ 디렉터리에 이미지가 있어야 한다. Hello Nuxt 3 assets/ 디렉토리 와 public/img 디렉토리에 위 예제가 가르키는 파일이 같은 이미지라면 결과는 동일하다. public/ 에 위치한 파일은 URL 로 직접 접근도 가능하다. SVG Icon 최근에는 해상도에 구..

이전 장을 통해 컴포넌트 생성 및 컴포넌트 구조화에 대해 좀 더 깊게 이해했을 것이다. 이번 장에서는 컴포넌트를 배치함에 있어 레이아웃을 동적으로 적용하는 방법을 알아보겠다. 이런 형태의 사용은 예를 들어, 인가된 사용자(login)와 인가되지 않은(default or logout) 사용자의 화면 구성이 다를 때 특히 유용하다. 간단한 예를 들어 살펴 보겠다. layouts 디렉터리 /pages, /components 디렉터리와 마찬가지로 Nuxt 에서는 레이아웃 엘리먼트를 디렉터리 기반으로 전개할 수 있다. /pages/index.vue 소스를 아래와 같이 바꿔보자. app.vue 소스도 바꾼다. /pages/index.vue Main Page /app.vue 이제, 프로젝트 루트 디렉토리에서 /lay..

Nuxt 는 컴포넌트 정의하는데 있어서도 디렉토리 구조를 활용한다. 자세한 내용은 이 곳을 참조한다. 이전 장에 이어서 실습을 통해 컴포넌틀 생성해보자. compnents 디렉터리 프로젝트 루트에서 components 디렉터리를 생성하고, 해당 디렉터리에서 Alert.vue 파일을 만들고 아래 내용으로 코딩한다. This is an alert component 만들어진 컴포넌트를 일단 메인페이지에서 활용해 보자. Nuxt 는 components 디렉토리도 자동 임포트 하기 때문에 별도의 임포트 구문이 필요하지 않다. /pages/index.vue 파일을 아래와 같이 수정하자. /pages/index.vue http://localhost:3000 을 호출해 보면, 방금 만든 Alert 컴포넌트가 보이는 걸..

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..