Jae Front-end Study

맥 jupyter notebook 설치하기

JAEEE — Thu, 6 Mar 2025 16:51:10 +0900

맥 터미널에서 아래 명령어 실행하기

1. python3 --version

파이썬이 설치되어 있지 않다면 파이썬부터 설치해야 한다.

파이썬을 설치하면 pip3도 함께 설치된다.

2. pip3 --version

3. pip3 install --upgrade pip

4. pip install jupyter

터미널에서 jupyter notebook 실행하면 아래와 같은 화면이 나온다.

View - Open JupyterLab를 클릭하면 JupyterLab을 사용할 수 있다.

JupyterLab는 Jupyter Notebook의 업그레이드 버전으로, 더 강력한 기능과 개선된 UI를 제공하는 웹 기반 인터페이스이다.

여러 개의 노트북, 터미널, 텍스트 편집을 한 화면에서 동시에 다룰 수 있는 IDE(통합 개발 환경)이다.

Python, Markdown, HTML, JavaScript 등 편집이 가능하고, 다양한 확장 기능(플러그인, 다크 모드, Vim 등)이 추가가 가능하다.

[파이썬] Serise(시리즈) 값 수정, 추가, 삭제

JAEEE — Tue, 25 Feb 2025 16:51:13 +0900

값 수정하기

from pandas import *

data = [1000, 2000, 3000]
index = ["메로나", "구구콘", "하겐다즈"]
s = Series(data=data, index=index)

print(s)

# 값 수정
s.iloc[0] = 0
s.loc['구구콘'] = 0
s['하겐다즈'] = 0

print(s)

값 삭제하기

drop 메서드는 원본 데이터가 변경되는 것을 방지하기 때문에 시리즈 원본 데이터를 제거하지 않고, 새로운 시리즈 객체를 반환한다.

따라서 변수에 다시 바인딩해야 한다.

# 값 삭제
s = s.drop('메로나')
s = s.drop(['구구콘', '하겐다즈']) # 여러 개 삭제

print(s)

값 추가하기

loc[]나 concat() 방법을 가장 많이 사용한다.

# 값 추가
s['new1'] = 1
s.at["new2"] = 2
s.loc["new3"] = 3
s = concat([s, Series([4], index=["new4"])])

print(s)

[파이썬] Serise(시리즈) 값 선택하기 - Indexing(인덱싱), Slicing(슬라이싱)

JAEEE — Mon, 17 Feb 2025 14:40:14 +0900

iloc (정수 위치 기반 인덱싱)

정수 기반으로 데이터를 선택한다.

리스트처럼 0부터 시작하는 정수 인덱스를 사용한다.

슬라이싱(:)을 활용하여 여러 개의 값을 선택할 수 있다.

loc (라벨 기반 인덱싱)

인덱스(라벨) 값을 기준으로 데이터를 선택한다.

숫자가 아닌 문자열 등 사용자 지정 인덱스를 사용한다.

범위를 지정할 때 끝값까지 포함한다. (iloc와 차이점)

인덱싱(indexing)과 슬라이싱(slicing)의 차이

pandas.Series나 pandas.DataFrame에서 데이터를 선택하는 방법은 크게 두 가지가 있다.

인덱싱: 하나의 값 또는 여러 개의 개별 값을 선택
슬라이싱: 연속된 범위의 값을 선택

import pandas as pd

data = [100, 200, 300]
index = ["월", "화", "수"]
s = pd.Series(data, index)

print(s.iloc[0]) # 100
print(s.iloc[1]) # 200
print(s.iloc[2]) # 300
print(s.iloc[3]) # IndexError

print(s.iloc[-1]) # 300
print(s.iloc[-2]) # 200
print(s.iloc[-3]) # 200
print(s.iloc[-4]) # IndexError

print(s.loc["월"]) # 100
print(s.loc["화"]) # 200
print(s.loc["수"]) # 300

# 인덱싱 (개별 값)
print(s.iloc[[0, 2]]) # 월 100 수 300
print(s.loc[["월", "수"]]) # 월 100 수 300

# 슬라이싱 (범위)
print(s.iloc[0:2]) # 월 100 화 200
print(s.loc["월":"화"]) # 월 100 화 200

[파이썬] Serise(시리즈) 생성

JAEEE — Mon, 17 Feb 2025 14:17:28 +0900

Series

pandas.Series는 1차원 배열 형태의 데이터 구조고, 인덱스(index)와 값(value)으로 구성된 자료형이다.

주요 특징

인덱스와 값으로 구성된다. 기본적으로 0부터 시작하는 정수형 인덱스가 자동 할당되지만, 직접 지정할 수도 있다.
동일한 데이터 타입을 가진다. NumPy 배열(numpy.ndarray)과 유사하지만, 인덱스를 활용할 수 있다.
딕셔너리와 비슷한 구조이다. 키(key) = 인덱스, 값(value) = 데이터 라고 생각하면 이해하기 쉽다.

기본 시리즈 생성 방법

import pandas as pd

data = ['가', '나', '다', '라'] # type = list
s = pd.Series(data) # type = pandas.core.series.Series

print(s)

자동 생성되는 정수형 인덱스가 아닌 별도로 지정할 수 있다.

from pandas import Series

data = [100, 200, 300]
index = ["월", "화", "수"]
s = Series(data, index)

print(s)

인덱스를 별도의 변수명으로 지정해도 된다.

from pandas import Series

name = ["메로나", "누가바", "빠삐코"] # data = name
price = [500, 800, 200] # index = price
menu = Series(name, price)

print(menu)

[파이썬] NumPy(넘파이) 연산

JAEEE — Thu, 13 Feb 2025 16:56:36 +0900

브로드캐스트 (Broadcasting)

파이썬에서 브로드캐스트는 주로 NumPy 배열에서 사용되는 개념으로, 다양한 크기의 배열들 간에 연산을 가능하게 만든다.

크기가 다른 배열끼리 연산할 때, 작은 배열이 큰 배열의 크기게 맞게 자동으로 확장되어 연산이 이루어지도록 도와준다.

즉, 작은 배열이 큰 배열에 맞게 확장되거나 "브로드캐스트" 되어 연산을 수행한다.

기본 연산

import numpy as np

a = np.array([10, 20, 30])
b = np.array([1, 2, 3])
c = np.array([1, 2, 3, 4, 5]) # a와 c를 연산하면 ValueError가 발생

print(a + b) # [11 22 33]
print(a - b) # [9 18 27]
print(a * b) # [10 40 90]
print(a / b) # [10. 10. 10.]
print(a % b) # [0 0 0]
print(a + 5) # [15, 25, 35]

data1 = np.array([1, 2, 3]) # 1D 배열
data2 = np.array([
    [10, 20, 30],
    [40, 50, 60],
    [70, 80, 90]
]) # 2D 배열

print(data1[0]) # 1
print(data2[0]) # [10 20 30]

print(data2[0, 2]) # 30
print(data2[0][2]) # 30

print(data1[1] * 10) # 20
print(data2[1] * 10) # [400 500 600]

print(data1 + data2) # [[11 22 33] [41 52 63] [71 82 93]]

조건문

arr = np.array([10, 20, 30, 40, 50])
cond1 = arr > 10
cond2 = arr < 40

print(arr > 20) # [False False  True  True  True]

print(cond1) # [False  True  True  True  True]
print(cond2) # [ True  True  True False False]

print(arr[cond1 & cond2]) # [20 30]
print(arr[cond1 & cond2] / 10) # [2. 3.]

함수와 메서드

axis=0: 열 방향(세로) 계산
axis=1: 행 방향(가로) 계산

arr = np.array([10, 20, 30, 40, 50])

print("합계:", arr.sum())  # 150
print("최솟값:", arr.min())  # 10
print("최댓값:", arr.max())  # 50
print("평균:", arr.mean())  # 30.0
print("표준편차:", arr.std())  # 14.142135623730951
print("분산:", arr.var())  # 200.0

arr_2d = np.array([
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
])

print("전체 합계:", arr_2d.sum())  # 45

print("열 방향 합계:", arr_2d.sum(axis=0))  # [12 15 18]
print("행 방향 합계:", arr_2d.sum(axis=1))  # [ 6 15 24]

print("열 방향 최댓값:", arr_2d.max(axis=0))  # [7 8 9]
print("행 방향 최댓값:", arr_2d.max(axis=1))  # [3 6 9]

[파이썬] NumPy(넘파이) 기본 개념

JAEEE — Thu, 13 Feb 2025 15:49:35 +0900

NumPy

NumPy는 Numerical Python의 약자로, 수치 연산을 효율적으로 처리할 수 있는 파이썬의 핵심 라이브러리이다.

배열(Array), 행렬(Matrix), 고차원 배열 및 그에 대한 연산을 지원하고, 수학적·과학적 계산을 할 때 필수적으로 사용한다.

주요 특징

고속 연산: Numpy는 C로 구현되어 있어 파이썬의 기본 리스트보다 훨씬 빠르게 수치 연산을 수행할 수 있다.
다차원 배열 지원: 파이썬의 기본 리스트는 1차원 배열만 지원하지만, Numpy는 다차원 배열을 지원해 다양한 차원의 데이터를 처리할 수 있다.
백터화 연산: 반복문을 사용하지 않고, 배열에 대한 연산을 백터화하여 빠르게 처리한다.
다양한 수학 함수: 수학 함수, 선형 대수 연산, 푸리에 변환 등 수치적 계산을 위한 함수들을 제공한다.

NumPy Install

pip install numpy

NumPy Import

from numpy import *
또는
import numpy as np

NumPy Type

List (리스트)

리스트는 파이썬의 기본 자료형으로, 순서가 있는 집합이다.
리스트는 여러 데이터를 순차적으로 저장하고, 다양한 타입의 요소를 포함한다.
인덱싱, 슬라이싱 등을 통해 요소에 접근할 수 있다.
리스트의 요소를 추가, 수정, 삭제할 수 있다.

numpy.ndarray (NumPy 배열)

고정 크기 배열이고, 메모리 효율적이다.
다차원 배열 객체로, 고속 연산이 가능하다.
백터화 연산 덕분에 반복문 없이 배열에 대한 연산이 가능하다.
동일한 타입의 데이터만 저장할 수 있다. 즉, 하나의 배열 안에는 모든 원소의 데이터 타입이 동일하다.

import numpy as np

data = [1, 2, 3, 4] # type = list
np_data = np.array(data) # type = numpy.ndarray

print(data) # [1, 2, 3, 4]
print(np_data) # [1 2 3 4]

import numpy as np

data = [1, 2, 3, 4]

list_arr = data * 10
np_arr = np.array(data) * 10

print(list_arr)
print(np_arr)

multi_arr = np.array([
    [1, 2, 3, 4],
    [10, 20, 30, 40],
    [100, 200, 300, 400]
])

# 행 > 열 순서로 접근
print(multi_arr[0]) # [1 2 3 4]
print(multi_arr[1][2]) # 30
print(multi_arr[1, 2]) # 30
print(multi_arr[:, 3]) # [4 40 400]

[React Native] Expo로 리액트 네이티브 설치하기

JAEEE — Fri, 26 Jan 2024 17:20:53 +0900

왕초보를 위한 React Native 101

https://nomadcoders.co/react-native-for-beginners

노마드코더 강의를 참고하고 있습니다.

리액트 네이티브란?

리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로서, React와 JavaScript를 사용하여 Android 및 IOS 모바일 애플리케이션을 개발할 수 있다.

특징

리액트를 기반으로 하고 있어 컴포넌트를 사용해 재사용성이 높은 UI 구성요소를 만들 수 있다.
앱이 실행 중일 때 코드를 변경하면 핫 리로딩을 통해 변경 사항을 즉시 반영할 수 있다.
네이티브 모듈을 통해 카메라, 위치 정보, 파일 시스템 등 네이티브 기능에 직접 액세스 할 수 있다.
Expo 툴킷을 사용해 별도의 네이티브 코드를 작성하지 않고, 앱을 빠르게 개발할 수 있다.

장점

리액트 네이티브는 React와 JavaScript를 사용하기 때문에 동일한 코드 베이스로 Android와 IOS 모바일 애플리케이션 개발이 가능하다.
리액트 네이티브는 활발한 커뮤니티와 다양한 패키지를 가지고 있어 문제 해결이나 새로운 기능 추가에 대해 도움을 받을 수 있다.
네이티브 모듈을 활용해 개발 생산성이 향상된다.
핫 리로딩 기능이 활용해 개발 주기가 빠르다.

단점

네이티브 앱(특정 플랫폼 또는 운영 체제에 최적화되어 개발된 모바일 애플리케이션)에 비해 성능의 제약이 있을 수 있다.
특정 플랫폼에 특화된 기능이 필요한 경우, 네이티브 모듈의 사용해야 해서 추가적인 작업이 발생할 수 있다.

Expo란

Expo는 리액트 네이티브 앱을 개발하고 배포하기 위한 도구와 서비스를 제공하는 오픈 소스 프레임워크이다.

Expo를 사용하면 네이티브 개발 환경(Java, Android studio 등)을 설정하는 번거로움 없이 빠르게 리액트 네이티브 애플리케이션을 개발할 수 있다.

Expo로 리액트 네이티브 설치하기

https://expo.dev/

Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

expo.dev

노마드 강의는 2021년 버전이기 때문에 Expo 공식 문서를 참고해 리액트 네이티브를 설치했다.

node 버전 18 이상

1. expo-app 설치하기

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

npx create-expo-app 폴더명

2. 종속성 설치하기

설치한 폴더로 이동 후, 아래 패키지를 설치한다.

npx expo install react-dom react-native-web @expo/webpack-config

3. 웹에서 실행하기

터미널에 qr 코드만 나오고 웹이 실행되지 않는다면 w 옵션(open web)을 누른다.

npx expo start

4. 웹 결과 화면

5. 모바일(핸드폰)에서 확인하기

안드로이드를 사용하면 플레이 스토어에서 Expo 앱 설치하기

IOS를 사용하면 앱 스토어에서 Expo Go 앱 설치하기

앱 설치가 완료된 후, 회원가입과 로그인을 한다.

핸드폰으로 터미널에 나온 qr 코드를 스캔하거나

터미널에서 npx expo login 명령어를 입력해 expo에 로그인을 한다.

Expo 앱에 내 프로젝트가 연결된 것을 확인할 수 있다.

※ 주의, 컴퓨터와 핸드폰 와이파이가 같은 인터넷을 사용해야만 핸드폰에서 확인이 가능하다. ※

6. 브라우저에서 코딩 및 앱 화면 확인하기

https://snack.expo.dev/

만약 브라우저만 사용해서 코딩을 해야 하는 상황이라면 위의 홈페이지에서 작업을 하면 된다.

어떠한 설치 없이 중앙 편집기에서 코드를 작성하면 우측에서 IOS, Android, Web의 결과 화면을 확인할 수 있다.

또한 회원가입 및 로그인을 한 후에 저장을 하면 나만의 URL이 생성된다.

[Nest] #4 E2E TESTING - Jest 앤드 투 앤드 테스트

JAEEE — Wed, 10 Jan 2024 16:41:01 +0900

NestJS로 API 만들기

https://nomadcoders.co/nestjs-fundamentals

노마드코더 강의를 참고하고 있습니다.

e2e-spec.ts

Nest.js에서 E2E(End to End) 테스트는 애플리케이션의 전체적인 동작을 테스트하는 방법 중 하나이다.

여러 개의 e2e-spec.ts 파일이 있을 수 있고, E2E 테스트는 사용자가 실제 애플리케이션을 사용할 때와 유사한 환경에서 동작을 검증할 수 있다.

실제 HTTP 요청을 서버에 보내고, 응답을 검증하기 때문에 테스트할 때에도 실제 애플리케이션과 동일한 환경을 세팅해야 한다.

1. app.e2e-spec.ts

GET 요청 테스트

describe('/movies', ~), describe('/movies/:id', ~) 2가지 엔드포인트에 대해 GET 요청을 테스트한다.

GET 요청 시, 값이 있으면 200 응답이 예측되고, 값이 없으면 404 응답이 예측된다.

describe('AppController (e2e)', () => {
  describe('/movies', () => {
    it('GET 200', () => {
      return request(app.getHttpServer())
        .get('/movies')
        .expect(200)
        .expect([])
    });
  });

  describe('/movies/:id', () => {
    it('GET 200', () => {
      return request(app.getHttpServer())
        .get('/movies/1')
        .expect(200)
    });

    it('GET 404', () => {
      return request(app.getHttpServer())
        .get('/movies/999')
        .expect(404)
    });
  });
});

POST 요청 테스트

describe('/movies', ~), describe('/movies/:id', ~) 2가지 엔드포인트에 대해 POST 요청을 테스트한다.

POST 요청 시, 올바른 값을 전송하면 201 응답이 예측되고, 잘못된 값을 전송하면 400 응답이 예측된다.

describe('AppController (e2e)', () => {
  describe('/movies', () => {
    it('POST 201', () => {
      return request(app.getHttpServer())
        .post('/movies')
        .send({
          title: 'Test',
          year: 2024,
          genres: ['Test'],
        })
        .expect(201)
    });

    it('POST 400', () => {
      return request(app.getHttpServer())
        .post('/movies')
        .send({
          name: 'Name',
        })
        .expect(400)
    });
  });
});

DELETE 요청 테스트

describe('/movies', ~), describe('/movies/:id', ~) 2가지 엔드포인트에 대해 DELETE 요청을 테스트한다.

DELETE 요청 시, 전체 배열은 삭제할 수 없기 때문에 404 응답이 예측되고, 하나의 배열은 삭제할 수 있기 때문에 200 응답이 예측된다.

describe('AppController (e2e)', () => {
  describe('/movies', () => {
    it('DELETE 404', () => {
      return request(app.getHttpServer())
        .delete('/movies')
        .expect(404)
    });
  });

  describe('/movies/:id', () => {
    it('DELETE 200', () => {
      return request(app.getHttpServer())
        .delete('/movies/1')
        .expect(200)
    });
  });
});

PATCH 요청 테스트

describe('/movies/:id', ~) 엔드포인트에 대해 PATCH 요청을 테스트한다.

PATCH 요청 시, 올바른 값을 전송하면 200 응답이 예측되고, 잘못된 값을 전송하면 400 응답이 예측된다.

describe('AppController (e2e)', () => {
  describe('/movies/:id', () => {
    it('PATCH 200', () => {
      return request(app.getHttpServer())
        .patch('/movies/1')
        .send({ title: 'Update title' })
        .expect(200)
    });
    
    it('PATCH 400', () => {
      return request(app.getHttpServer())
        .patch('/movies/1')
        .send({ name: 'Update name' })
        .expect(400)
    });
  });
});

2. 테스트 환경 맞추기

test/app.e2e-spec.ts

src/main.ts 파일에서 파이프 옵션을 설정했다.

E2E 테스트는 실제 애플리케이션과 테스트 환경이 동일해야 하기 때문에 main.ts에서 설정한 옵션들을 spec.ts 파일에도 동일하게 설정한다. (app.useGlobalPipes() 부분)

import { Test, TestingModule } from '@nestjs/testing';
import { INestApplication, ValidationPipe } from "@nestjs/common";
import * as request from 'supertest';
import { AppModule } from './../src/app.module';

describe('AppController (e2e)', () => {
  let app: INestApplication;

  beforeAll(async () => {
    const moduleFixture: TestingModule = await Test.createTestingModule({
      imports: [AppModule],
    }).compile();

    app = moduleFixture.createNestApplication();
    app.useGlobalPipes(new ValidationPipe({
        whitelist: true,
        forbidNonWhitelisted: true,
        transform: true,
      }),
    );

    await app.init();
  });

  describe('/movies', () => {
      ...
  });
});

3. 터미널에서 확인하기

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

e2e-spec 파일에 대해 테스트가 진행된다.

npm run test:e2e

[Nest] #3 UNIT TESTING - 단위 테스트

JAEEE — Tue, 9 Jan 2024 16:47:29 +0900

NestJS로 API 만들기

https://nomadcoders.co/nestjs-fundamentals

노마드코더 강의를 참고하고 있습니다.

spec.ts

Nest.js에서 spec.ts 파일은 유닛 테스트를 작성하는 데 사용하는 파일이다.

특정 모듈, 서비스, 컨트롤러 등의 단위에 대해 테스트를 정의하는 데 사용한다.

일반적으로 Nest.js에서 유닛 테스트를 하기 위해 Jest 프레임워크를 사용한다.

package.json 파일을 보면 이미 jest 설정이 되어있는 것을 확인할 수 있다.

Jest

describe 함수

describe 함수는 테스트 파일이나 테스트 블록을 정의할 때 사용한다.

describe('Math operations', () => {
  // 덧셈에 대한 테스트 그룹
  describe('Addition', () => {
    it('should correctly add two numbers', () => {
      const result = 1 + 2;
      expect(result).toBe(3);
    });
  });

  // 뺄셈에 대한 테스트 그룹
  describe('Subtraction', () => {
    it('should correctly subtract two numbers', () => {
      const result = 5 - 2;
      expect(result).toBe(3);
    });
  });
});

it 함수

it 함수는 테스트 케이스를 정의할 때 사용한다.

it('테스트 설명', () => {
  // 테스트 로직
});

expect 함수

expect 함수는 예상한 결과와 실제 결과를 비교하고, 테스트가 성공적으로 통과했는지 여부를 판단한다.

밑에 예시에서 result가 배열의 인스턴스인지 검사한다.

it('should return an array', () => {
  const result = someFunction();
  expect(result).toBeInstanceOf(Array);
});

1. service.spec.ts

getAll 메서드 테스트

getAll 메서드로 가지고 온 값이 Array 인스턴스인지 확인한다.

describe('MoviesService', () => {
  describe('getAll', () => {
    it('should return an array', () => {
      const result = service.getAll();
      expect(result).toBeInstanceOf(Array);
    });
  });
});

getOne 메서드 테스트

service.create로 영화 데이터를 만든다.
getOne 메서드로 id가 1인 영화 데이터를 가지고 와 id가 1이 맞는지 비교한다.
id가 1이 아니라면(getOne(999)) 404 에러를 발생시킨다.

describe('MoviesService', () => {
  describe('getOne', () => {
    it('should return a movie', () => {
      service.create({
        title: 'Test Movie',
        year: 2024,
        genres: ['Test'],
      });

      const movie = service.getOne(1);
      expect(movie).toBeDefined();
      expect(movie.id).toEqual(1);
    });

    it('should throw 404 error', () => {
      try {
        service.getOne(999);
      } catch (e) {
        expect(e).toBeInstanceOf(NotFoundException);
      }
    });
  });
});

deleteOne 메서드 테스트

service.create로 영화 데이터를 만든다.
getAll 메서드로 영화의 길이를 변수에 저장한다.
deleteOne 메서드로 id가 1인 영화를 삭제한다.
그 후 다시 getAll 메서드로 영화의 길이를 변수에 저장해 영화를 삭제하기 전과 후의 값을 비교한다.
없는 id의 영화(deleteOne(999))를 삭제하면 404 에러를 발생시킨다.

describe('MoviesService', () => {
  describe('deleteOne', () => {
    it('deletes a movie', () => {
      service.create({
        title: 'Test Movie',
        year: 2024,
        genres: ['Test'],
      });

      const beforeDelete = service.getAll().length;
      service.deleteOne(1);

      const afterDelete = service.getAll().length;
      expect(afterDelete).toBeLessThan(beforeDelete);
    });

    it('should return a 404', () => {
      try {
        service.deleteOne(999);
      } catch (e) {
        expect(e).toBeInstanceOf(NotFoundException);
      }
    });
  });
});

create 메서드 테스트

getAll 메서드로 영화의 길이를 변수에 저장한다.
create 메서드로 새로운 영화를 생성한다.
그 후 다시 getAll 메서드로 영화의 길이를 변수에 저장해 영화를 생성하기 전과 후의 값을 비교한다.

describe('MoviesService', () => {
  describe('create', () => {
    it('should create a movie', () => {
      const beforeCreate = service.getAll().length;

      service.create({
        title: 'Test Movie',
        year: 2024,
        genres: ['Test'],
      });

      const afterCreate = service.getAll().length;
      expect(afterCreate).toBeGreaterThan(beforeCreate);
    });
  });
});

update 메서드 테스트

service.create로 영화 데이터를 만든다.
update 메서드로 id가 1인 영화의 title을 수정한다.
getOne 메서드로 해당 영화를 가져와 영화의 title이 'Updated Test'가 맞는지 비교한다.
없는 id의 영화(update())를 수정하면 404 에러를 발생시킨다.

describe('MoviesService', () => {
  describe('update', () => {
    it('should throw a NotFoundException', () => {
      service.create({
        title: 'Test Movie',
        year: 2024,
        genres: ['Test'],
      });

      service.update(1, { title: 'Updated Test' });

      const movie = service.getOne(1);
      expect(movie.title).toEqual('Updated Test');

      try {
        service.update(999, {});
      } catch (e) {
        expect(e).toBeInstanceOf(NotFoundException);
      }
    });
  });
});

2. 터미널에서 확인하기

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

모든 spec 파일에 대해 테스트가 진행된다.

:watch 옵션을 사용하면 저장할 때마다 자동으로 테스트를 시작한다.

npm run test
또는
npm run test:watch

3. 전체 코드

src/movies/movies.service.spec.ts

import { Test, TestingModule } from '@nestjs/testing';
import { MoviesService } from './movies.service';
import { NotFoundException } from '@nestjs/common';

describe('MoviesService', () => {
  let service: MoviesService;
  let testMovie;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [MoviesService],
    }).compile();

    service = module.get<MoviesService>(MoviesService);

    // 테스트에 사용될 영화 객체 생성, id는 자동으로 생성됨
    testMovie = {
      title: 'Test Movie',
      year: 2024,
      genres: ['Test'],
    };
  });

  describe('getAll', () => {
    it('should return an array', () => {
      expect(service.getAll()).toBeInstanceOf(Array);
    });
  });

  describe('getOne', () => {
    it('should return a movie', () => {
      service.create(testMovie);

      const movie = service.getOne(1);
      expect(movie).toBeDefined();
      expect(movie.id).toEqual(1);
    });

    it('should throw 404 error', () => {
      try {
        service.getOne(999);
      } catch (e) {
        expect(e).toBeInstanceOf(NotFoundException);
      }
    });
  });

  describe('deleteOne', () => {
    it('deletes a movie', () => {
      service.create(testMovie);

      const beforeDelete = service.getAll().length;
      
      service.deleteOne(1);

      const afterDelete = service.getAll().length;
      expect(beforeDelete).toBeLessThan(afterDelete);
    });

    it('should return a 404', () => {
      try {
        service.deleteOne(999);
      } catch (e) {
        expect(e).toBeInstanceOf(NotFoundException);
      }
    });
  });

  describe('create', () => {
    it('should create a movie', () => {
      const beforeCreate = service.getAll().length;

      service.create(testMovie);

      const afterCreate = service.getAll().length;
      expect(afterCreate).toBeGreaterThan(beforeCreate);
    });
  });

  describe('update', () => {
    it('should throw a NotFoundException', () => {
      service.create(testMovie);

      service.update(1, { title: 'Updated Test' });

      const movie = service.getOne(1);
      expect(movie.title).toEqual('Updated Test');

      try {
        service.update(999, {});
      } catch (e) {
        expect(e).toBeInstanceOf(NotFoundException);
      }
    });
  });
});

[Nest] #2.2 REST API - DTO

JAEEE — Fri, 5 Jan 2024 14:48:26 +0900

NestJS로 API 만들기

https://nomadcoders.co/nestjs-fundamentals

노마드코더 강의를 참고하고 있습니다.

문제점

src/movies/entities/movies.entity.ts

Entity 파일은 데이터베이스의 테이블과 상호 작용하기 위해 데이터 모델을 정의하고 캡슐화한다.

하지만 정의된 값(id, title, year, geners)이 아닌 다른 값(hacked)을 전송해도 HTTP 요청을 성공적으로 처리한다. (Status 200)

이와 같은 문제를 해결하기 위해서는 DTO를 사용한다.

export class Movie {
  id: number;
  title: string;
  year: number;
  genres: string[];
}

DTO란

데이터 전송 객체(DTO, Data Transfer Object)는 클라이언트와 서버 간 데이터 교환을 위한 객체로 사용된다.

클라이언트에서 서버로 데이터를 전송할 때 정확한 데이터 형식을 정의할 수 있어 잘못된 데이터 전송을 방지할 수 있다.
클라이언트가 전송하는 데이터는 종종 서버에서 사용되는 형식과 다를 수 있는데 DTO를 사용해 서버에서 필요한 형식으로 변환할 수 있다.
필요한 데이터만 전송받아 불필요한 정보 노출을 방지해 보안을 강화할 수 있다.

1. create DTO 만들기

src/movies/dto/create-movies.dto.ts

dto 폴더를 만들고, create-movies.dto.ts 파일을 만든다.
class-validator, class-transformer 패키지를 설치한다. 이 패키지들은 데이터 유효성 검사와 객체 변환을 쉽게 수행할 수 있도록 도와준다. (@IsString(), @IsNumber(), @IsOptional(), @MinLength() 등..)

npm install class-validator class-transformer

import { IsString, IsNumber, IsOptional } from "class-validator";

export class CreateMoviesDto {
  @IsString()
  readonly title: string;

  @IsNumber()
  readonly year: number;

  @IsOptional()
  @IsString({ each: true })
  readonly genres: string[];
}

2. update DTO 만들기

src/movies/dto/update-movies.dto.ts

dto 폴더에 update-movies.dto.ts 파일을 만든다.
PartialType()은 DTO 클래스의 모든 필드를 선택적으로 만들어주는 역할을 하고, 부분 업데이트를 수행할 때 사용한다. CreateMoviesDto의 모든 필드를 선택적으로 가지게 된다.
업데이트는 모든 필드의 수정이 필요 없기 때문에 ? 물음표를 사용해 선택 속성임을 나타낸다.

import { IsString, IsNumber } from 'class-validator';
import { PartialType } from '@nestjs/mapped-types';
import { CreateMoviesDto } from './create-movies.dto';

export class UpdateMoviesDto extends PartialType(CreateMoviesDto) {
  @IsString()
  readonly title?: string;

  @IsNumber()
  readonly year?: number;

  @IsString({ each: true })
  readonly genres?: string[];
}

3. DTO import 하기

src/movies/movies.service.ts

CreateMoviesDto, UpdateMoviesDto를 import 한다.
create 함수에 movieData 데이터 타입을 CreateMoviesDto로 명시한다.
update 함수에 updateData 데이터 타입을 UpdateMoviesDto로 명시한다.

import { CreateMoviesDto } from './dto/create-movies.dto';
import { UpdateMoviesDto } from './dto/update-movies.dto';
...

@Injectable()
export class MoviesService {
  private movies: Movie[] = [];

  create(movieData: CreateMoviesDto) {
    this.movies.push({
      id: this.movies.length + 1,
      ...movieData,
    });
  }

  update(id: number, updateData: UpdateMoviesDto) {
    const movie = this.getOne(id);

    this.deleteOne(id);
    this.movies.push({ ...movie, ...updateData });
  }
  
  ...
}

src/movies/movies.controller.ts

CreateMoviesDto, UpdateMoviesDto를 import 한다.
POST 요청을 보낼 때 데이터 타입을 CreateMoviesDto로 명시한다.
PATCH 요청을 보낼 때 데이터 타입을 UpdateMoviesDto로 명시한다.

import { CreateMoviesDto } from './dto/create-movies.dto';
import { UpdateMoviesDto } from './dto/update-movies.dto';
...

@Controller('movies') // Entry Point(URL)
export class MoviesController {
  constructor(private readonly moviesService: MoviesService) {}

  @Post()
  create(@Body() movieData: CreateMoviesDto) {
    return this.moviesService.create(movieData);
  }

  @Patch('/:id')
  patch(@Param('id') movieId: number, @Body() updateData: UpdateMoviesDto) {
    return this.moviesService.update(movieId, updateData);
  }
  
  ...
}

4. 결과 확인하기

DTO에 정의되지 않은 속성 또는 잘못된 타입을 POST 하면 에러 메세지가 나타난다.

DTO에 정의되지 않은 속성 또는 잘못된 타입을 PATCH 하면 에러 메세지가 나타난다.

[Nest] #2.1 REST API - 모듈, 컨트롤러, 서비스

JAEEE — Thu, 4 Jan 2024 10:43:29 +0900

NestJS로 API 만들기

https://nomadcoders.co/nestjs-fundamentals

노마드코더 강의를 참고하고 있습니다.

결과 화면

1. 컨트롤러(controller) 만들기

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

영화 API를 만들 것이기 때문에 컨트롤러의 이름은 movies로 한다. (이름은 API 성격에 맞게 자유롭게 작성하면 된다.)

app.module.ts 파일에서 MoviesController가 자동으로 import 된 것을 확인할 수 있다.

nest generate controller
또는
nest g co

참고

터미널에서 nest 명령어를 실행하면 nest에서 사용할 수 있는 명령어 리스트를 확인할 수 있다.

src/movies/movies.controller.ts

기본 형태

import { Controller } from '@nestjs/common';

@Controller('movies')
export class MoviesController {}

1. @Controller('movies')

컨트롤러를 정의하고, 해당 컨트롤러의 기본 URL 경로를 /movies로 지정한다.

2. @Get() getAll()

HTTP GET 메서드에 대한 핸들러이다.

/movies 경로의 GET 요청에 대한 응답을 반환한다.

3. @Get('/:id') getOne()

동적인 URL 파라미터인 :id를 사용해 특정 영화에 대한 정보를 가지고 오는 핸들러이다.

/movies/:id 경로의 GET 요청에 대한 응답을 반환한다.

4. @Post() create()

HTTP POST 메서드에 대한 핸들러이다.

/movies 경로의 POST 요청에 대한 응답을 반환한다.

5. @Delete('/:id') remove()

동적인 URL 파라미터인 :id를 사용해 특정 영화에 대한 정보를 삭제하는 핸들러이다.

/movies/:id 경로의 DELETE 요청에 대한 응답을 반환한다.

6. @Parch('/:id') patch()

동적인 URL 파라미터인 :id를 사용해 특정 영화에 대한 정보를 업데이트하는 핸들러이다.

/movies/:id 경로의 PATCH 요청에 대한 응답을 반환한다.

import { Controller, Get, Post, Delete, Patch, Param, Body } from '@nestjs/common';

@Controller('movies') // Entry Point(URL)
export class MoviesController {
  @Get()
  getAll() {
    return 'This will return all movies.';
  }

  @Get('/:id')
  getOne(@Param('id') movieId: string) {
    return `This will return one movie with the id: ${movieId}`;
  }

  @Post()
  create() {
    return 'This will create a movie.';
  }

  @Delete('/:id')
  remove(@Param('id') movieId: string) {
    return `This will delete a movie with the id: ${movieId}`;
  }

  @Patch('/:id')
  patch(@Param('id') movieId: string) {
    return `This will patch a movie with the id: ${movieId}`;
  }
}

2. 서비스(service) 만들기

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

서비스의 이름은 컨트롤러의 이름과 동일하게 movies로 한다. (네이밍 규칙에 따라 이름을 동일하게 작성한다.)

app.module.ts 파일에 MoviesService가 자동으로 import 된 것을 확인할 수 있다.

nest generate services
또는
nest g s

src/movies/movies.service.ts

기본 형태

import { Injectable } from '@nestjs/common';

@Injectable()
export class MoviesService {}

원래는 데이터베이스가 들어오는 영역이지만, 데이터베이스를 만들지 않을 것이기 때문에 가짜 데이터베이스를 위한 비즈니스 로직을 만든다.

1. private movies

가짜 데이터베이스를 만들기 위해 빈 배열은 만든다.

2. getAll()

모든 영화 정보를 반환하는 메서드이다.

movies 배열 전체를 반환한다.

3. getOne()

특정 id에 해당하는 영화 정보를 반환하는 메서드이다.

movies 배열에서 해당 id의 영화를 찾아 반환하고, id가 존재하지 않는다면 NotFoundException()을 반환한다.

4. deleteOne()

특정 id에 해당하는 영화 정보를 삭제하는 메서드이다.

getOne() 메서드를 사용해 해당 id의 영화가 존재하는지 확인한 후, 영화를 movies 배열에서 삭제한다.

5. create()

새로운 영화 정보를 추가하는 메서드이다.

movies 배열에 새로운 영화를 추가하고, id는 현재 배열 길이 +1로 설정한다.

6. update()

특정 id에 해당하는 영화 정보를 업데이트 하는 메서드이다.

getOne() 메서드를 사용해 해당 id의 영화를 가져와 deleteOne() 메서드를 사용해 삭제한 후, 업데이트된 영화를 movies 배열에 추가한다.

import { Injectable, NotFoundException } from "@nestjs/common";
import { Movie } from './entities/movies.entity';

@Injectable()
export class MoviesService {
  private movies: Movie[] = [];

  getAll(): Movie[] {
    return this.movies;
  }

  getOne(id: string): Movie {
    const movie = this.movies.find((movie) => movie.id === +id);

    if (!movie) {
      throw new NotFoundException(`Movie with ID: ${id} not found.`);
    }

    return movie;
  }

  deleteOne(id: string) {
    this.getOne(id);
    this.movies = this.movies.filter((movie) => movie.id !== +id);
  }

  create(movieData) {
    this.movies.push({
      id: this.movies.length + 1,
      ...movieData,
    });
  }

  update(id: string, updateData) {
    const movie = this.getOne(id);
    
    this.deleteOne(id);
    this.movies.push({ ...movie, ...updateData });
  }
}

2-1. 엔티티(entity) 만들기

src/movies/entities/movies.entity.ts

Nest.js는 타입스크립트 기반이기 때문에 데이터 타입을 정의한다.

export class Movie {
  id: number;
  title: string;
  year: number;
  genres: string[];
}

3. 컨트롤러 수정하기

src/movies/movies.controller.ts

2번에서 컨트롤러에 대한 개념을 잡기 위해 문자열을 return을 했지만, HTTP 요청을 처리할 수 있도록 서비스에 만든 비즈니스 로직을 return 한다.

1. constructor(private ~) {}

의존성 주입을 사용해 MoviesService를 주입한다.

2. @Get() getAll()

movieService의 getAll() 메서드를 호출해 모든 영화에 대한 정보를 반환한다.

3. @Get('/:id') getOne()

@Param 데코레이터를 사용해 URL 파라미터인 id를 추출하고, moviesService의 getOne() 메서드를 호출해 id에 해당하는 영화 정보를 반환한다.

4. @Post() create()

@Body 데코레이터를 사용해 요청 본문에서 전달된 데이터를 moviesSevice의 create() 메서드를 호출해 새로운 영화 정보를 추가한다.

5. @Delete('/:id') remove()

@Param 데코레이터를 사용해 URL 파라미터인 id를 추출하고, moviesService의 deleteOne() 메서드를 호출해 id에 해당하는 영화 정보를 삭제한다.

6. @Parch('/:id') patch()

@Param 데코레이터를 사용해 URL 파라미터인 id를 추출하고, @Body 데코레이터를 사용해 요청 본문에서 데이터를 전달한다.

moviesService의 update() 메서드를 호출해 id에 해당하는 영화 정보를 업데이트한다.

import { Controller, Get, Post, Delete, Patch, Param, Query, Body } from '@nestjs/common';
import { MoviesService } from './movies.service';
import { Movie } from './entities/movies.entity';

@Controller('movies')
export class MoviesController {
  constructor(private readonly moviesService: MoviesService) {}

  @Get()
  getAll(): Movie[] {
    return this.moviesService.getAll();
  }

  @Get('/:id')
  getOne(@Param('id') movieId: string) {
    return this.moviesService.getOne(movieId);
  }

  @Post()
  create(@Body() movieData) {
    return this.moviesService.create(movieData);
  }

  @Delete('/:id')
  remove(@Param('id') movieId: string) {
    return this.moviesService.deleteOne(movieId);
  }

  @Patch('/:id')
  patch(@Param('id') movieId: string, @Body() updateData) {
    return this.moviesService.update(movieId, updateData);
  }
}

데코레이터란,

@로 시작하는 함수를 데코레이터 라고 부르며, 클래스, 메서드, 프로터디 또는 매개변수에 부가적인 메타데이터를 제공하는 역할을 한다.

@Module

모듈을 정의하는데 사용되며, 모듈은 애플리케이션을 구성하고 기능을 캡슐화한다.

@Controller

컨트롤러를 정의하는데 사용되며, HTTP 요청을 처리하는 역할을 한다.

@Injectable

서비스를 정의하는데 사용되며, 의존성 주입을 가능하게 한다.

@Body

POST, PUT, PATCH 등의 HTTP 메서드에서 주로 사용한다.

json 또는 대량의 데이터 전송에 적합하다.

@Query

GET HTTP 메서드에서 주로 사용한다.

데이터를 필터링하거나 정렬하는 기분값을 전송에 적합하다.

ex) /movies?year=2024

@Param

동적인 경로를 가지는 라우팅에서 사용한다.

특정 데이터를 식별할 때 적합하다.

ex) /movies/2024

4. 결과 확인하기

Postman 또는 Insomnia로 HTTP에 대한 요청을 확인할 수 있다.

빈 배열을 확인할 수 있다.

POST

Status 201을 확인할 수 있다.

POST로 전송한 데이터를 확인할 수 있다.

DELETE

Status 200을 확인할 수 있다.

[Nest] #1 ARCHITECTURE OF NESTJS - 기본 개념

JAEEE — Wed, 3 Jan 2024 14:25:21 +0900

NestJS로 API 만들기

https://nomadcoders.co/nestjs-fundamentals

노마드코더 강의를 참고하고 있습니다.

결과 화면

Nest.js 설치하기

NestJs 설치에 대한 설명은 아래 링크를 참고한다.

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

[Nest] #1 NestJs 설치하기

NestJS(Nest)란? https://docs.nestjs.com/ NestJs는 효율적이고, 확장 가능한 Node.js 서버 애플리케이션을 구축하기 위한 프레임워크이다. 프로그레시브 Javascript를 사용하고, Typescript로 구축되어 Typescript를

jae-study.tistory.com

Nest.js

네스트(Nest.js)는 Node.js를 위한 서버 사이드 애플리케이션을 개발하기 위한 프레임워크이다.

애플리케이션을 구성하는데 모듈, 컨트롤러, 서비스의 개념을 사용한다.

모듈 (Module)

@Module 데코레이터를 사용해 모듈을 정의하고, 해당 모듈은 컨트롤러, 서비스, 미들웨어 및 다른 컴포넌트들을 그룹화하는 방법을 제공한다.

Nest.js 애플리케이션을 여러 모듈로 구성되며, 의존성 주입을 통해 모듈 간에 서비스 및 기능을 공유하고, 코드의 재사용성을 높인다.

src/app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

컨트롤러 (Controller)

@Controller 테코레이터를 사용해 컨트롤러를 정의하고, 해당 컨트롤러에는 특정 엔드포인트(경로)에 대한 라우팅 정보가 포함된다.

또한 각 컨트롤러는 HTTP 메서드(GET, POST 등)에 메핑 되며, HTTP 요청을 처리하고 응답하는 역할을 수행한다.

src/app.controller.ts

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('/hi')
  sayHello(): string {
    return this.appService.getHi();
  }
}

서비스 (Service)

@Injectable() 데코레이션을 사용해 서비스를 정의하고, 해당 서비스에는 필요한 비즈니스 로직이나 데이터를 구현한다.

컨트롤러에서 호출되어 컨트롤러에게 데이터가 기능을 제공하는 역할을 한다.

src/app.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello Nest!';
  }

  getHi(): string {
    return 'Hi Nest!';
  }
}

주의

데코레이터는 함수나 클래스랑 붙어있어야 한다. (스페이지 또는 엔터를 사용하면 안 된다.)

[리액트][타입스크립트] #7 게시판 만들기 - 목록 페이지네이션 (NestJs pagination)

JAEEE — Thu, 28 Dec 2023 15:24:35 +0900

결과 화면

수정사항

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

기존에는 react-js-pagination 패키지를 사용해 페이지네이션을 구현했다.

하지만 페이지네이션을 프론트에서 만들었을 경우, 서버와 데이터베이스의 부하가 발생할 수 있기 때문에 백앤드의 작업이 필요하다.

백앤드 없이 프론트에서 페이지네이션을 구현하고 싶다면 위의 링크를 참고한다.

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

NestJs로 페이지네이션을 만들었다.

페이지네이션을 백앤드에서 만들어야 하는 이유에 대한 설명은 위의 링크를 참고한다.

1. boardReducer.tsx

src/store/boardReducer.tsx

page 파라미터를 받는다. 타입스크립트이기 때문에 타입을 정의한다.
axios.get을 사용해 page에 해당하는 데이터를 요청한다. URL은 쿼리 파라미터가 붙은 key=value 형태이다.

export const getBoardList = createAsyncThunk(
  'GET_BOARD_LIST',
  async (page: number) => {
    try {
      const response = await axios.get(`http://localhost:3001/board?page=${page}`)
      return response.data
    } catch (error) {
      console.log(error)
    }
  }
)

...

2. 페이지네이션에 해당하는 데이터 가져오기

src/pages/board/list/index.tsx

dispatch를 사용해 page에 해당하는 게시판 데이터를 가져온다.
axios를 통해 받아온 데이터가 객채(object) 형태이기 때문에 (배열처럼 보이지만 typeof로 확인하면 object이다.) [board, setBoard] state 변수를 만들고, 전개 연산자를 사용해 배열 형태로 바꾼다.
axios를 통해 받아온 page 데이터가 문자(string) 형태이기 때문에 [page, setPage] state 변수를 만들고, Number로 타입을 변환한다.
페이지네이션 버튼에 대한 공통 함수(handlePagination)를 만든다.

import { useEffect, useState } from 'react'
import { useAppDispatch, useAppSelector } from '../../../hooks/useApp'
...

const BoardList = () => {
  // ** Hooks
  const dispatch = useAppDispatch()

  // ** Redux States
  const boardList = useAppSelector(state => state.boardReducer)

  // ** States
  const [board, setBoard] = useState<boardType[]>([])
  const [page, setPage] = useState<number>(1)

  // 페이지네이션
  function handlePagination(newPage: number) {
    if(newPage >= 1 && newPage <= boardList.meta.last_page) {
      dispatch(getBoardList(newPage))
    }
  }

  // 페이지가 로딩되면 게시판 리스트 가져옴
  useEffect(() => {
    dispatch(getBoardList(page))
  }, [])

  // 페이지가 로딩된 후 state 변수에 boardList 데이터 저장함
  useEffect(() => {
    if (boardList && boardList.data) {
      setBoard([...boardList.data])
      setPage(Number(boardList.meta.page))
    }
  }, [boardList])

  return (
    ...
  )
}

export default BoardList

3. 마크업 하기

src/pages/board/list/index.tsx.

삼항연산자를 사용해 데이터가 있고, 없을 때 마크업을 다르게 표현한다.
map 메서드를 사용해 게시판 데이터를 보여준다.
처음으로, 이전, 다음, 마지막으로 버튼 기능을 구현한다.

const BoardList = () => {
  ...

  return (
    <div className="board-list">
      <Title children="Board list"/>

      <h4>Total post : {boardList.meta?.total}</h4>

      <table>
        <colgroup>
          <col width="15%"/>
          <col width="65%"/>
          <col width="20%"/>
        </colgroup>

        <thead>
          <tr>
            <th>No</th>
            <th>Title</th>
            <th>Date</th>
          </tr>
        </thead>

        <tbody>
          {
            board.length === 0 ? (
              <tr>
                <td colSpan={3}>데이터가 없습니다.</td>
              </tr>
            ) : (
              board.map((board, index) => {
                return (
                  <tr key={index}>
                    <td>{board.id}</td>
                    <td className="title">
                      <Link to={`/board/${board.id}`}>{board.title}</Link>
                    </td>
                    <td>{dayjs(board.created_at).format('YYYY.MM.DD')}</td>
                  </tr>
                )
              })
            )
          }
        </tbody>
      </table>

      {
        board.length === 0 ? (
          <></>
        ) : (
          <div className="pagination">
            {
              boardList.meta.last_page === 1 ? (
                <>
                  <button disabled>&#60;</button>
                  <p>{page}</p>
                  <button disabled>&#62;</button>
                </>
              ) : (
                <>
                  <button onClick={() => handlePagination(1)}>&#60;&#60;</button>
                  <button onClick={() => handlePagination(page - 1)}>&#60;</button>
                  <p>{page} / {boardList.meta.last_page}</p>
                  <button onClick={() => handlePagination(page + 1)}>&#62;</button>
                  <button onClick={() => handlePagination(boardList.meta.last_page)}>&#62;&#62;</button>
                </>
              )
            }
          </div>
        )
      }

      <Link to="/board/create">
        <Button children="Write" variant="primary"/>
      </Link>
    </div>
  )
}

export default BoardList

[Nest] NestJs 페이지네이션 만들기 (쿼리 파라미터)

JAEEE — Thu, 28 Dec 2023 14:31:39 +0900

결과 화면

페이지네이션(Pagination)이란

페이지네이션은 대량의 데이터를 관리하고 효율적으로 표시하기 위한 기술로 사용자가 웹 페이지 상에서 여러 페이지로 나뉜 데이터를 탐색할 수 있도록 하는 방법이다.

페이지네이션을 백앤드에서 만들어야 하는 이유

서버 리소스 효율성 증가 : 페이지네이션은 클라이언트가 필요로 하는 양의 데이터만 전송하여 서버 리소스를 효율적으로 활용한다.
데이터베이스 부하 감소 : 페이지네이션을 통해 서버는 필요한 데이터만 데이터베이스에서 가져와 부하를 감소시킨다.
클라이언트 성능 향상 : 서버와 데이터베이스에서 필요한 데이터만 요청하여 클라이언트의 로딩 시간을 최소화해 사용자의 경험을 향상한다.
검색 엔진 최적화(SEO) : 페이지네이션은 검색 엔진이 페이지 간 이동을 파악하고 데이터를 효과적으로 색인화할 수 있도록 도와준다.

간단히 말해, 데이터의 양이 상대적으로 적은 경우(예: 100개), 페이지네이션의 유무에 따른 성능 차이를 느끼지 못할 수 있지만, 데이터의 양이 많아지면(예: 10만개 이상) 클라이언트에서 서버로 데이터를 요청하고 수신하는 과정에서 서버 및 데이터베이스 부하가 증가하게 된다.

따라서 백엔드에서 페이지네이션을 구현해 데이터를 효율적으로 관리하고 사용자의 경험을 최적화할 수 있다.

1. board.service.ts

service 파일에는 비즈니스 로직이나 데이터 조작 등을 수행하는 메서드를 구현한다.

src/board/board.service.ts

paginate 메서드를 만든다.
page 매개변수로 페이지 번호를 지정하고, 기본값을 1로 설정한다.
take 변수는 한 페이지에 표시될 아이템 수를 나타낸다.
findAndCount 메서드는 데이터베이스에서 페이징 된 데이터를 검색하고, 해당 데이터와 전체 아이템 수를 배열로 반환한다.
페이지와 관련된 meta 정보를 return 한다.

@Injectable()
export class BoardService {
  constructor(private readonly boardRepository: BoardRepository) {}

  async paginate(page = 1): Promise<any> {
    const take = 5;

    const [board, total] = await this.boardRepository.findAndCount({
      take,
      skip: (page - 1) * take,
    });

    return {
      data: board,
      meta: { take, total, page, last_page: Math.ceil(total / take) },
    };
  }
  
  ...
}

2. board.controller.ts

src/board/board.controller.ts

@Get()으로 HTTP GET 요청을 처리하는 핸들러임을 나타낸다.
@Query('page')를 통해 쿼리 파라미터를 받아와 page 변수에 할당하고, 기본값을 1로 설정한다.
boardService 클래스에 정의된 paginate 메서드를 호출해서 return 한다.

@Controller('board')
export class BoardController {
  constructor(private readonly boardService: BoardService) {}

  @Get()
  async all(@Query('page') page = 1): Promise<any[]> {
    return await this.boardService.paginate(page);
  }
  
  ...
}

포스트맨(postman)을 통해서 결과를 확인할 수 있다.

url 뒤에 page=1 쿼리 파라미터가 생겼다.

쿼리 파라미터(Query Parameter)는 URL 끝에 ?로 시작하며, 그 뒤에 'key=value' 형태로 데이터를 전달하는 방식이다.

[Nuxt3] #7 ToDo List 만들기 - Nest.js + PSQL 상세페이지 만들기 (useFetch())

JAEEE — Tue, 26 Dec 2023 11:06:46 +0900

목표

투두리스트 상세페이지 만들기
useRoute()로 파라미터 가져오기
useFetch()로 서버 데이터 가져오기

결과 화면

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

1. 상세페이지 만들기

pages/[id].vue

pages 디렉터리 내에 [id].vue 파일을 만든다. 별도의 설정 없이 자동으로 동적 라우팅이 생성된다.

투두리스트 목록 페이지 = index.vue

투두리스트 상세 페이지 = [id].vue

Nuxt3의 핵심 기능 중 하나는 파일 시스템 라우터이다.

pages/ 디렉터리 내의 모든 Vue 파일은 URL을 생성한다.

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

라우팅에 대한 자세한 설명은 공식문서를 참고한다.

주의

Vue나 Nuxt2에서는 동적 라우팅 페이지가 _id.vue(언더바 _) 였다. Nuxt3부터는 [id].vue(대괄호 []) 이다.

2. 파라미터 가져오기

pages/[id].vue

route 변수를 만든다.
${route.params.id}로 url의 파라미터 값을 가져온다.
useFetch()로 해당 파라미터에 대한 서버 데이터를 가져온다.

https://nuxt.com/docs/api/composables/use-route

useRoute()에 대한 자세한 설명은 공식 문서를 확인한다.

<script setup lang="ts">
const route = useRoute()
console.log(route)

const { data } = await useFetch(`http://localhost:3001/todo/${route.params.id}`)
console.log(data)
</script>

3. 마크업

pages/[id].vue

테일윈드를 사용해 CSS를 작성했다.
{ data }의 id와 todo 값을 화면에 보여준다.

<script setup lang="ts">
const route = useRoute()

const { data } = await useFetch(`http://localhost:3001/todo/${route.params.id}`)
</script>

<template>
  <section>
    <h1 class="mt-6 mb-12 md:mt-10 text-5xl font-bold text-center">To Do Detail</h1>

    <div class="p-4 md:p-6 md:pb-12 border rounded">
      <p class="block mb-6 text-xl font-bold text-right">No.{{ data.id }}</p>
      <p class="flex gap-2 text-base md:text-lg">{{ data.todo }}</p>
    </div>

    <NuxtLink to="/"  class="block w-full md:w-1/3 m-auto mt-12 px-3 py-4 bg-teal-950 hover:bg-teal-500 transition rounded text-center">
      Go to To Do List
    </NuxtLink >
  </section>
</template>

[Nuxt3] #6 ToDo List 만들기 - Nest.js + PSQL 연결하기 (useFetch())

JAEEE — Fri, 22 Dec 2023 10:20:29 +0900

목표

useFetch()로 서버 데이터 가져오기
watch()를 사용해 서버 데이터 변경 감지하기
$fetch 사용해 HTTP 메서드 사용하기 (GET, POST, DELETE)
서버 데이터를 등록순/최신순 정렬하기

결과 화면

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

1. Nest.js + PSQL (백앤드 + 데이터베이스)

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

Nest.js와 Psql을 사용해서 백앤드와 데이터베이스를 만들었다.

직접 백앤드와 데이터베이스를 만들어도 되고,

JSONPlaceholder 사이트를 통해 가짜 데이터를 받아와도 된다.

2. toDo 가져오기

pages/index.vue

Nuxt3에서는 axios 대신 useFetch()를 사용해 데이터 패칭을 한다.

useFetch()는 데이터를 비동기적으로 불러올 수 있고, 기존 axios 코드보다 로직을 간소화할 수 있다.

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

useFetch()에 대한 자세한 설명은 위의 링크를 참고한다.

Nuxt3는 타입스크립트 기반이기 때문에 useFetch()로 받아오는 데이터의 타입을 정의한다. (IToDo[])
서버에서 받은 데이터를 가공하기 위해 toDoData 변수를 만든다. useFetch()로 받아오는 데이터의 타입은 기본적으로 객체(object)이다. 이것을 배열로 만들어 정렬(sort 메서드)을 하고 싶어 toDoData 변수를 만들었다.
toDo를 추가하고 삭제할 때마다 실시간으로 렌더링 하기 위해 watch 함수를 사용한다.

<script setup lang="ts">
interface IToDo {
  id: number
  todo: string
  created_at: Date
}

// axios.get 기능 (toDo 가져오기)
const { data, refresh } = await useFetch<IToDo[]>('http://localhost:3001/todo')
const toDoData = ref(data.value ? [...data.value] : [])

watch(() => data.value, () => {
  toDoData.value = isActive.value ? [...data.value] : [...data.value].reverse()
})

...
</script>

3. toDo 추가하기

pages/index.vue

newToDo 변수를 만들어 빈 값이면 alert() 창이 나오게 하고, 값이 있으면 POST 메서드를 실행한다.
POST가 완료되면 newToDo를 빈 값으로 만들고, 실시간 값 변화를 감지하기 위해 refresh()를 실행한다.

<script setup lang="ts">
const newToDo = ref('')

// axios.post 기능 (toDo 추가하기)
async function addToDo() {
  if(newToDo.value === '') {
    alert('할 일을 입력해 주세요.')
  } else {
    await $fetch('http://localhost:3001/todo', {
      method: 'POST',
      body: { todo: newToDo.value }
    })

    newToDo.value = ''
    await refresh()
  }
}

...
</script>

4. toDo 삭제하기

pages/index.vue

리스트 1개만 삭제하고 싶으면 해당하는 id 값을 매개변수로 받아 DELETE 메서드를 실행한다.
리스트 전체를 삭제하고 싶으면 api 전체 리스트에서 DELETE 메서드를 실행한다.
DELETE가 완료되면 실시간 값 변화를 감지하기 위해 refresh()를 실행한다.

<script setup lang="ts">
// axios.delete 기능 (toDo 삭제하기)
async function deleteToDo(id: number) {
  await $fetch(`http://localhost:3001/todo/${id}`, {
    method: 'DELETE'
  })

  await refresh()
}

// axios.delete 기능 (toDo 전체 삭제하기)
async function clearToDo() {
  if(window.confirm('리스트를 모두 삭제하시겠습니까?')) {
    await $fetch(`http://localhost:3001/todo`, {
      method: 'DELETE'
    })

    await refresh()
  }
}

...
</script>

5. toDo 정렬하기

pages/index.vue

useFetch()로 받은 데이터를 배열로 만들어 sort() 메서드를 사용해 등록순/최신순으로 정렬한다.

<script setup lang="ts">
const isActive = ref(true)

// 등록순, 최신순 정렬하기
function sortToDo(compareFn: (a: IToDo, b: IToDo) => number) {
  toDoData.value = [...data.value].sort(compareFn)
  isActive.value = !isActive.value
}

...
</script>

<template>
  <section class="w-full max-w-screen-lg min-h-screen m-auto">
    ...

    <div v-if="toDoData.length > 0">
      <div class="flex gap-2 mb-6">
        <button
          :class="{ 'underline underline-offset-4' : isActive }"
          @click="() => sortToDo((a, b) => a.id - b.id)">
          등록순
        </button>
        <i>|</i>
        <button
          :class="{ 'underline underline-offset-4' : !isActive }"
          @click="() => sortToDo((a, b) => b.id - a.id)">
          최신순
        </button>
      </div>
    </div>
    
    ...
  </section>
</template>

6. 마크업

pages/index.vue

테일윈드를 사용해 CSS를 작성했다.
각각의 버튼에 맞는 @click 이벤트를 작성한다.

<template>
  <section class="w-full max-w-screen-lg min-h-screen m-auto">
    <h1 class="mt-6 mb-12 md:mt-10 text-5xl font-bold text-center">To Do List</h1>

    <form
      class="mb-6"
      @submit.prevent="addToDo()">
      <label
        for="toDo"
        class="block mb-3 text-xl font-bold">
        New To Do
      </label>

      <div class="flex gap-3 md:gap-5">
        <input
          v-model="newToDo"
          type="text"
          id="toDo"
          class="w-3/4 px-3 py-4 rounded outline-none text-black"
          placeholder="할 일을 입력해 주세요."/>
        <button class="w-1/4 bg-teal-600 hover:bg-teal-500 transition rounded">추가하기</button>
      </div>
    </form>

    <div v-if="toDoData.length > 0">
      <div class="flex gap-2 mb-6">
        <button
          :class="{ 'underline underline-offset-4' : isActive }"
          @click="() => sortToDo((a, b) => a.id - b.id)">
          등록순
        </button>
        <i>|</i>
        <button
          :class="{ 'underline underline-offset-4' : !isActive }"
          @click="() => sortToDo((a, b) => b.id - a.id)">
          최신순
        </button>
      </div>

      <ul>
        <li
            v-for="(data, key) in toDoData"
            :key="key"
            class="flex justify-between items-center gap-3 mb-6 px-4 py-3 md:px-5 border rounded">
          <p class="flex gap-2 text-base md:text-lg">
            <span>{{ key + 1 }}.</span> {{ data.todo }}
          </p>

          <button
            class="min-w-fit px-5 py-2 bg-teal-600 hover:bg-teal-500 transition rounded"
            @click="deleteToDo(data.id)">
            삭제
          </button>
        </li>
      </ul>

      <button
        class="block w-full md:w-1/3 m-auto mt-12 px-3 py-4 bg-teal-950 hover:bg-teal-500 transition rounded"
        @click="clearToDo()">
        전체 삭제하기
      </button>
    </div>
  </section>
</template>

상세 코드는 깃허브 페이지를 참고한다.

https://github.com/heejae0811/nuxt3-todo/tree/axios

GitHub - heejae0811/nuxt3-todo: main: Pinia To Do List / axios: Nest.js + PSQL To Do List (useFetch)

main: Pinia To Do List / axios: Nest.js + PSQL To Do List (useFetch) - GitHub - heejae0811/nuxt3-todo: main: Pinia To Do List / axios: Nest.js + PSQL To Do List (useFetch)

github.com

https://github.com/heejae0811/todo-backend

GitHub - heejae0811/todo-backend: Nest.js + PSQL ToDo 백앤드

Nest.js + PSQL ToDo 백앤드. Contribute to heejae0811/todo-backend development by creating an account on GitHub.

github.com

[Vue/Nuxt] Nuxt.js 깃허브 페이지 배포하기

JAEEE — Mon, 4 Dec 2023 17:19:13 +0900

결과 화면

https://heejae0811.github.io/vue-components/

Vue/Nuxt Components

뷰/넉스트 컴포넌트입니다.

heejae0811.github.io

https://v2.nuxt.com/deployments/github-pages#github-actions

GitHub Pages

How to deploy Nuxt app on GitHub Pages?

v2.nuxt.com

Nuxt 깃허브 배포에 대한 자세한 설명은 위의 공식문서를 참고한다.

1. nuxt.config.js

정적 사이트로 배포해야 하기 때문에 target: 'static'을 추가하고,

router에는 깃 레포지토리 이름을 작성한다.

export default {
  target: 'static',
  router: {
    base: '/깃 레포지토리 이름/'
  },
  
  ...
}

2. push-dir 설치하기

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

설치된 버전은 package.json 파일에서 확인할 수 있다.

yarn add --dev push-dir

3. package.json

scripts 부분에 "deploy" : "~~" 를 추가한다.

{
  ...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
  },
  ...
}

4. 배포하기

터미널에서 yarn generate 명령어를 실행하면 dist 폴더가 생기는 것을 볼 수 있다.

yarn deploy 명령어를 실행하면 깃허브에 배포된다.

yarn generate
yarn deploy

5. 깃허브 Settings

위의 과정을 수행했음에도 깃허브 페이지가 배포가 되지 않는다면 깃 레포지토리 Settings을 확인해 본다.

깃 레포지토리 - Settings - Pages에서 Branch가 gh-pages로 되어있는지 확인한다.

[Nuxt3] #5 ToDo List 만들기 - meta 태그 추가하기

JAEEE — Thu, 30 Nov 2023 18:41:02 +0900

결과 화면

https://heejae0811.github.io/nuxt3-todo/

오늘의 할 일

오늘의 할 일은 무엇인가요?

heejae0811.github.io

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

1. nuxt.config.ts

head 태그 아래에 추가하고 싶은 메타태그를 작성한다. (title, meta, link가 HTML 태그로 변환된다.)

name, content, property 등 작성한 값들이 메타태그 속성으로 들어가기 때문에 다른 메타태그를 추가하고 싶다면 속성에 맞는 값들을 입력한다.

메타태그 이미지와 파비콘 이미지 경로는 절대 경로를 사용한다.

깃허브 페이지를 통해 빌드된 파일을 배포하고 있기 때문에 메타태그 이미지는 assets 폴더가 아닌 public 폴더에 넣는다.

export default defineNuxtConfig({
  app: {
    head: {
      title: 'ToDo List',
      meta: [
        { name: 'description', content: '오늘의 할 일은 무엇인가요?' },
        { property: 'og:title', content: '오늘의 할 일' },
        { property: 'og:description', content: '오늘의 할 일은 무엇인가요?' },
        { property: 'og:image', content: 'https://heejae0811.github.io/nuxt3-todo/meta.jpg' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: 'https://heejae0811.github.io/nuxt3-todo/favicon.ico' }
      ]
    },
  },
  
  ...
})

2. 페이지 별 메타태그 설정하기

nuxt.config.ts에 정의한 메타태그는 모든 페이지에서 공통으로 적용된다.

각 페이지 별로 메타태그를 다르게 설정하고 싶으면 아래 링크를 참고한다.

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

[Nuxt3] #16 Nuxt 3 SEO (메타태그 설정하기)

SEO & metas with Nuxt 3 — Course part 16 https://www.youtube.com/watch?v=PpyXtoM5HWQ&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=16 유튜브 강의를 참고하고 있습니다. 공통 메타태그 설정하기 nuxt.config.ts 모든 페이지에서

jae-study.tistory.com

[Nuxt3] #4 ToDo List 만들기 - 깃허브 페이지 배포하기

JAEEE — Thu, 30 Nov 2023 15:58:58 +0900

결과 화면

https://heejae0811.github.io/nuxt3-todo/

오늘의 할 일

오늘의 할 일은 무엇인가요?

heejae0811.github.io

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

1. gh-pages 설치하기

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

설치된 버전은 package.json 파일에서 확인할 수 있다.

npm install gh-pages

또는

yarn add gh-pages

2. package.json

package.json 파일의 scripts 부분에 "deploy": "~~"를 추가한다.

-f 옵션은 gh-pages 브랜치 깃 히스토리를 삭제한다. 깃 히스토리를 남기고 싶다면 해당 옵션을 제외한다.

"scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "deploy": "gh-pages --dotfiles -d .output/public -f"
},

3. nuxt.config.ts

nuxt.config.ts 파일의 app 부분에 baseUrl과 buildAssetsDir를 추가한다.

이때 baseUrl은 깃허브 레포지토리 이름으로 한다.

export default defineNuxtConfig({
  app: {
    baseURL: '/깃 레포지토리 이름/',
    buildAssetsDir: 'assets'
  },
  
  ...
})

4. 깃허브 페이지 배포하기

터미널에서 npm run generate 명령어를 실행하면 .output 폴더와 dist 폴더가 생기는 것을 볼 수 있다.

npm run deploy 명령어를 실행하면 깃허브에 배포된다.

npm run generate
npm run deploy

5. 깃허브 Settings

위의 과정을 수행했음에도 깃허브 페이지가 배포가 되지 않는다면 깃 레포지토리 Settings을 확인해 본다.

깃 레포지토리 - Settings - Pages에서 Branch가 gh-pages로 되어있는지 확인한다.

[Nuxt3] #3 ToDo List 만들기 - 등록순/최신순 정렬하기

JAEEE — Thu, 30 Nov 2023 14:20:02 +0900

목표

sort 메서드를 이용해 toDoList 정렬하기
v-bind를 이용해 class 바인딩하기

결과 화면

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

0. 정렬 함수 하나로 만들기 (23.12.27 추가)

pages/index.vue

중복된 코드가 많고, 토글 형태로 isActive 변수를 만들어 등록순을 클릭하고 또 등록순을 클릭하면 최신순으로 변경되는 오류가 발생해 코드를 수정했다.

sortToDo() 함수를 만든다.
compareFn 매개변수를 만들어 @click 이벤트에서 받아온다. Nuxt3은 타입스크립트 기반이기 때문에 타입을 작성한다.
data.value는 axios에서 받아오는 toDoData이다. 객체 형태이기 때문에 전개연산자를 사용했지만, 배열이라면 바로 sort 메서드를 사용한다.
@click 이벤트에서 isActive를 true/false로 바꿔 class를 바인딩한다.

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

interface IToDo {
  id: number
  todo: string
  created_at: Date
}

function sortToDo(compareFn: (a: IToDo, b: IToDo) => number) {
  toDoData.value = [...data.value].sort(compareFn)
}
</script>

<template>
    <section>
    	...
    
        <div v-if="toDoData.length > 0">
            <div class="flex gap-2 mb-6">
                <button
                    :class="{ 'underline underline-offset-4': isActive }"
                    @click="() => {
                    isActive = true
                    sortToDo((a, b) => a.id - b.id)}">
                    등록순
                </button>
                <i>|</i>
                <button
                    :class="{ 'underline underline-offset-4': !isActive }"
                    @click="() => {
                    isActive = false
                    sortToDo((a, b) => b.id - a.id)}">
                    최신순
                </button>
            </div>
        </div>
        
        ...
    </section>
</template>

1. 등록순/최신순 정렬 함수 만들기

pages/index.vue

sort 메서드로 toDoList의 id를 비교해 등록순/최신순 정렬 함수를 만든다.
<button> 태그에 @click 이벤트를 걸어준다.

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

function sortRegistered() {
  toDo.toDoList.sort((a, b) => a.id - b.id)
}

function sortLatest() {
  toDo.toDoList.sort((a, b) => b.id - a.id)
}
</script>

<template>
  <section class="w-full max-w-screen-lg m-auto">
    ...
  
    <div v-if="toDo.toDoList.length > 0">
      <div class="flex gap-2">
        <button @click="sortRegistered()">등록순</button>
        <i>|</i>
        <button @click="sortLatest()">최신순</button>
      </div>
      
      ...
    </div>
  </section>
</template>

2. v-bind로 class 바인딩하기

pages/index.vue

isActive 변수를 Boolean으로 만든다. (등록순/최신순 버튼에 on/off 효과를 주기 위해서)
sort 함수가 동작할 때마다 isActive 변수가 true/false 될 수 있게 만든다.
v-bind( : )를 이용해 클래스를 바인딩한다. (1개의 클래스만 바인딩하며 ''이 없어도 되지만, 여러 개 클래스를 바인딩할 경우 '' 안에 작성한다.)

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

let isActive = true

function sortRegistered() {
  toDo.toDoList.sort((a, b) => a.id - b.id)
  isActive = !isActive
}

function sortLatest() {
  toDo.toDoList.sort((a, b) => b.id - a.id)
  isActive = !isActive
}
</script>

<template>
  <section class="w-full max-w-screen-lg m-auto">
    ...
    
    <div v-if="toDo.toDoList.length > 0">
      <div class="flex gap-2">
        <button
          :class="{ 'underline underline-offset-4' : isActive }"
          @click="sortRegistered()">등록순</button>
        <i>|</i>
        <button
          :class="{ 'underline underline-offset-4' : !isActive }"
          @click="sortLatest()">최신순</button>
      </div>
      
      ...
    </div>
  </section>
</template>

[Nuxt3] #2 ToDo List 만들기 - Pinia store로 ToDo 추가, 삭제하기

JAEEE — Wed, 29 Nov 2023 17:47:13 +0900

목표

Pinia 설치하기
Pinia store에서 데이터 불러오기
toDo 추가 및 삭제하기

결과 화면

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

1. Pinia 설치하기

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

[Nuxt3] #10 Nuxt 3 State Management (일반 변수, useState, pinia 상태 관리 비교)

State management with Nuxt 3 — Course part 10 https://www.youtube.com/watch?v=IkpoAKS1s-k&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=10 유튜브 강의를 참고하고 있습니다. State Management란 상태 관리(State Management)에서 상태(Sta

jae-study.tistory.com

Pinia 및 Nuxt3 state에 대한 자세한 설명은 위의 링크를 참고한다.

2. json 데이터 만들기

server/api/toDoList.json

api가 없기 때문에 json 파일로 빈 배열을 만든다.

[]

3. Pinia store 만들기

stores/toDoStore.ts

pinia를 import 한다.
만든 toDoList.json 파일을 import 한다.
useToDoStore 변수를 만들고, state를 정의한다. (초기값은 toDoList.json 파일의 빈 배열)
Nuxt3은 타입스크립트 기반이기 때문에 interface을 이용해 state의 타입을 정의한다. (배열 안에 객체가 있는 형태)

import { defineStore } from 'pinia'
import toDoList from '../server/api/toDoList.json'

interface ItoDo {
  id: number,
  content: string
}

export const useToDoStore = defineStore('toDo', {
  state: () => ({
    toDoList: toDoList as ItoDo[]
  }),

  actions: {}
})

4. actions 정의하기

4-1. toDoList 추가하기 (addToDo())

입력한 toDo(content)를 배열에 push한다.
이때 id는 고유한 값을 나타내기 위해 현재 시간(Date.now())으로 한다.

4-2. toDoList 삭제하기 (deleteToDo())

findIndex 메서드와 id를 이용해 삭제할 toDo의 index를 찾는다.
splice 메서드를 이용해 배열에서 해당 index의 toDo를 자른다.

4-3. toDoList 전체 삭제하기 (clearToDo())

toDoList를 빈 배열로 만든다.
전체 삭제이기 때문에 window.confirm 창을 통해 알럿 메세지를 보여준다.

...

export const useToDoStore = defineStore('toDo', {
  state: () => ({
    toDoList: toDoList as ItoDo[]
  }),

  actions: {
    addToDo(content: string) {
      this.toDoList.push({ id: Date.now(), content: content })
    },

    deleteToDo(id: number) {
      const index = this.toDoList.findIndex(list => list.id === id)

      if(index > -1) {
        this.toDoList.splice(index, 1)
      }
    },

    clearToDo() {
      if(window.confirm('리스트를 모두 삭제하시겠습니까?')) {
        this.toDoList = []
      }
    }
  }
})

5. 페이지에서 Pinia store 불러오기

pages/index.vue

toDoStore를 import 한다.
newToDo 변수를 만들고, v-model를 이용해 input에 입력한 내용이 양방향 바인딩 될 수 있게 한다.
Pinia store에 만든 actions을 클릭 이벤트로 만들어 toDo를 추가, 삭제, 전체 삭제한다. (toDo.addToDo(), toDo.deleteToDo(), toDo.clearToDo())

<script setup lang="ts">
import { useToDoStore } from '@/stores/toDoStore'

const toDo = useToDoStore()
const newToDo = ref('')

function addToDo() {
  if(newToDo.value) {
    toDo.addToDo(newToDo.value)
    newToDo.value = ''
  }
}
</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"
        @submit.prevent="addToDo()">
      <label for="toDo" class="block mb-3 text-xl font-bold">New ToDo</label>

      <div class="flex justify-between gap-5">
        <input
            v-model="newToDo"
            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 v-if="toDo.toDoList.length > 0">
      <div class="flex gap-2">
        <button>등록순</button>
        <i>|</i>
        <button>최신순</button>
      </div>

      <ul>
        <li
            v-for="(list, key) in toDo.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
              @click="toDo.deleteToDo(list.id)"
              class="px-5 py-2 bg-slate-500 rounded">
            삭제
          </button>
        </li>
      </ul>

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

toDoStore를 콘솔로 확인하면 store에 만든 state와 action 등 모든 정보를 확인할 수 있다.

[Nuxt3] #1 ToDo List 만들기 - 테일윈드 CSS로 레이아웃 만들기

JAEEE — Wed, 29 Nov 2023 17:20:44 +0900

목표

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] #1 Nuxt 3 설치 및 테일윈드 CSS 적용하기

Create an app with Nuxt 3 — Course part 1 https://www.youtube.com/watch?v=hj3NNlTqIJg&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=1 유튜브 강의를 참고하고 있습니다. Nuxt는 Vue.js를 사용하여 안전하고 성능이 뛰어난 풀 스

jae-study.tistory.com

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

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

pages/index.vue

새로운 toDo를 입력할 <form> 태그를 만들고, 입력한 toDo들이 나타날 수 있게 <ul> 태그로 목록을 만든다.
테일윈드를 사용해 CSS를 적용한다.
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>

[Nuxt3] #16 Nuxt 3 SEO (메타태그 설정하기)

JAEEE — Mon, 27 Nov 2023 11:52:32 +0900

SEO & metas with Nuxt 3 — Course part 16

https://www.youtube.com/watch?v=PpyXtoM5HWQ&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=16

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

공통 메타태그 설정하기

nuxt.config.ts

모든 페이지에서 동일한 title과 description이 적용된다.

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt course on Youtube',
      meta: [
        { name: 'description', content: 'This is a repository for a course about Nuxt 3 for youtube.' }
      ]
    }
  },
  ...
})

페이지 별 메타태그 설정하기

1. useHead()

useHead() 컴포져블을 사용하면 unhead에서 제공하는 프로그래밍 방식 및 반응형 방식으로 <head> 태그를 관리할 수 있다.

'~~' 따음표를 이용한 텍스트 또는 변수로 SEO 설정이 가능하다.

pages/index.vue

<script setup lang="ts">
const route = useRoute()

useHead({
  title: `타이틀: ${route.name}`,
  meta: [
    { name: 'description', content: 'This is an index page.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>

<template>
  <h1>인덱스 페이지</h1>
</template>

2. useSeoMeta()

useSeoMeta() 컴포져블을 사용하면 타입스크립트가 완전히 지원하는 SEO 메타 태그 객체를 정의할 수 있다.

'~~' 따음표를 이용한 텍스트 또는 변수로 SEO 설정이 가능하다.

pages/auth/index.vue

<script setup lang="ts">
const route = useRoute()

useSeoMeta({
  title: route.name,
  ogTitle: 'Login Page',
  description: 'This is a login page.',
  ogDescription: 'This is a login page.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

<template>
  <div>로그인 페이지</div>
</template>

3. <Head> 태그

Nuxt는 <Head>, <Title>, <Style>, <Meta>, <Link> 등의 태그를 제공하기 때문에 HTML 영역에 직접적으로 메타태그를 설정할 수 있다.

pages/auth/index.vue

<script setup lang="ts">
const description = ref('This is dynamic description.')
</script>

<template>
  <Head>
    <Title>Login Page</Title>
    <Meta name="description" :content="description"/>
    <Style type="text/css" children="body { background-color: gray !important; }" />
  </Head>

  <div>{{ description }}</div>
</template>

[Nuxt3] #15 Nuxt 3 useAsycnData, useLazyAsyncData (useFetch, useAsyncData, $fetch 비교)

JAEEE — Fri, 24 Nov 2023 15:40:50 +0900

useAsyncData with Nuxt 3 — Course part 15

https://www.youtube.com/watch?v=3xeAElHzMe4&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=15

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

1. useAsyncData

useAsyncData()는 비동기 로직의 resolve 동작을 반환한다.

useFetch('url')과 useAsyncData('url', () => $fetch('url')) 와 거의 동일하게 동작한다.

server/api/products.ts

async, await를 사용해 비동기 함수를 만든다.

함수가 동작하면 1초 뒤에 productCount가 1씩 증가한다.

let productCount = 0

export default async() => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(productCount++)
    }, 1000)
  })

  return { productCount }
}

pages/index.vue

useAsyncData()를 사용해 data를 가지고 온다.

클릭 이벤트를 만들어 버튼을 클릭하면 data가 새로고침 된다.

<script setup lang="ts">
const { data: productCount, pending } = await useAsyncData('count', () => $fetch('/api/products'))

const refresh = () => refreshNuxtData('count')

</script>

<template>
  <div v-if="pending">
    <p>pending</p>
    {{ productCount }}
  </div>

  <div v-else>
    <p>resolve</p>
    {{ productCount }}
  </div>

  <button @click="refresh">Refresh</button>
</template>

2. useLazyAsyncData

pages/index.vue

useLazyAsyncData()를 사용하는 것만 제외하면 나머지는 동일한 코드이다.

얼핏 보면 차이점이 없는 것처럼 보이지만, 페이지 처음 진입 시 useLazyAsyncData()를 사용하면 v-if="pending" 부분이 나타나는 것을 볼 수 있다.

pending 상태의 화면 로직을 보여주고 싶을 때 사용한다.

<script setup lang="ts">
const { data: productCount, pending } = await useLazyAsyncData('count', () => $fetch('/api/products'))

const refresh = () => refreshNuxtData('count')

</script>

<template>
  <div v-if="pending">
    <p>pending</p>
    {{ productCount }}
  </div>

  <div v-else>
    <p>resolve</p>
    {{ productCount }}
  </div>

  <button @click="refresh">Refresh</button>
</template>

$fetch

$fetch는 Nuxt3에서 제공하는 전역 메서드이고, HTTP request를 만들 수 있다.

$fetch는 서버와 클라이언트 환경에서의 중복 호출 문제가 있기 때문에 클라이언트 사이드에서만 사용해야 한다.

서버 사이트 렌더링을 위해서는 useFetch나 useAsyncData를 사용해야 한다.

useFetch() vs useAsyncData()

2가지 메서드는 동일한 기능을 하는 것처럼 보이지만, 사용법에서 몇 가지 차이가 있다.

그중 가능 큰 차이는 실행 context의 차이이다.

useAsyncData()는 page 값이 바뀌면 url의 params도 변경되지만, useFetch()는 page 값이 바뀌어도 params가 바뀌지 않는다.

확실히 이해한 부분이 아니기 때문에 실제로 사용해 보면서 공부가 더 필요하다..

참고자료

https://nuxt.com/docs/api/composables/use-fetch

https://nuxt.com/docs/api/composables/use-async-data

https://jongmin4943.tistory.com/entry/Nuxt3-fetch-useAsyncData-useFetch-%EC%9D%98-%EC%B0%A8%EC%9D%B4

[Nuxt3] #14 Nuxt 3 useFetch, useLazyFetch

JAEEE — Fri, 24 Nov 2023 14:09:19 +0900

useFetch, useLazyfetch with Nuxt 3 — Course part 14

https://www.youtube.com/watch?v=rU92oLYjTGY&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=14

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

Data Fetching

Nuxt는 서버 또는 브라우저에서 데이터를 가져와 처리하는 컴포저블을 제공한다.

useFetch()
useAsyncData
$fetch

1. useFetch()

useFetch()는 컴포넌트 설정 기능 중에서 데이터 패칭을 수행하는 가장 간단한 방법이다.

server/api/products.json

data를 json 파일로 만든다.

[
  {
    "name": "책상",
    "price": "$50.99",
    "description": "책상입니다."
  },
  {
    "name": "의자",
    "price": "$30.99",
    "description": "의자입니다."
  },
  {
    "name": "컴퓨터",
    "price": "$999.99",
    "description": "컴퓨터입니다."
  }
]

server/api/products.ts

json 파일을 import 해 return 한다.

import data from './products.json'

export default defineEventHandler((event) => {
  return {
    data
  }
})

pages/index.vue

useFetch()를 사용해 data를 가지고 온다.

<script setup lang="ts">
const { data } = await useFetch('/api/products')

console.log(data)
</script>

<template>
  {{ data }}
</template>

{ data: products } 라고 변수 이름을 설정할 수도 있다.

결과는 동일하다.

<script setup lang="ts">
const { data: products } = await useFetch('/api/products')

console.log(toRaw(products.value))
</script>

<template>
  {{ products }}
</template>

2. useLazyFetch()

useLazyFetch()는 데이터 패칭을 하기 전(EventHandler가 resolve 되기 전)의 과정을 제공한다.

server/api/products.ts

asycn()과 setTimeout()을 사용해 data를 2초 뒤에 return 한다.

import data from './products.json'

export default defineEventHandler(async()=> {
  return new Promise<any>((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, 2000)
  })
})

pages/index.vue

useLazyFetch()를 사용해 data를 가지고 온다.

이때 pending(보류: 초기 상태로 이행되기 전이나 거절되기 전의 상태)을 사용해 data를 가지고 오기 전에 화면 로직을 보여준다.

data가 화면에 보이기 전에 Loading 텍스트가 나오고, console.log도 그전에 실행되기 때문에 null 값이 찍힌다.

<script setup lang="ts">
const { data: products, pending } = await useLazyFetch('/api/products')

console.log(toRaw(products.value))
</script>

<template>
  {{ pending ? 'Loading' : products }}
</template>

nuxt.config.ts

만약 useLazyFetch()와 pending을 사용했는데도 새로고침 즉시 data가 나온다면 SSR 설정이 false인지 확인한다.

SSR은 서버에서 렌더링이 완료된 다음에 브라우저에 보여지기 때문에 useLazyFetch()가 동작하지 않는다.

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [],
  ...
  ssr: false
})

[Nuxt3] #13 Nuxt 3 렌더링 모드 (Universal Mode와 CSR/SSR/SSG, SPA/MPA)

JAEEE — Thu, 23 Nov 2023 18:11:15 +0900

Rendering modes with Nuxt 3 — Course part 13

https://www.youtube.com/watch?v=TmgIylXsLuE&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=13

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

Nuxt 모드

Nuxt 프로젝트를 설치할 때 2가지의 렌더링 모드를 선택할 수 있다.

Universal (SSR/SSG)
Single Page App

Universal 모드를 설명하기 전에 웹 페이지 렌더링 방식에 대해 설명한다.

1. Client Side Rendering (CSR, 클라이언트 사이드 렌더링)

클라이언트(브라우저)에서 웹 페이지를 렌더링 한다.

사용가가 웹 페이지를 방문하면(서버 요청을 받으면) 서버는 클라이언트에게 HTML과 JS를 보내고, 클라이언트가 그것을 렌더링 한다.

ex) React, Vue

CSR 장점

페이지 이동시 전체 HTML을 로드할 필요가 없기 때문에 SSR에 비해 속도가 빠르다.
필요한 부분만 변경되기 때문에 새로고침이 발생하지 않아 사용성이 뛰어나다.
API 호출이 필요 없기 때문에 지연 로딩 모듈이 필요하지 않다.

CSR 단점

초기 페이지 로드 시간이 SSR에 비해 느리다.
SEO(Search Engine Optimization, 검색 엔진 최적화)가 어렵다.

2. Server Side Rendering (SSR, 서버 사이드 렌더링)

서버에서 웹 페이지를 렌더링 한다.

사용자가 웹 페이지를 방문하면 서버는 리소스를 확인해 렌더링이 끝난 상태로 클라이언트에게 전송한다.

ex) Next, Nuxt

SSR 장점

초기 페이지 로드 시간이 CSR에 비해 빠르다.
SEO가 유리하다.

SSR 단점

페이지 이동시 서버에서 새로운 html을 불러와야 하기 때문에 CSR보다 속도가 느리고, 새로고침이 발생해 사용성이 떨어진다.
렌더링을 서버에서 하기 때문에 서버에 부담이 크다.

3. Static Site Generation (SSG)

클라이언트에서 필요한 페이지들을 사전에 미리 준비하고, 서버 요청을 받으면 이미 완성된 파일을 브라우저에 렌더링 한다.

SSR과 비슷하지만 서버에서 요청을 할 때 즉시 만드는지 미리 만들어 놓는지의 차이가 있다.

SSG 장점

캐싱이 가능하다.
SEO가 유리하다.

SSG 단점

모든 URL에 대해 개별 HTML 파일을 생성해야 한다. URL을 예측할 수 없다면 적용하기 어렵다.

검색 엔진 노출보다 서버의 부담이나 데이터 보호가 중요하다 -> CSR
검색 엔진이 중요하고, 업데이트가 자주 일어난다 -> SSR
검색 엔진이 중요하고, 업데이트가 거의 없다. -> SSG

만약 검색 엔진과 새로고침 없는 인터렉션이 모두 중요하다면 CSR + SST인 Universal 렌더링을 고려해야 한다.

1. Single Page Application (SPA, 단일 페이지 애플리케이션)

SPA는 말 그대로 하나의 페이지를 사용하는 애플리케이션이다.

서버에서 새로운 페이지를 요청하는 것이 아니라 하나의 페이지에서 내용만 동적으로 변경한다. (CSR 방식으로 렌더링 한다.)

SPA 장점

페이지 이동 시 변경된 부분만 갱신되기 때문에 앱과 같은 자연스러운 사용자 경험을 제공한다.
서버가 해야 하는 화면 구성을 클라이언트가 수행하기 때문에 서버 부담이 경감된다.
모듈화 또는 컴포넌트 개발이 용이해 효율성이 증가한다.
프론트앤드와 백앤드 구분이 확실하다.

SPA 단점

처음 사이트 접속 시 모든 리소스를 한 번에 받기 때문에 초기 로딩 속도가 느리다.
비즈니스 로직(화면이 변하는 모습)이 사용자에게 노출될 수 있다.
SEO가 어렵다.

2. Multiple Page Application (MPA, 다중 페이지 애플리케이션)

MPA는 말 그대로 여러 개의 싱글 페이지를 사용하는 애플리케이션이고, 전통적인 웹 방식이라고도 한다.

새로운 페이지를 요청할 때마다 서버에서 리소스가 다운되며 전체 페이지를 다시 렌더링(새로고침)해 내용을 변경한다. (SSR 방식으로 렌더링한다.)

MPA 장점

처음 사이트 접속 시 초기 로딩 속도가 빠르다.
SEO가 유리하다.

MPA 단점

페이지 이동 시 새로고침이 발생해 깜빡임이 발생한다.
서버 요청이 있을 때마다 서버에서 렌더링을 하기 때문에 서버 부담이 증가한다.

CSR과 SPA, SSR과 MAP는 개념이 비슷해서 같은 것이라고 착각할 수 있지만,
렌더링을 어떻게 하는지와 페이지를 몇 개 사용하는지의 차이이기 때문에 단어 사용에 주의해야 한다.

Universal Mode (유니버셜 모드)

Nuxt는 CSR과 SSR의 장점을 모두 합친 Universal Mode 렌더링을 선택했다.

쉽게 말해 Nuxt 페이지를 처음 접속하면 서버에서 렌더링 하고, 이후 페이지 간 이동은 클라이언트에서 렌더링 한다.

이를 위해서 Nuxt는 클라이언트 사이드 하이드레이션(Client Side Hydration)과 코드 분할(Code Splitting), 프리패칭(Prefetching)을 활용하고 있다.

클라이언트 사이드 하이드레이션

서버로부터 받은 정적 HTML을 사용자와 상호작용할 수 있는 다이나믹 DOM으로 바꾸는 방법이다.

코드 분할

코드 전체를 로드하지 않고 분할해서 필요에 맞는 번들로 나눠 가져오는 것을 의미한다.

필요한 번들만 가져오기 때문에 로딩 속도가 빠르다.

프리패칭

Nuxt는 화면에 보이는 <NuxtLink> 컴포넌트에 한해서 해당 페이지들을 렌더링 하는데 필요한 파일들을 미리 서버에 요청한다.

따라서 사용자가 클릭하기도 전에 이미 CSR에 준비가 되어있고, 사용자가 패칭을 요구하기 전에 미리 패칭 되어 있는 것을 프리패칭이라고 한다.

nuxt.config.ts

클라이언트 측 전용 렌더링을 활성화할 수 있다.

export default defineNuxtConfig({
  ssr: false
})

경로 규칙을 사용해 경로별로 다른 캐싱 규칙을 허용하고 서버가 지정된 URL의 요청을 응답하는 방법을 결정한다.

export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    '/': { prerender: true },
    
    // Product page generated on-demand, revalidates in background
    '/products/**': { swr: 3600 },
    
    // Blog post generated on-demand once until next deploy
    '/blog/**': { isr: true },
    
    // Admin dashboard renders only on client-side
    '/admin/**': { ssr: false },
    
    // Add cors headers on API routes
    '/api/**': { cors: true },
    
    // Redirects legacy urls
    '/old-page': { redirect: '/new-page' }
  }
})

참고자료

https://nuxt.com/docs/guide/concepts/rendering
https://joshua1988.github.io/vue-camp/nuxt/universal-mode.html

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/

https://velog.io/@ka0son/%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%82%BC%ED%98%95%EC%A0%9C-CSR-SSR-SSG-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

[Nuxt3] #12 Nuxt 3 Nitro 서버

JAEEE — Wed, 22 Nov 2023 15:17:51 +0900

Nitro with Nuxt 3 — Course part 12

https://www.youtube.com/watch?v=1J-ywLgs--s&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=12

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

Nitro란

Nitro는 초고속 웹 서버를 구축하기 위한 오픈 소스 타입스크립트 프레임워크이다.

Nuxt3는 Nitro를 서버 엔진으로 사용한다.

Node.js, 브라우저, service-workers 등을 위한 크로스 플랫폼 지원
즉시 사용 가능한 서버리스(serverless, 개발자가 서버를 관리할 필요 없이 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델) 지원
API 경로 지원
자동 코드 분할 및 비동기 로드
정적 + 서버리스 사이트를 위한 하이브리드 모드
핫 모듈을 다시 로드하는 개발 서버

useNitro : Nitro 인스턴스를 반환한다.
addServerHandler : 서버 핸들러를 추가한다. 서버 미들웨어나 커스텀 라우터를 생성하고 싶을 때 사용한다.
addDevServerHandler : 개발 모드에서만 사용할 서버 핸들러를 추가한다. 프로덕션 빌드에서 제외된다.
addServerPlugin : Nitro의 런타임 동작을 확장하기 위한 플러그인을 추가한다.
addPrerenderRoutes : Nitro에서 사전 렌더링할 경로를 추가한다.

https://nuxt.com/docs/api/kit/nitro

Nitro 메서드에 대한 자세한 설명은 공식 문서를 참고한다.

API 레이어

서버 API 엔드포인트와 미들웨어는 Nitro에 의해 추가된다.

핸들러는 자동으로 처리되는 JSON 응답에 대해 객체/베열을 직접 반환할 수 있다.
핸들러는 Promise를 반환할 수 있다. (res.end(), next() 지원 가능)
본문 구문 분석, 쿠키 처리, 리디렉션, 헤더 등을 위한 기능이 있다.

[Nuxt3] #11 Nuxt 3 Server (API 연결, HTTP 메서드)

JAEEE — Wed, 22 Nov 2023 14:30:42 +0900

Server with Nuxt 3 — Course part 11

https://www.youtube.com/watch?v=RQhWvHz3I5I&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=11

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

Server란

Nuxt Server 디렉토리는 데이터베이스나 다른 서버에서 데이터를 가져오고, API를 생성하고, 사이트맵이나 RSS 피드와 같은 정적 서버 측 컨텐츠를 생성하는 작업까지 모두 단일 코드베이스에서 수행할 수 있다. 또한 디렉토리 내의 파일을 자동으로 스캔하여 HMR(Hot Module Replacement) 지원으로 API 및 서버 핸들러를 등록할 수 있다.

1. /server/api

server/api/hello.ts

export default defineEventHandler((event) => {
  return {
    api: 'hello world'
  }
})

pages/index.vue

useFetch를 통해서 API를 호출할 수 있다.

<script setup lang="ts">
const { data } = await useFetch('/api/hello')
console.log(data)
</script>

<template>
  <h1>{{ data }}</h1>
</template>

2. /server/routes

server/routes/hello.ts

/api 접두사 없이 서버 경로를 추가하려면 /server/routes/ 디렉터리를 사용한다.

export default defineEventHandler(() => 'Hello World!')

3. HTTP 메서드

server/api 디렉터리의 파일에는 HTTP 메서드를 붙일 수 있다.

GET /api/users - 등록된 모든 사용자를 가져온다.
POST /api/users - 새로운 사용자를 생성한다.
PUT /api/users/{id} - 사용자의 상태를 변경한다.
DELETE /api/users/{id} - 사용자를 삭제한다.

server/api/test.get.ts

export default defineEventHandler(() => 'Test get handler')

server/api/test.post.ts

export default defineEventHandler(() => 'Test post handler')

[Nuxt3] #10 Nuxt 3 State Management (일반 변수, useState, pinia 상태 관리 비교)

JAEEE — Wed, 22 Nov 2023 10:09:52 +0900

State management with Nuxt 3 — Course part 10

https://www.youtube.com/watch?v=IkpoAKS1s-k&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=10

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

State Management란

상태 관리(State Management)에서 상태(State)란, 앱 구동에 필요한 기본 데이터 소스이다.

이 상태를 변경시킬 때 사용하는 것이 상태 관리이다.

쉽게 말해 컴포넌트 간의 데이터 전달이나 데이터 변경을 효율적으로 하는 방법이다.

1. 일반 변수

pages/index.vue

일반 변수를 선언하듯이 counter 변수를 만들면 클릭 이벤트를 만들어도 화면에는 반영되지 않는다.

콘솔창에서만 counter 변수가 증가, 감소한다.

<script setup lang="ts">
let counter = 0

function increment() {
  counter++
  console.log('증가', counter)
}

function decrease() {
  counter--
  console.log('감소', counter)
}
</script>

<template>
  <section>
    <h2>counter 변수</h2>

    <p>{{ counter }}</p>

    <button @click="increment">+</button>
    <button @click="decrease">-</button>
  </section>
</template>

2. useState 변수

composables/state.ts

useState에 counter 변수를 만든다.

export const useCounter = () => useState<number>('counter', () => 0)

pages/index.vue

useState를 통해 변수를 만들면 데이터가 변하는 즉시, 화면에서도 변경된다.

<script setup lang="ts">
import { useCounter } from '@/composables/state';

const stateCounter = useCounter()
</script>

<template>
  <section>
    <h2>useState 변수</h2>

    <p>{{ stateCounter }}</p>

    <button @click="stateCounter++">+</button>
    <button @click="stateCounter--">-</button>
  </section>
</template>

3. Pinia store 라이브러리

https://pinia.vuejs.org/

Pinia store에 대한 자세한 설명은 위의 링크를 참고한다.

stores/counter.ts

터미널에서 yarn add pinia 또는 npm install pinia 명령어를 입력해 pinia 패키기를 설치한다.
pinia를 import 한다.
useCounterStore를 만들고, state에 초기값을 선언한다.
actions에 이벤트를 만든다.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },

  actions: {
    increment() {
      this.count++
    },

    decrement() {
      this.count--
    }
  }
})

pages/index.vue

pinia를 통해 변수를 만들면 데이터가 변하는 즉시, 화면에서도 변경된다.

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';

const piniaCounter = useCounterStore()
</script>

<template>
  <section>
    <h2>Pinia 변수</h2>

    <p>{{ piniaCounter.counter }}</p>

    <button @click="piniaCounter.increment">+</button>
    <button @click="piniaCounter.decrement">-</button>
  </section>
</template>

useState vs Pinia

Nuxt을 사용해 개발을 하기 위해서는 상태 관리를 어떻게 할지 정해야 한다.

간단한 앱에서는 useState를 사용하고, 복잡한 앱에서는 Pinia를 사용한다는 의견이 많다.

Pinia는 Vue.js용 스토어 라이브러리 및 상태 관리 프레임워크이다.

Pinia에서 제공하는 많은 기능들이 있고, 개발자는 그 기능들을 직접 만들 필요가 없다.

DevTools를 통합할 수 있고, getter와 actions 기능을 통해 상태를 변경할 수 있는 구체적인 방법을 정의할 수 있다.

따라서 앱의 얼마나 복잡한지 파악한 다음에 어떤 수준의 도구를 선택할지 결정하면 된다.

[Nuxt3] #9 Nuxt 3 Modules (모듈 리스트, Nuxt Content, Auto Animate)

JAEEE — Wed, 15 Nov 2023 14:04:06 +0900

Modules with Nuxt 3 — Course part 9

https://www.youtube.com/watch?v=JQLH9MDtRQk&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=9

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

Modules이란

Nuxt를 사용하여 프로덕션급 애플리케이션을 개발할 때 프레임워크의 핵심 기능이 충분하지 않다는 것을 알 수 있다.

이때 Nuxt 모듈을 이용해서 프레임워크 코어를 확장하고 통합을 단순화할 수 있다.

Nuxt 모듈 공식문서에서 다양한 모듈 리스트들을 확인할 수 있다.

https://nuxt.com/modules

Nuxt Content

Nuxt Content는 프로젝트의 content 디렉터리를 읽고 .md, .yml, .csv 또는 .json 파일을 구문 분석하고 애플리케이션을 위한 강력한 데이터 계층을 생성한다.

Nuxt Content에 자세한 설명은 아래 공식 문서를 참고한다.

https://content.nuxt.com/

1. Nuxt Content 설치하기

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

package.json 파일에서 설치된 버전을 확인할 수 있다.

yarn add @nuxt/content

또는

npm install @nuxt/content

2. nuxt.config.ts에 모듈 추가하기

modules 배열 부분에 사용할 모듈 리스트들을 추가한다.

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@vueuse/nuxt',
    '@nuxt/content'
  ],
  css: ['@/assets/scss/main.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }
})

3. content 폴더 만들기

content/index.md

# content에서 작성한 hello world

4. ContentDoc 컴포넌트 사용하기

pages/index.vue

<template>
  <ContentDoc/>
</template>

결과 화면

Auto Animate

Auto Animate는 웹 앱에 부드러운 전환을 추가하는 드롭인 애니메이션 유틸리티이다.

Vue, Nuxt 뿐만 아니라 React, Solid, Svelte 또는 자바스크립트 애플리케이션에서도 사용 가능하다.

Auto Animate에 자세한 설명은 아래 공식 문서를 참고한다.

https://auto-animate.formkit.com/

1. auto-animate 설치하기

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

package.json 파일에서 설치된 버전을 확인할 수 있다.

yarn add @formkit/auto-animate

또는

npm install @formkit/auto-animate

2. 정렬 애니메이션 만들기

pages/index.vue

auto-aminate를 import 한다.
[sortList] 변수를 만든다.
<ul> 태그에 ref를 이용해 [sortList] 변수를 참조한다.
정렬 버튼을 누를 때 마다 <li> 태그들이 animation이 추가되어 움직이는 것을 확인할 수 있다.

<script setup>
import { ref } from 'vue'
import { useAutoAnimate } from '@formkit/auto-animate/vue'

const [sortList] = useAutoAnimate()
const items = ref(["React", "Vue", "Svelte", "Angular"])

function sortAsc() {
  items.value.sort()
}
function sortDesc() {
  items.value.sort().reverse()
}
</script>

<template>
  <div class="mb-5">
    <button
        class="me-5 px-4 py-2 bg-slate-500 rounded"
        @click="sortAsc">
      Sort A-Z ↑
    </button>
    <button
        class="px-4 py-2 bg-slate-500 rounded"
        @click="sortDesc">
      Sort Z-A ↓
    </button>
  </div>

  <ul ref="sortList">
    <li
        v-for="item in items"
        :key="item">
      {{ item }}
    </li>
  </ul>
</template>

결과 화면

[Nuxt3] #8 Nuxt 3 Middleware (전역 미들웨어 만들기)

JAEEE — Wed, 15 Nov 2023 10:48:11 +0900

Middlewares with Nuxt 3 — Course part 8

https://www.youtube.com/watch?v=PhuJE0ayD6A&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=8

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

Middleware란

Nuxt에서 미들웨어(Middleware)는 페이지나 레이아웃이 렌더링 되기 전에 호출되는 커스텀 훅(Hook)이다.

store, route, params, query, redirect 등에 접근할 수 있기 때문에 내비게이션 가드 형태로 미들웨어 제작이 가능하다.

쉽게 말해 특정 경로로 이동하기 전에 실행하려는 코드를 만들 때 이상적이다.

1. middleware 폴더 만들기

middleware/auth.global.ts

middleware 폴더 안에 파일을 만들 때 파일명 뒤에 .global을 붙이면 별도의 import 없이 전역에서 사용할 수 있는 미들웨어가 된다.

export default defineNuxtRouteMiddleware((to, from) => {
  console.log(to)
  console.log(from)
})

2. auth.global.ts (글로벌 미들웨어)

middleware/auth.global.ts

글로벌로 만든 미들웨어에서 navigateTo를 이용해 리다이렉트를 할 경우, isLoggedIn이 계속 false이기 때문에 무한 리다이렉트에 빠져 주의해야 한다.

export default defineNuxtRouteMiddleware((to, from) => {
  let isLoggedIn = false

  if(isLoggedIn) {
    return navigateTo(to.fullPath)
  } else {
    return navigateTo('/auth')
  }
})

3. auth.ts (페이지 정의 미들웨어)

pages/index.vue

auth.global.ts 미들웨어에서 .global을 지운다.
auth.ts 미들웨어를 사용할 페이지에 import 한다.
/ 루트 페이지에 접속하면 바로 /auth 페이지로 이동됨을 볼 수 있다.

<template>
  <h1>Main page</h1>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>

[Nuxt3] #7 Nuxt 3 Plugins (커스텀 플러그인 만들기)

JAEEE — Mon, 13 Nov 2023 16:57:23 +0900

Plugins with Nuxt 3 — Course part 7

https://www.youtube.com/watch?v=9MCVjsq35I8&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=7

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

Plugins이란

Nuxt에는 Vue 애플리케이션 생성 시 Vue 플러그인을 사용할 수 있는 플러그인 시스템이 있다.

Nuxt는 자동으로 plugins 디렉터리 파일을 읽고, Vue 애플리케이션 생성 시 이를 로드한다.

1. plugins 폴더 만들기

plugins/myPlugins.ts

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      hello: (msg: string) => console.log(`Hello ${msg}`)
    }
  }
})

2. 플러그인 import 하기

plugins 디렉터리 최상위에 있는 파일(또는 하위 디렉터리 내의 index 파일)은 별로의 import 없이 자동으로 플러그인으로 등록된다.

pages/index.vue

<script setup lang="ts">
console.log(useNuxtApp())
</script>

3. 플러그인 사용하기

pages/index.vue

<script setup lang="ts">
const { $hello } = useNuxtApp()

$hello('world')
</script>

[Nuxt3] #6 Nuxt 3 Composables (VueUse 설치 및 예제)

JAEEE — Mon, 13 Nov 2023 16:16:41 +0900

Composables with Nuxt 3 — Course part 6

https://www.youtube.com/watch?v=cWX4b2qD6sg&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=6

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

Composables이란

Vue 애플리케이션에서 composable(컴포저블)이란, Vue의 Composition API를 활용하여 상태 저장 논리를 캡슐화하고 재사용하는 함수를 의미한다.

함수의 이름은 'use'로 시작하고, 카멜 케이스 형식으로 지정한다.

1. composables 폴더 만들기

composables/useUtils.ts

export const useUtils = () => {
  const sayHello = () => console.log('Hello from useHello')

  return {
    sayHello
  }
}

2. useUtils 함수 불러오기

pages/index.vue

<script setup lang="ts">
import { useUtils } from "~/composables/ussUtils";

const { sayHello } = useUtils()

sayHello()
</script>

결과 화면

VueUse란

VueUse 모듈은 Vue Composition(컴포지션, import 한 함수를 사용해서 Vue 컴포넌트를 작성할 수 있는 API) 유틸리티 모음이다.

VueUse에 대한 자세한 설명을 아래 공식 문서를 참고한다.

https://vueuse.org/

https://nuxt.com/modules/vueuse

VueUse 설치하기

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

설치된 버전은 package.json 파일에서 확인할 수 있다.

npm i -D @vueuse/nuxt @vueuse/core

nuxt.config.ts

모듈 부분에 @vueuse/nuxt를 import 한다.

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@vueuse/nuxt'
  ],
  css: ['@/assets/scss/main.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }
})

1. useMouse

pages/index.vue

<template>
  <div>Mouse position: {{ x }}, {{ y }}</div>
</template>

<script setup lang="ts">
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()
</script>

2. useLocalStorage

pages/index.vue

<script setup lang="ts">
import { useLocalStorage } from '@vueuse/core'

const store = useLocalStorage(
    'my-storage',
    {
      name: 'Apple',
      color: 'red'
    }
)
</script>

3. usePreferredDark

pages/index.vue

<script setup lang="ts">
import { usePreferredDark } from '@vueuse/core'

const isDark = usePreferredDark()

console.log(isDark)

if(isDark.value) {
  console.log('다크모드 true')
} else {
  console.log('다크모드 false')
}
</script>

4. useTitle

pages/index.vue

<template>
  <h1>{{ themeTitle }}</h1>
</template>

<script setup lang="ts">
import { usePreferredDark, useTitle } from '@vueuse/core'

const isDark = usePreferredDark()

const themeTitle = useTitle(() => isDark.value ? '다크모드 true' : '다크모드 false')
</script>

5. onClickOutside

pages/index.vue

<template>
  <div ref="el">
    Click Outside of Me
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const el = ref()

function close () {
  alert('영역의 바깥을 클릭했습니다.')
}

onClickOutside(el, close)
</script>

[Nuxt3] #5 Nuxt 3 이미지 업로드하기 (assets, public)

JAEEE — Thu, 9 Nov 2023 16:56:28 +0900

Images, assets & public folder with Nuxt 3 — Course part 5

https://www.youtube.com/watch?v=tWQ2LWplmDc&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=5

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

1. assets 폴더에 이미지 올리기

assets 폴더에 images 폴더를 만들고 이미지를 올린다.

pages/index.vue

~ 또는 @를 이용해서 루트 경로를 설정하면 된다.

<template>
  <img src="~/assets/images/1.jpg" alt="이미지1">
  <img src="@/assets/images/2.jpg" alt="이미지2">
</template>

assets 폴더에 넣은 이미지는 빌드돼서 이미지가 업로드되기 때문에 직접적인 접근이 불가능하다.

2. public 폴더에 이미지 올리기

public 폴더에 images 폴더를 만들고 이미지를 올린다.

public 폴더에 넣은 이미지는 서버 루트에서 그대로 제공되기 때문에 직접적인 접근이 가능하다.

단, public 폴더는 모두가 접근할 수 있기 때문에 안전 이슈가 발생할 수 있어 주의해서 사용해야 한다.

[Nuxt3] #4 Nuxt 3 레이아웃 만들기 (페이지별 레이아웃 다르게 하기, slot)

JAEEE — Thu, 9 Nov 2023 15:20:20 +0900

Layouts with Nuxt 3 — Course part 4

https://www.youtube.com/watch?v=GQjU4FfM3II&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=4

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

1. DefaultLayout 만들기

layouts 폴더를 만들고, 그 안에 default.vue 파일을 만든다.
<slot>을 사용해 pages/~.vue 파일의 내용을 <slot> 부분으로 대체한다.

layouts/default.vue

layouts 폴더 안에 defalut.vue 파일을 만들면 별도의 import 없이 자동으로 DefalutLayout이 된다.

<template>
  <div class="h-screen p-5 bg-slate-700 text-base text-white">
    <Header/>

    <slot/>
  </div>
</template>

pages/index.vue

<template>
  <h1>index page</h1>
</template>

app.vue

<template>
  <NuxtLayout>
    <NuxtPage/>
  </NuxtLayout>
</template>

2. CustomLayout 만들기

DefaultLayout 말고, 다른 레이아웃을 만들고 싶을 때 layout 폴더 안에 custom.vue 파일을 만든다.
CustomLayout은 기본 레이아웃이 아니기 때문에 <script> 태그 안에 정의를 해야 한다.

layouts/custom.vue

<template>
  <div class="h-screen p-5 bg-slate-500 text-base text-white">
    <h1 class="text-lg font-bold">Custom layout</h1>

    <slot/>
  </div>
</template>

pages/custom.vue

<template>
  <h1>Custom page</h1>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "custom"
})
</script>

결과 화면

[Nuxt3] #3 Nuxt 3 컴포넌트 만들기 (auto-imports)

JAEEE — Thu, 9 Nov 2023 14:17:07 +0900

Components with Nuxt 3 — Course part 3

https://www.youtube.com/watch?v=o4SkcTupZBo&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=3

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

1. components 폴더 만들기

components 폴더를 만들고, 그 안에 vue 파일을 만든다.

컴포넌트로 사용할 vue 파일의 첫 글자 이름은 반드시 대문자로 한다.

components/Alert.vue

<template>
  <div class="p-2 bg-slate-500 rounded text-white text-lg font-bold">
    This is an alert component.
  </div>
</template>

components/Profile/Header/Avatar.vue

<template>
  <div class="p-2 bg-slate-700 rounded text-white text-lg font-bold">
    This is a Profile/Header/Avatar component.
  </div>
</template>

2. 컴포넌트 import 하기

nuxt3에는 auto-importing 기능이 있어 별도의 import문 없이 바로 컴포넌트를 사용할 수 있다.

파일명이 컴포넌트의 이름이 되고, 뎁스 안에 있는 컴포넌트는 '폴더명 폴더명 ... 파일명' 으로 이름을 지으면 된다.

'components/Profile/Header/Avatar.vue' 의 경우 <ProfileHeaderAvatar>가 컴포넌트의 이름이 된다.

pages/index.vue

<template>
  <Alert/>

  <ProfileHeaderAvatar/>
</template>

결과 화면

[Nuxt3] #2 Nuxt 3 페이지 만들기 및 페이지 이동 (라우팅)

JAEEE — Thu, 9 Nov 2023 11:14:35 +0900

Pages & Routing with Nuxt 3 — Course part 2

https://www.youtube.com/watch?v=tdgUDuD3fS4&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=2

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

1. pages 폴더 만들기

pages 폴더를 만들고, 그 안에 ~.vue 파일을 만들면 http://localhost:3000/ 주소에서 500 에러가 발생한다.

pages 폴더가 만들어지면 app.vue 파일에서 pages/~.vue 파일과 경로를 매칭하지 못하기 때문이다.

2. app.vue 파일 수정하기

app.vue

<NuxtLayout>, <NuxtPage> 컴포넌트를 이용해 pages/~.vue 파일들이 <NuxtPage> 태그 대신에 보이도록 한다.
<header> 태그를 추가해서 모든 pages/~.vue 파일에서 <header> 태그가 import 되게 만든다.
<style> 태그를 추가해서 css를 적용한다.

<template>
  <NuxtLayout>
    <div class="wrap">
      <header>
        <ul>
          <li>
            <NuxtLink to="/">Home</NuxtLink>
            <NuxtLink to="/events">Events</NuxtLink>
          </li>
        </ul>
      </header>

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

<style lang="scss" scoped>
header {
  ul {
    height: 50px;

    li {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 20px;

      a {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
}
</style>

3. vue 파일 만들기

pages/index.vue

<template>
  <div>index page</div>
</template>

pages/event/index.vue

<template>
  <div>events page</div>
</template>

결과 화면

[Nuxt3] #1 Nuxt 3 설치 및 테일윈드 CSS 적용하기

JAEEE — Thu, 9 Nov 2023 10:55:35 +0900

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>

결과 화면

[Vue/Nuxt] 뷰 vue-awesome-swiper 이용해서 autoplay, progress bar 만들기

JAEEE — Wed, 8 Nov 2023 11:34:51 +0900

결과 화면

버전

nuxt: 2.15.8

vue, nuxt 버전 2.x.x 기준으로 작성한 글이기 때문에 버전 3.x.x에서는 동작하지 않을 수 있다.

2023.11 기준 스와이퍼 버전 11까지 나왔다.

최신 버전의 뷰 스와이퍼에 대한 자세한 설명은 공식 문서를 참고한다.

https://swiperjs.com/vue

1. swiper, vue-awesome-swiper 패키기 설치하기

swiper와 vue-awesome-swiper 패키지를 설치한다.

반드시 해당 버전으로 설치한다.

yarn add swiper@5.4.5
yarn add vue-awesome-swiper@4.1.1

또는

npm install swiper@5.4.5
npm install vue-awesome-swiper@4.1.1

2. 마크업 하기

pages/swiper.vue

컴포넌트가 아닌 HTML로 마크업 한다. 이때 class명은 swiper 패키지에서 제공하는 것으로 사용한다.
(swiper-container, swiper-wrapper, swiper-slide)
커스텀으로 autoplay, progress를 만들 것이기 때문에 마찬가지로 HTML로 마크업 한다.
autoplay 속성의 true/false에 따라서 css가 바뀌어야 하기 때문에 클릭 이벤트와 :class 속성을 추가한다.

<template>
  <section class="kv-swiper">
    <div
      v-once
      v-swiper:swiper="kvSwiperOption"
      class="swiper-container">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
      </ul>
    </div>

    <div class="swiper-function">
      <div
        class="swiper-autoplay"
        :class="{ stop: kvAutoplay }"
        @click="kvSwiperAutoplay">
        <span/>
      </div>

      <div
        class="swiper-progress"
        :class="{ start: kvProgress }">
        <span class="bar"/>
      </div>

      <div class="swiper-pagination"/>
    </div>
  </section>
</template>

3. script 작성하기

v-once, v-swiper 디렉티브를 사용하기 위해서 vue 컴포넌트를 import 한다.
vue-awesome-swiper와 swiper.css를 import 한다.
kvAutoplay, kvProgress를 false로 설정한다. (페이지가 로딩되기 전에 동작되면 안 되기 때문에)
kvSwiperOption을 작성한다. kvSwiperOption의 on 부분에 autoplay에 관한 메서드를 작성한다.
(다음 슬라이드로 넘길 때 autoplay와 progress를 초기화하기 위해서)
스와이퍼의 다양한 속성들을 사용하고 싶으면 공식 문서를 참고한다. (https://swiperjs.com/demos)
autoplay와 progress 동작에 필요한 메서드를 작성한다. 이때 try/catch 구조로 작성해야 한다.

<script>
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

export default {
  name: 'SwiperPage',

  data() {
    return {
      // Kv autoplay, progress
      kvAutoplay: false,
      kvProgress: false,

      // Kv swiper option
      kvSwiperOption: {
        effect: 'fade',
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        autoplay: {
          delay: 5000
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        },
        on: {
          init: this.init,
          sliderMove: this.stopAutoplay,
          slideChangeTransitionStart: this.stopAutoplay,
          transitionEnd: this.startAutoplay
        }
      }
    }
  },

  methods: {
    init() {
      this.kvProgress = true
    },

    kvSwiperAutoplay() {
      this.kvAutoplay = !this.kvAutoplay

      if (this.kvProgress) {
        this.stopAutoplay()
      } else {
        this.startAutoplay()
      }
    },

    stopAutoplay() {
      try {
        this.swiper.autoplay.stop()
        this.kvProgress = false
      } catch (err) {
        console.error(err)
      }
    },

    startAutoplay() {
      try {
        this.swiper.autoplay.start()
        this.kvProgress = true
        this.kvAutoplay = false
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

4. css/scss 작성하기

progress는 script의 autoplay 속도와 css의 keyframes과 animation 속도에 맞춰 움직일 수 있도록 css를 작성한다. (animation: kvProgress 5s linear infinite;)
스와이퍼에 필요한 css를 작성한다.

<style lang="scss" scoped>
@keyframes kvProgress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.kv-swiper {
  position: relative;
  height: 300px;
  padding: 20px;

  .swiper-container {
    height: 100%;

    .swiper-slide {
      ...
    }
  }

  .swiper-function {
    ...

    .swiper-autoplay {
      position: relative;
      cursor: pointer;

      span {
        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 4px;
          height: 12px;
          border-left: 2px solid #fff;
          border-right: 2px solid #fff;
          content: '';
        }
      }

      &.stop {
        span {
          &::after {
            width: 0;
            height: 0;
            border-right: 0;
            border-left: 10px solid #fff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
          }
        }
      }
    }

    .swiper-progress {
      overflow: hidden;
      width: 300px;
      height: 4px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 4px;

      &.start {
        .bar {
          animation: kvProgress 5s linear infinite;
        }
      }

      .bar {
        display: block;
        width: 100%;
        height: 4px;
        transform: translateX(-100%);
        background-color: #fff;
      }
    }

    .swiper-pagination {
      ...
    }
  }
}
</style>

[Vue/Nuxt] 뷰 swiper와 svg를 이용해서 autoplay, progress 페이지네이션 만들기 (vue swiper custom pagination)

JAEEE — Tue, 7 Nov 2023 17:51:24 +0900

결과 화면

버전

nuxt: 2.15.8

vue, nuxt 버전 2.x.x 기준으로 작성한 글이기 때문에 버전 3.x.x에서는 동작하지 않을 수 있다.

2023.11 기준 스와이퍼 버전 11까지 나왔다.

최신 버전의 뷰 스와이퍼에 대한 자세한 설명은 공식 문서를 참고한다.

https://swiperjs.com/vue

1. swiper, vue-awesome-swiper 패키기 설치하기

swiper와 vue-awesome-swiper 패키지를 설치한다.

반드시 해당 버전으로 설치한다.

yarn add swiper@5.4.5
yarn add vue-awesome-swiper@4.1.1

또는

npm install swiper@5.4.5
npm install vue-awesome-swiper@4.1.1

2. Swiper, SwiperSlide 컴포넌트 사용해서 마크업 하기

pages/swiper.vue

슬라이드 부분은 <Swiper>와 <SwiperSlide> 컴포넌트를 사용해서 마크업 한다.
autoplay 버튼과 pagination 부분은 HTML로 마크업 한다.
autoplay의 true/false에 따라 css가 달라져야 하기 때문에 :class 속성을 추가한다.

<template>
  <section class="kv-swiper">
    <Swiper
      :options="kvSwiperOptions"
      ref="kvSwiper">
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>

    <div class="kv-function">
      <div
        class="swiper-autoplay"
        :class="{ stop: kvAutoplay }"
        @click="kvSwiperAutoplay">
        <span/>
      </div>
      <div
        class="swiper-pagination"
        :class="{ stop: kvPagination }"
        slot="pagination"/>
    </div>
  </section>
</template>

3. script 작성하기

Swiper, SwiperSlide 컴포넌트와 swiper.css 파일을 import 한다.
커스텀 페이지네이션을 만들기 위해서 kvSwiperOptions의 pagination 부분에 renderBullet 속성을 추가한다.
renderBullet 부분에 <svg> 태그를 사용해서 기존 페이지네이션 태그 대신에 <svg> 태그가 대신 렌더링 되게 한다.
autoplay와 pagination 동작에 필요한 메서드를 작성한다.

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'SwiperPage',

  components: {
    Swiper,
    SwiperSlide
  },

  data() {
    return {
      // kv autoplay, pagination
      kvAutoplay: false,
      kvPagination: false,

      // kv swiper options
      kvSwiperOptions: {
        effect: 'fade',
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        autoplay: {
            delay: 3800,
            disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          paginationType: 'custom',
          renderBullet: function () {
            return `<div class="swiper-pagination-bullet">
              <svg viewBox="0 0 48 48" width="24" height="24" xml:space="preserve" id="svg">
                <circle class="pagination-loader" cx="24" cy="24" r="23" stroke="#da291c" fill="none" stroke-width="4" stroke-linecap="round"></circle>
                <circle class="pagination-circle" cx="24" cy="24" r="23" stroke="#fff" fill="none" stroke-width="4" stroke-linecap="round"></circle>
              </svg>
            </div>`
          }
        }
      }
    }
  },

  computed: {
    kvSwiper() {
      return this.$refs.kvSwiper.$swiper
    }
  },

  methods: {
    kvSwiperAutoplay() {
      this.kvAutoplay = !this.kvAutoplay
      this.kvPagination = !this.kvPagination

      if (this.kvAutoplay) {
        this.kvSwiper.autoplay.stop()
      } else {
        this.kvSwiper.autoplay.start()
      }
    }
  }
}
</script>

4. css/scss 작성하기

움직이는 svg 이미지를 만들기 위해서는 css가 매우 중요하다.

stroke-dasharray 속성은 선을 dash(점선) 형태로 만든다.

dasharray 값은 점선을 만드는 간격을 의미하고, 숫자가 작아질수록 점선이 촘촘하다.

stroke-dashoffset 속성은 svg 이미지가 어떤 지점부터 시작할지 정해준다.

시작점은 시계방향의 90도이다.

또한 dash 값들은 svg 태그의 path 값과 관련이 있어 글로 된 설명보다는 직접 숫자를 수정해 가며 결과로 확인하는 것이 낫다.

@keyframe, animation을 사용해서 svg 이미지가 움직일 수 있도록 css를 작성한다.

<style lang="scss" scoped>
@keyframes loading {
  0% {
    stroke-dashoffset: 192;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.kv-swiper {
  position: relative;
  height: 300px;

  .swiper-container {
    height: 100%;

    .swiper-slide {
      ...
    }
  }

  .kv-function {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 1;
    transform: translateX(-50%);

    .swiper-autoplay {
      ...
    }

    .swiper-pagination::v-deep {
      position: relative;

      .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background-color: #fff;
        opacity: 1;
        cursor: pointer;

        svg {
          display: none;
          transform: rotate(-90deg);

          .pagination-loader {
            stroke-dasharray: 192;
            stroke-dashoffset: 192;
            animation: loading 5s linear infinite;
          }

          .pagination-circle {
            stroke-opacity: 0.2;
          }
        }
      }

      .swiper-pagination-bullet-active {
        width: 24px;
        height: 15px;
        background-color: transparent;

        svg {
          display: block;
        }
      }

      &.stop {
        .swiper-pagination-bullet {
          svg {
            .pagination-loader {
              stroke: none;
              animation-play-state: paused;
            }
          }
        }
      }
    }
  }
}
</style>

[Vue/Nuxt] 뷰 swiper 이용해서 슬라이드 만들기 (vue swiper 사용법)

JAEEE — Tue, 7 Nov 2023 14:40:28 +0900

결과 화면

버전

nuxt: 2.15.8

vue, nuxt 버전 2.x.x 기준으로 작성한 글이기 때문에 버전 3.x.x에서는 동작하지 않을 수 있다.

2023.11 기준 스와이퍼 버전 11까지 나왔다.

최신 버전의 뷰 스와이퍼에 대한 자세한 설명은 공식 문서를 참고한다.

https://swiperjs.com/vue

1. swiper, vue-awesome-swiper 패키기 설치하기

swiper와 vue-awesome-swiper 패키지를 설치한다.

반드시 해당 버전으로 설치한다.

yarn add swiper@5.4.5
yarn add vue-awesome-swiper@4.1.1

또는

npm install swiper@5.4.5
npm install vue-awesome-swiper@4.1.1

2. Swiper, SwiperSlide 컴포넌트 사용하기

pages/swiper.vue

Swiper, SwiperSlide 컴포넌트를 import 한다.
swiper.css를 import 한다.
<Swiper>와 <SwiperSlier> 컴포넌트를 사용해 마크업을 한다.
이때 prev, next 버튼과 페이지네이션은 <Swiper> 컴포넌트 밖에 작성한다. (안에 있으면 SwiperSlide와 같이 움직이기 때문에 밖으로 뺀다.)
kvSwiperOptions을 작성한다.
가장 많이 사용하는 속성은 slidesPerView(슬라이드가 몇 개씩 노출되는지), spaceBetween(슬라이드 간의 간격)이고, 이외의 다양한 속성들은 공식 문서를 참고한다. (https://swiperjs.com/demos)
swiper.css는 기본적인 스타일만 제공하기 때문에 크기, 배경, 글자, 위치 등은 css를 추가로 작성한다.

<template>
  <section class="kv-swiper">
    <Swiper :options="kvSwiperOptions">
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
    </Swiper>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-pagination"></div>
  </section>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'SwiperPage',

  components: {
    Swiper,
    SwiperSlide
  },

  data() {
    return {
      kvSwiperOptions: {
        slidesPerView: 2,
        spaceBetween: 20,
        loop: true,
        navigation: {
          prevEl: '.swiper-button-prev',
          nextEl: '.swiper-button-next'
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.kv-swiper {
  position: relative;
  height: 300px;

  .swiper-container {
    height: 100%;

    .swiper-slide {
      ...
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    &::after {
      color: #333;
    }
  }

  .swiper-pagination::v-deep {
    bottom: -30px;
    width: 100%;

    .swiper-pagination-bullet {
      margin: 0 5px;
      cursor: pointer;
    }

    .swiper-pagination-bullet-active {
      background-color: #333;
    }
  }
}
</style>

[Vue/Nuxt] 뷰 mounted() 이용해서 이미지에 효과 넣기

JAEEE — Thu, 2 Nov 2023 14:52:16 +0900

결과 화면

생명 주기 훅

mounted()는 뷰의 생명 주기 훅 중에 하나이다.

DOM에 노드 생성 및 삽입(초기 렌더링)이 된 직후이다.

1. BaseKeyVisual 컴포넌트 만들기

components/base/BaseKeyVisual.vue

<picture> HTML 태그를 사용해 뷰포트에 따라 다른 이미지를 적용할 수 있게 만든다. (피씨 이미지, 모바일 이미지)
kvActive 속성을 false로 설정해 이미지가 화면에 보이지 않게 만든다. css도 opacity: 0; 으로 한다.
mounted()에 setTimeout을 사용해 kvActive 속성을 true로 바꿔 렌더링이 된 직후 'active' 클래스가 붙도록 만든다.
'active' 클래스가 붙으면 opacity: 1; 이 되고, transform 등 다른 효과를 추가해도 된다.

<template>
  <div
    class="base-key-visual"
    :class="{ 'active': kvActive }">
    <picture>
      <source :srcset="kvMoImgSrc" media="(max-width: 720px)">
      <img :src="kvImgSrc" alt="Key visual">
    </picture>
  </div>
</template>

<script>
export default {
  name: 'BaseKeyVisual',

  props: {
    kvImgSrc: {
      type: String
    },
    kvMoImgSrc: {
      type: String
    }
  },

  data() {
    return {
      kvActive: false
    }
  },

  mounted() {
    setTimeout(() => {
      this.kvActive = true
    }, 0)
  }
}
</script>

<style lang="scss">
.base-key-visual {
  overflow: hidden;
  width: 100%;
  background-color: #111;
  border-radius: 16px;

  img {
    width: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: all 2s;
  }

  &.active {
    img {
      opacity: 1;
      transform: scale(1);
    }
  }
}
</style>

2. 페이지에 BaseKeyVisual 컴포넌트 import 하기

pages/index.vue

만든 <BaseKeyVisual> 컴포넌트를 import 한다.
kvImgSrc, kvMoImgSrc 속성을 작성한다. 이미지 경로를 작성할 때에는 required('~~')를 사용한다.

<template>
  <TheLayout>
    <BaseKeyVisual
      :kvImgSrc="kvImgSrc"
      :kvMoImgSrc="kvMoImgSrc"/>
  </TheLayout>
</template>

<script>
import TheLayout from '@/components/layout/TheLayout'
import BaseKeyVisual from '@/components/base/BaseKeyVisual'

export default {
  name: 'Main',

  components: {
    TheLayout,
    BaseKeyVisual
  },

  data() {
    return {
      kvImgSrc: require('@/static/image/kv.jpg'),
      kvMoImgSrc: require('@/static/image/kv.jpg')
    }
  }
}
</script>

[Vue/Nuxt] 뷰 셀렉트 박스 만들기 (셀렉트 박스 커스텀하기, custom select box)

JAEEE — Thu, 2 Nov 2023 11:13:48 +0900

결과 화면

1. BaseSelect 컴포넌트 만들기

components/base/BaseSelect.vue

form-select와 form-select-list로 나누어 html을 작성한다. 이때 form-select-list 부분은 리스트의 길이가 3개가 넘어갈 경우, 스크롤이 나타날 수 있게끔 class 속성을 추가한다.
isOpen Boolean 속성을 이용해 form-select 영역을 클릭했을 때 form-select-list가 나타날 수 있도록 v-if와 @click 이벤트를 추가한다.
props로 전달받을 데이터의 타입을 정의한다.
computed와 methods를 이용해 form-select-list를 클릭했을 때 그 값이 form-select에 노출될 수 있도록 만든다.
공통으로 적용할 css/scss를 작성한다.

<template>
  <div
    class="base-select"
    :class="[
      shape,
      { 'open': isOpen }
    ]">

    <div
      class="form-select"
      @click="isOpen = !isOpen">
      <p :class="[{ 'selected': isSelect }]">{{ selected }}</p>
      <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11 1.17C10.8126 0.983753 10.5592 0.879211 10.295 0.879211C10.0308 0.879211 9.77737 0.983753 9.59001 1.17L6.00001 4.71L2.46001 1.17C2.27265 0.983753 2.0192 0.879211 1.75501 0.879211C1.49082 0.879211 1.23737 0.983753 1.05001 1.17C0.956281 1.26297 0.881887 1.37357 0.831118 1.49543C0.780349 1.61729 0.754211 1.74799 0.754211 1.88C0.754211 2.01202 0.780349 2.14272 0.831118 2.26458C0.881887 2.38644 0.956281 2.49704 1.05001 2.59L5.29001 6.83C5.38297 6.92373 5.49357 6.99813 5.61543 7.04889C5.73729 7.09966 5.868 7.1258 6.00001 7.1258C6.13202 7.1258 6.26273 7.09966 6.38459 7.04889C6.50645 6.99813 6.61705 6.92373 6.71001 6.83L11 2.59C11.0937 2.49704 11.1681 2.38644 11.2189 2.26458C11.2697 2.14272 11.2958 2.01202 11.2958 1.88C11.2958 1.74799 11.2697 1.61729 11.2189 1.49543C11.1681 1.37357 11.0937 1.26297 11 1.17Z" fill="#111111"/>
      </svg>
    </div>

    <div
      v-if="isOpen"
      class="form-select-list">
      <div :class="{ 'scroll': options.length > 3 }">
        <ul>
          <li
            v-for="(option, key) in options"
            :key="`option-${key}`"
            @click="selectOption(option)">
            {{ option.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseSelect',

  props: {
    shape: {
      type: String
    },
    isSelect: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array
    },
    defaultValue: {
      type: String
    }
  },

  data() {
    return {
      isOpen: false
    }
  },

  computed: {
    selected: {
      get() {
        return this.options.find(item => item.name === this.defaultValue)?.name || this.defaultValue || '옵션을 선택해 주세요.'
      }
    }
  },

  methods: {
    selectOption(option) {
      this.selected = option.name
      this.isOpen = false
      this.isSelect = true
      this.$emit('input', option.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.base-select {
  position: relative;
  
  .form-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer;

    svg {
      transition: all 0.3s;
    }
  }

  .form-select-list {
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    z-index: 10;

    & > div {
      &.scroll {
        height: 240px;

        ul {
          overflow-y: auto;
          height: 100%;
          padding-right: 5px;

          &::-webkit-scrollbar {
            width: 5px;
          }

          &::-webkit-scrollbar-thumb {
            background-color: #f5f5f5;
          }
        }
      }
    }

    ul {
      background-color: #fff;
      border: 1px solid #333;

      li {
        height: 60px;
        padding: 0 15px;
        line-height: 60px;
        transition: all .3s;
        cursor: pointer;

        &:hover {
          background-color: #f5f5f5;
        }
      }
    }
  }
  ...
}
</style>

2. 페이지에 BaseSelect 컴포넌트 import 하기

pages/index.vue

만든 <BaseSelect> 컴포넌트를 import 한다.
data() 부분에 props로 넘길 데이터를 작성한다. selectValue1, selectValue2는 빈 값으로 만들어 클릭한 값이 들어올 수 있도록 한다.
v-model을 통해서 selectValue 값이 바뀌는 것을 확인한다.

<template>
  <TheLayout>
    <div class="select">
      <BaseSelect
        :options="selectList"
        :defaultValue="selectValue1"
        v-model="selectValue1"/>

      <BaseSelect
        shape="black"
        :options="selectList"
        :defaultValue="selectValue2"
        v-model="selectValue2"/>
    </div>
  </TheLayout>
</template>

<script>
import TheLayout from '@/components/layout/TheLayout'
import BaseSelect from '@/components/base/BaseSelect'

export default {
  name: 'Main',

  components: {
    TheLayout,
    BaseSelect
  },

  data() {
    return {
      selectValue1: '',
      selectValue2: '',

      selectList: [
        {
          name: '1번'
        },
        {
          name: '2번'
        },
        {
          name: '3번'
        },
        {
          name: '4번'
        },
        {
          name: '5번'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
...
</style>

[Vue/Nuxt] 뷰 아코디언 만들기 (BaseAccordion 만들기)

JAEEE — Wed, 1 Nov 2023 15:39:22 +0900

결과 화면

1. BaseAccordion 컴포넌트 만들기

components/base/BaseAccordion.vue

아코디언은 제목 부분을 클릭하면 내용 부분이 나타나는 레이아웃을 의미한다.

title과 content로 나누어 html을 작성한다. 이때 content 부분은 펼쳐지는 느낌이 날 수 있도록 <transition> 컴포넌트를 이용한다.
<transition> 컴포넌트의 @enter, @leave 메소드에 el.scrollHeight를 사용해서 내용에 따라서 높이값을 정할 수 있도록 한다.
toggle 클릭 이벤트와 currentAccordion 속성을 이용해 title 부분을 클릭할 때마다 content 부분을 show/hide 시킨다.
공통으로 적용할 css/scss를 작성한다.

<template>
  <div class="base-accordion">
    <div
      class="title"
      @click="toggle">
      <slot name="title"/>
    </div>

    <transition
      name="accordion" appear
      @before-enter="beforeEnter" @enter="enter"
      @before-leave="beforeLeave" @leave="leave">
      <div
        v-show="currentAccordion"
        class="content">
        <slot name="content"/>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'BaseAccordion',

  data() {
    return {
      currentAccordion: false
    }
  },

  methods: {
    toggle() {
      this.currentAccordion = !this.currentAccordion
    },
    beforeEnter(el) {
      el.style.height = '0'
    },
    enter(el) {
      el.style.height = el.scrollHeight + 'px'
    },
    beforeLeave(el) {
      el.style.height = el.scrollHeight + 'px'
    },
    leave(el) {
      el.style.height = '0'
    }
  }
}
</script>

<style lang="scss" scoped>
.base-accordion {
  .title {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }

  .content {
    overflow: hidden;
    padding: 20px;
    background-color: #f5f5f5;
    transition: all 0.3s;
  }
}
</style>

2. 페이지에 BaseAccordion 컴포넌트 import 하기

pages/index.vue

만든 <BaseAccordion> 컴포넌트를 import 한다.
<slot>으로 만든 부분에 내용이 들어갈 수 있도록 속성에 맞추어 내용을 작성한다.

<template>
  <TheLayout>
    <div class="accordion">
      <BaseAccordion>
        <h3 slot="title">첫번째 제목</h3>
        <p slot="content">
          내용입니다. 내용입니다. 내용입니다.
          내용입니다. 내용입니다. 내용입니다.
          내용입니다. 내용입니다. 내용입니다.
        </p>
      </BaseAccordion>

      <BaseAccordion>
        <h3 slot="title">두번째 제목</h3>
        <p slot="content">
          내용입니다. 내용입니다. 내용입니다.
          내용입니다. 내용입니다. 내용입니다.
        </p>
      </BaseAccordion>

      <BaseAccordion>
        <h3 slot="title">세번째 제목</h3>
        <p slot="content">
          내용입니다. 내용입니다. 내용입니다.
          내용입니다. 내용입니다. 내용입니다.
        </p>
      </BaseAccordion>
    </div>
  </TheLayout>
</template>

<script>
import TheLayout from '@/components/layout/TheLayout'
import BaseAccordion from '@/components/base/BaseAccordion'

export default {
  name: 'Main',

  components: {
    TheLayout,
    BaseAccordion
  }
}
</script>

<style lang="scss" scoped>
.accordion {
  border: 1px solid #ddd;

  .base-accordion::v-deep {
    &:last-child {
      .title {
        border-bottom: 0;
      }
    }
  }
}
</style>

[Vue/Nuxt] 뷰 탭 만들기 (BaseTab 만들기)

JAEEE — Tue, 31 Oct 2023 16:24:33 +0900

결과 화면

1. BaseTab 컴포넌트 만들기

components/base/BaseTab.vue

tab이 몇 개인지 모르니 배열 타입으로 props 받는다.
key와 currentTab에 따라서 탭의 on/off 상태를 나타낸다.
클릭하면 탭이 변경되어야 하기 때문에 $emit으로 클릭 이벤트를 만든다.
공통으로 적용할 css/scss를 작성한다.

<template>
  <div class="base-tab">
    <ul>
      <li
        v-for="(item, key) in tab"
        :key="`tab-${key}`"
        :class="{ 'on': key === currentTab }"
        @click="$emit('click', key)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BaseTab',

  props: {
    tab: {
      type: Array,
      required: true
    },
    currentTab: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.base-tab {
  margin-bottom: 30px;

  ul {
    display: flex;
    justify-content: start;
    align: center;
    gap:  20px;

    li {
      padding: 0 5px;
      border-bottom: 2px solid transparent;
      color: #888;
      font-size: 20px;
      font-weight: 700;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        color: #333;
      }

      &.on {
        color: #333;
        border-bottom: 2px solid #333;
      }
    }
  }
}
</style>

2. 페이지에 BaseTab import 하기

pages/index.vue

만든 <BaseTab> 컴포넌트를 import 한다.
currentTab, tab 속성을 만들어 <BaseTab>에 데이터를 넘긴다.
changeTab() 클릭 이벤트를 만들어 currentTab이 <BaseTab>의 key 값과 동일하게 만든다.
v-if를 통해서 currentTab 값에 따라 영역을 나타나고, 안 보이게 한다.

<template>
  <TheLayout>
    <BaseTab
      :tab="tab"
      :currentTab="currentTab"
      @click="changeTab"/>

    <section v-if="currentTab === 0">
      탭 1 영역입니다.
    </section>

    <section v-if="currentTab === 1">
      탭 2 영역입니다.
    </section>
  </TheLayout>
</template>

<script>
import TheLayout from '@/components/layout/TheLayout'

export default {
  name: 'Index',

  components: {
    TheLayout
  },

  data() {
    return {
      currentTab: 0,
      tab: [
        { name: '탭 1' },
        { name: '탭 2' }
      ]
    }
  },

  methods: {
    changeTab(key) {
      this.currentTab = key
    }
  }
}
</script>

[Vue/Nuxt] 뷰 모달 만들기 (BaseModal 만들기)

JAEEE — Tue, 31 Oct 2023 14:45:19 +0900

결과 화면

1. BaseModal 컴포넌트 만들기

components/base/BaseModal.vue

<BaseModal> 컴포넌트는 여러 가지 모양의 모달에서 사용될 기본 틀이다.

모달의 경우, 주로 닫기 버튼과 제목, 내용 영역으로 구성되기 때문에 닫기 버튼과 <slot>으로 기본 레이아웃을 만든다.
모달 바깥쪽 영역과 닫기 버튼을 누르면 모달이 닫히는 이벤트가 필요하기 때문에 $emit 을 이용해 클릭 이벤트를 만든다.
공통으로 적용할 css/scss를 작성한다.

<template>
  <div
    class="base-modal"
    @click.self="$emit('close')">
    <div class="wrap">
      <BaseButton @click="$emit('close')">X</BaseButton>

      <div class="title">
        <slot name="title"/>
      </div>

      <div class="content">
        <slot name="content"/>
      </div>
    </div>
  </div>
</template>

<script>
import BaseButton from '@/components/base/BaseButton'

export default {
  name: 'BaseModal',

  components: {
    BaseButton
  }
}
</script>

<style lang="scss" scoped>
.base-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);

  .wrap {
    position: relative;
    width: 90%;
    max-width: 500px;
    min-height: 300px;
    background-color: #fff;
    border-radius: 16px;

    .base-button {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 20px;
      font-weight: 700;
    }

    .title {
      margin: 20px auto;

      h3 {
        font-size: 26px;
        font-weight: 700;
        text-align: center;
      }
    }

    .content {
      p {
        font-size: 16px;
      }
    }
  }
}
</style>

2. 필요한 modal 컴포넌트 만들기

components/modal/ModalCookie.vue

<slot>을 사용해 모달 안의 내용을 작성한다.

해당 방식으로 여러 가지 모달을 만들 수 있다.

<template>
  <BaseModal @close="$emit('close')">
    <h3 slot="title">Cookie Modal</h3>
    <p slot="content">쿠키 모달입니다.</p>
  </BaseModal>
</template>

<script>
import BaseModal from '@/components/base/BaseModal'

export default {
  name: 'ModalCookie',

  components: {
    BaseModal
  }
}
</script>

3. 페이지에 modal import 하기

pages/index.vue

만든 <ModalCookie> 컴포넌트를 import 시킨다.
isModalCookie 속성을 만들어 v-if가 true 이면 모달이 나타나고, false 이면 모달이 사라지게 만든다.
ModalCookieToggle 클릭 이벤트를 만든다.

<template>
  <TheLayout>
    <BaseButton @click="ModalCookieToggle">쿠키 모달 열기</BaseButton>

    <ModalCookie
      v-if="isModalCookie"
      @close="ModalCookieToggle"/>
  </TheLayout>
</template>

<script>
import TheLayout from '@/components/layout/TheLayout'
import BaseButton from '@/components/base/BaseButton'
import ModalCookie from '@/components/modal/ModalCookie'

export default {
  name: 'Main',

  components: {
    TheLayout,
    BaseButton,
    ModalCookie
  },

  data() {
    return {
      isModalCookie: false
    }
  },

  methods: {
    ModalCookieToggle() {
      this.isModalCookie = !this.isModalCookie
    }
  }
}
</script>

[Vue/Nuxt] 뷰 Router 적용하기 (라우터 변수 만들어 전역에서 관리하기)

JAEEE — Mon, 30 Oct 2023 15:07:52 +0900

결과 화면

1. RouterName 변수 만들기

configs/router.js

RouterName 변수(객체)를 만든다.
라우터 변수의 이름과 경로를 정의한다. (경로는 pages 폴더에 만든 .vue 파일의 경로와 동일하게 만든다.)

RouterName 변수 파일을 따로 만드는 이유는 피씨 메뉴, 모바일 메뉴, 사이트맵 등 여러 곳에서 사용했을 경우, 이름 또는 경로가 변경되면 여러 번 수정해야 하기 때문에 router 파일을 하나 만들어 import 시켜서 사용하면 한 번만 수정하면 된다.

export const RouterName = {
  MAIN: '/',
  SUB: '/sub',

  AUTH_LOGIN: '/auth/login'
}

2. TheHeader 컴포넌트 만들기

components/layout/TheHeader.vue

<script> 태그에 { RouterName }을 import 시킨다.
<script> 태그의 data() 영역에 navigation 변수(배열)를 만든다.
name은 네비게이션 이름, to는 RouterName에 작성한 라우터 변수를 작성한다.
<nav> 태그에 v-for를 사용해 네비게이션을 만든다.

<template>
  <header class="wrap">
    <nav>
      <NuxtLink
        v-for="(nav, key) in navigation"
        :key="`nav-${key}`"
        :to="{ path: `${nav.to}`}">
        {{ nav.name }}
      </NuxtLink>
    </nav>
  </header>
</template>

<script>
import { RouterName } from '@/configs/router'

export default {
  name: 'TheHeader',

  data() {
    return {
      navigation: [
        {
          name: '메인',
          to: RouterName.MAIN
        },
        {
          name: '서브',
          to: RouterName.SUB
        },
        {
          name: '로그인',
          to: RouterName.AUTH_LOGIN
        }
      ]
    }
  }
}

<style lang="scss" scoped>
header {
  ...
}
</style>

3. TheHeader 컴포넌트 import 시키기

components/layout/TheLayout.vue

<template>
  <div>
    <TheHeader/>

    <main class="wrap">
      <slot/>
    </main>

    <footer></footer>
  </div>
</template>

<script>
import TheHeader from '@/components/layout/TheHeader'

export default {
  name: 'TheLayout',

  components: {
    TheHeader
  }
}
</script>

pages/index.vue

<template>
  <TheLayout>
    <h1>메인 페이지</h1>
  </TheLayout>
</template>

<script>
import TheLayout from '@/components/layout/TheLayout'

export default {
  name: 'Main',

  components: {
    TheLayout
  }
}
</script>

[CSS] Grid를 사용해서 반응형 차트 만들기 (grid-column, grid-row)

JAEEE — Fri, 27 Oct 2023 15:24:08 +0900

grid-column, grid-row

grid-column 속성은 그리드 라인 숫자에 맞춰 시작 열과 끝 열을 지정할 수 있다.

grid-row 속성은 그리드 라인 숫자에 맞춰 시작 행과 끝 행을 지정할 수 있다.

결과 화면

피씨

모바일

CSS / SCSS

그리드 레이아웃 안에 또 그리드를 사용해도 된다.

하지만 display: grid; 만 사용하면 원하는 영역만큼 공간을 차지하지 않기 때문에 grid-column, grid-row를 함께 사용한다.

귤 영역: grid-column: 1 / 3;

열의 1번째 라인부터 3번째 라인까지 영역을 차지한다.

귤 영역: grid-column: 1/2; grid-row: 1/3;

열의 1번째 라인부터 2번째 라인까지 영역을 차지한다.

행의 1번째 라인부터 3번째 라인까지 영역을 차지한다.

오렌지 영역: grid-column: 2/3;

열의 2번째 라인부터 3번째 라인까지 영역을 차지한다.

레몬 영역: grid-column: 2/3;

열의 2번째 라인부터 3번째 라인까지 영역을 차지한다.

.chart {
  ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;

    li {
      ...
    }
  }

  // 첫번째 차트 (회색)
  .first {
    background-color: #999;
  }

  // 두번째 차트 (진한 회색)
  .second {
    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 100px 100px;
      gap: 20px;

      li {
        background-color: #333;

        &:nth-child(1) {
          grid-column: 1 / 3;
        }
      }
    }
  }

  // 세번째 차트 (빨강)
  .third {
    ul {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 100px 100px;
      gap: 20px;

      li {
        background-color: #d90000;
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .chart {
    ul {
      grid-template-columns: repeat(1, 1fr);

      li {
        ...
      }
    }

    // 첫번째 차트 (회색)
    .first {
      height: 100px;
    }

    // 두번째 차트 (진한 회색)
    .second {
      ul {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 100px);

        li {
          &:nth-child(1) {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
          }

          &:nth-child(2) {
            grid-column: 2 / 3;
          }

          &:nth-child(3) {
            grid-column: 2 / 3;
          }
        }
      }
    }

    // 세번째 차트 (빨강)
    .third {
      ul {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 100px);
      }
    }
  }
}

[CSS] Grid로 레이아웃 만들기

JAEEE — Fri, 27 Oct 2023 11:11:58 +0900

CSS Grid

그리드 레이아웃은 웹페이지를 위한 2차원 레이아웃 시스템이다.

행(row, →)과 열(column, ↓)에 콘텐츠를 배치할 수 있고, 쉽게 말해 격자무늬로 생긴 레이아웃을 만들 때 그리드를 사용하면 편리하게 작업할 수 있다.

결과 화면

3 x 3 레이아웃 만들기

1. grid 선언

HTML

HTML 코드는 계속 동일하다.

<ul class="grid">
  <li>산</li>
  <li>바다</li>
  <li>구름</li>
  <li>자전거</li>
  <li>자동차</li>
  <li>비행기</li>
  <li>사자</li>
  <li>호랑이</li>
  <li>곰</li>
</ul>

CSS / SCSS

display: grid; 를 선언하면 위의 이미지처럼 격자무늬로 레이아웃이 나뉜 것을 확인할 수 있다.

.grid {
  display: grid;
}

2. rows와 columns를 이용해 행과 열의 모양 만들기

CSS / SCSS

grid-template-columns 는 열(column, ↓)을 개수는 정할 때 사용한다.

gtid-template-rows 는 행(row, →)의 높이를 정할 때 사용한다.

보통 그리드 레이아웃은 반응형 웹 사이트에서 많이 사용하기 때문에 columns는 1fr 단위를 많이 사용하고,

rows는 고정 높이 값이 아니라면 콘텐츠 높이만큼 영역을 차지하기 때문에 rows는 값을 지정하지 않는다.

fr은 유연한 크기를 가지는 단위이다.

그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타낸다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // = grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 100px); // = grid-template-rows: 100px 100px 100px;

  // 레이아웃 구별을 위해 색상 CSS를 추가했다.
  li {
    padding: 20px;

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      background-color: blanchedalmond;
    }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6) {
      background-color: darkseagreen;
    }

    &:nth-child(7),
    &:nth-child(8),
    &:nth-child(9) {
      background-color: cadetblue;
    }
  }
}

3. gap을 이용해서 행과 열에 간격 맞추기

CSS / SCSS

column-gap 은 열과 열 사이의 간격을 지정한다.

row-gap 은 행과 행 사이의 간격을 지정한다.

gap 은 행과 열을 동일한 간격으로 지정한다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  column-gap: 20px;
  row-gap: 50px;

  li {
    ...
  }
}

4. flex를 사용해 컨텐츠 가운데 정렬

CSS / SCSS

gird와 flex를 함께 사용하면 보다 쉽게 레이아웃을 만들 수 있다.

gird는 컨테이너 영역의 레이아웃을 만들 때 사용하면 좋고,

flex는 컨테이너 영역 안의 콘텐츠를 정렬(왼쪽 정렬, 가운데 정렬, 오른쪽 정렬)할 때 사용하면 좋다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 20px;

  li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 10px;

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      background-color: blanchedalmond;
    }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6) {
      background-color: darkseagreen;
    }

    &:nth-child(7),
    &:nth-child(8),
    &:nth-child(9) {
      background-color: cadetblue;
    }
  }
}

[CSS] 스켈레톤 UI 만들기 (linear-gradient, 움직이는 그라데이션)

JAEEE — Thu, 26 Oct 2023 17:37:22 +0900

스켈레톤 UI (skeleton UI)

스켈레톤 UI는 실제 데이터가 렌더링 되기 전에 보이는 화면의 윤곽을 표현한 로딩 애니메이션이다.

정적인 화면을 보여주는 대신 스켈레톤 애니메이션을 화면에 보여줌으로써 사용자의 요청이 진행 중임을 표시한다.

또한 정적인 화면보다 동적인 화면을 보여주었을 때 로딩 효과를 잘 표현할 수 있어 움직이는 그라데이션 효과를 자주 사용한다.

결과 화면

사진이어서 움직이지 않지만, keyframes과 animation을 사용해서 좌에서 우로 그라데이션 효과가 움직인다.

HTML

<div class="gradient"></div>

css/scss

색상과 크기는 본인이 원하는 스타일로 작성하면 된다.

keyframes 효과를 다르게 주면 여러 움직임으로 표현할 수 있다.

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.gradient {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background-color: #555;
  border-radius: 16px;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(#dfdfdf, 0) 0, rgba(#dfdfdf, 0.2) 20%, rgba(#dfdfdf, 0.5) 60%, rgba(#dfdfdf, 0));
    animation: shimmer 5s infinite;
    content: '';
  }
}