Per ardua ad astra.

갑자기 "'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다." 오류가 발생할 때 해결 방법들어가며Next.js 프로젝트 서버를 실행할 때, 갑자기 아래와 같은 오류가 발생하는 경우가 있다.$ yarn devyarn run v1.22.22$ next dev'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이때, 이 문제를 해결하는 방법을 정리해본다. 방법해결 방법은 간단하다. 캐시를 지워준 후, 프로젝..

Faker.js 라이브러리들어가며Faker.js 라이브러리에 대해 정리해본다. Faker.js개념다양한 유형의 가짜 데이터를 쉽게 생성할 수 있도록 도와주는 자바스크립트 라이브러리애플리케이션 개발, 테스트, 데모용 데이터를 빠르게 생성할 때 유용하다.이름, 주소, 전화번호, 이메일, 날짜, 이미지 URL 등을 무작위로 생성할 수 있다.관리 문제로 2021년에 개발이 중단되었고, 이후 커뮤니티에서 @＠faker-js/faker@라는 이름으로 포크(Fork)하여 유지보수하고 있다.기존의 @faker.js@는 더 이상 유지보수되지 않는다.자세한 내용은 이 글을 참고한다. 따라서 커뮤니티에 의해 관리되고 있는 @＠faker-js/faker@를 사용한다.Faker로 생성한 데이터는 무작위이며 실제 데이터가 아니므..

Pyinstaller로 패키징할 때 환경 변수 파일(.env) 인식 안되는 문제 해결 방법들어가며Pyinstaller를 사용하여 실행 파일(@.exe@)로 패키징 할 때, 환경 변수 파일(@.env@) 인식이 안되는 문제를 해결하는 방법을 정리해본다. 방법기본적으로 파이썬(Python)에서 환경 변수 파일(@.env@)의 내용을 불러오려면 @dotenv@ 패키지를 사용해야 한다.@dotenv@ 패키지에 대한 자세한 내용은 아래의 글을 참고한다. [Python] .env 파일 다루는 방법.env 파일 다루는 방법들어가며파이썬(Python)에서 @.env@ 파일을 다루는 방법을 정리해본다. .env 파일개념키(Key)-값(Value) 쌍으로 환경 변수를 정의하는 간단한 텍스트 파일이 파일을 사용하면dev-a..

환경 변수 사용 방법들어가며Next.js에서 환경 변수(Environment Variable)를 사용하는 방법을 정리해본다. 방법① 환경 변수 파일 설정하기Next.js는 @.env@ 파일을 통해 환경 변수를 불러올 수 있다.프로젝트 최상위 경로(@/@)에 다음과 같은 @.env@ 파일을 생성한다. /.env.localNEXT_PUBLIC_API_URL=https://api.example.comAPI_SECRET_KEY=your-secret-key ⇒ 다음과 같이 @.env@뒤에 용도에 따라 다양한 접미어를 붙일 수 있다. 환경변수 파일명설명@.env.local@로컬 개발 환경에서 사용하는 환경 변수 (Git에 추가하지 않는 것이 좋다.)@.env.development@개발 환경에서 사용하는 환경 변수@..

Clerk들어가며Next.js 애플리케이션에서 인증(Authentication) 및 사용자 관리 기능을 쉽게 도와주는 Clerk 서비스에 대해 정리해본다.이 서비스를 이용하면, 소셜 로그인 등 인증을 위한 기능들을 직접 코드로 구현하여 만들어주지 않아도 된다. Clerk개념Next.js 애플리케이션에서 인증(Authentication) 및 사용자 관리 기능을 쉽게 구현할 수 있도록 돕는 서비스소셜 로그인, 멀티팩터 인증(MFA), 세션 관리 등을 기본 제공한다.Next.js의 서버리스 환경과도 잘 맞기 때문에 API 라우트와 미들웨어에서 유용하게 사용된다.Clerk을 이용하면 쉽게 소셜 로그인(Google, Facebook, GitHub 등) 기능을 구현할 수 있다.  회원가입 및 프로젝트 생성 Cler..

use-debounce 패키지들어가며리액트(React.js)와 Next.js 같은 환경에서 컴포넌트가 자주 업데이트 되지 않도록 해주는 @use-debounce@ 패키지에 대해 정리해본다. use-debounce개념리액트(React.js)와 Next.js 같은 환경에서 컴포넌트가 자주 업데이트되지 않도록 특정 동작을 디바운스(Debounce) 하기 위해 사용할 수 있는 유틸리티 훅사용자가 입력을 빠르게 반복할 때 불필요한 리렌더링이나 API 호출을 방지하는 데 유용하다. 디바운스(Debounce)사용자가 마지막으로 발생한 이벤트 이후, 일정 시간 동안 추가 이벤트가 발생하지 않았을 때만 함수를 실행하는 패턴주로 API 요청이나 리소스가 많이 필요한 이벤트 처리에 사용된다.검색창에서 사용자가 입력할 때마다..

판다스(pandas) 출력 길이 제한 해제하기들어가며판다스(@pandas@)의 출력 길이 제한을 해제하는 방법을 정리해본다.긴 내용의 데이터를 확인할 경우 중간에 @...@으로 생략되어 있어서 불편한데, 이 설정을 해주면 전체 내용이 보이게 된다. 방법다음과 같이 @pd.set_option()@을 이용하여 최대 출력 행과 열의 개수를 없앨 수 있다.import pandas as pd# 행과 열의 최대 출력 제한 해제하기pd.set_option('display.max_rows', None) pd.set_option('display.max_columns', None) 참고 사이트 pandas.set_option — pandas 2.2.3 documentationdisplay.[large_repr, max_c..

코드 자동 완성, 스니펫 기능 끄는 방법 (settings.json)들어가며비주얼 스튜디오 코드(VS Code)에서 코드 자동 완성, 스니펫(Snippet) 기능을 끄는 방법을 정리해본다.로컬에서 코딩 테스트나 빅데이터분석기사 실기 시험을 준비할 때 이 방법을 사용하면 유용하다. 방법설명@settings.json@ 파일에 아래의 내용을 추가해준다.@[Ctrl/Cmd]@ + @[Shift]@ + @[P]@를 눌러서 명령 팔레트(Command Pallette) 열기@settings@ 검색하기@[Preferences: Open User Settings (JSON)]@ 항목 클릭하기   만약 로컬 프로젝트에만 적용시키고 싶다면, 프로젝트 최상단 경로에 @.vscode@ 폴더 생성 후, @settings.json..

antd 컴포넌트 라이브러리들어가며리액트(React.js) 기반의 UI 컴포넌트 라이브러리 중 하나인 antd(Ant Design)에 대해 정리해본다. Ant Design(antd)개념알리바바 그룹이 만든 리액트(React.js) 기반의 UI 컴포넌트 라이브러리디자인 일관성을 유지하면서 생산성을 높이는 것을 목표로 만들어졌으며, 기업용 시스템 개발에 많이 사용된다.주로 관리 시스템, 대시보드, 기업용 웹 애플리케이션 개발에 적합하다. 주요 특징버튼, 입력 필드, 테이블, 모달, 폼, 차트 등 다양한 UI 컴포넌트를 제공한다.@@, @@, @@, @@, @@, @@대부분의 컴포넌트가 미리 스타일링되어 있어, 최소한의 설정으로 빠르게 개발 가능하다.디자인 가이드라인을 따르며, 여러 컴포넌트를 조합해도 통일된..

외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법들어가며@antd@ 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다. 방법스타일 파일(@컴포넌트명.style.js@)이나 컴포넌트 파일(@컴포넌트명.js/jsx/tsx@)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.import styled from "styled-components";import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)` 속성: 값;`; 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.i..

프리즈마(Prisma)들어가며ORM(Object-Relational Mapping) 도구 중 하나인 프리즈마(Prisma)에 대해 정리해본다. 프리즈마(Prisma)개념ORM(Object-Relational Mapping) 도구데이터베이스와 애플리케이션 간의 인터페이스를 간편하게 만들어주는 개발 도구주로 Node.js와 TypeScript 환경에서 사용된다.SQL 쿼리를 직접 작성할 필요 없이 안전한 타입의 코드를 통해 데이터베이스와 상호작용할 수 있도록 도와준다. ORM(Object-Relational Mapping)객체 지향 프로그래밍 언어에서 사용하는 객체(Object)와 관계형 데이터베이스(Relational Database)의 테이블 간의 매핑을 자동화하는 기술데이터베이스의 데이터를 SQL이 아..

Supabase들어가며Firebase의 대안으로 많이 사용되는 Supabase에 대해 정리해본다. Supabase개념개발자들이 서버리스 애플리케이션을 빠르게 구축할 수 있도록 돕는 오픈 소스 백엔드 서비스Firebase의 대안으로 많이 사용되며, PostgreSQL을 기반으로 데이터를 관리하고 다양한 기능을 제공한다. 주요 기능데이터베이스 관리PostgreSQL을 기본 데이터베이스로 사용한다.스키마 관리, 관계형 데이터베이스, 실시간 기능 등을 지원한다.SQL 쿼리를 사용하여 복잡한 데이터를 처리할 수 있다. 실시간 기능실시간 데이터베이스 이벤트를 구독할 수 있다.예) 데이터베이스에 새로운 레코드가 추가되거나 업데이트되면 자동으로 클라이언트에 알림 보내기 인증 및 권한 관리이메일, 비밀번호 로그인, 소셜..

asChild 속성들어가며@asChild@ 속성에 대해 정리해본다. asChild 속성개념Radix UI와 같은 라이브러리에서 사용되는 속성컴포넌트가 래핑(Wrapping)된 자식 컴포넌트의 스타일이나 기능을 그대로 유지하면서 특정 기능을 제공하기 위해 사용된다. 의미자식 요소를 그대로 사용한다.래핑된 컴포넌트가 새로운 DOM 노드를 생성하지 않고, 해당 자식 요소의 DOM을 그대로 사용하여 기능만 추가한다.불필요한 DOM 노드가 추가되지 않아 HTML 구조를 깔끔하게 유지하고, 스타일이 깨지지 않도록 보장한다. 사용 예 Menu ⇒ @@은 @@의 자식이지만, @@가 새로운 DOM 노드를 만들지 않는다.⇒ 대신 @@ 자체가 @DropdownMenuTrigger@로 작동하게 된다. 사용하면 좋은 경우추가..

shadcn/ui들어가며간단하게 복사 & 붙여넣기로 사용할 수 있는 shadcn/ui에 대해 정리해본다. shadcn/ui개념다양한 웹 애플리케이션 개발에 사용할 수 있는 접근 가능하고 커스터마이즈 가능한 UI 컴포넌트 모음일반적인 라이브러리와는 다르게 npm 패키지로 설치하는 대신, 사용자가 필요한 컴포넌트를 복사해서 직접 프로젝트에 붙여넣는 방식으로 사용한다.불필요한 의존성을 피할 수 있고, 자신만의 커스텀 컴포넌트 라이브러리를 구축할 수 있다.리액트(React.js)를 기반으로 작성되었고, Tailwind CSS 및 Radix UI와 같은 오픈 소스 기술들을 적극적으로 활용하여 만들어졌다.Next.js와 같은 프레임워크와 잘 통합되도록 설계되었다.MIT 라이센스로 공개되어 있어 누구나 자유롭게 수정..

폴더 구조 및 동적 경로 설정하기들어가며Next.js를 이용하여 폴더 구조 및 동적 경로를 설정하는 방법을 정리해본다. 방법① 비공개 폴더(Private Folder) 생성하기앱(@app@) 폴더는 기본적으로 URL 세그먼트가 된다.비공개 폴더(Private Folder)를 만들고 싶을 경우, 폴더 이름 앞에 밑줄(@_@)을 추가한다._css ⇒ @_css@ 폴더 생성 시, 해당 폴더는 URL 세그먼트로 노출되지 않으며, 만약 해당 경로에 접속할 경우 404 페이지를 반환한다. 비공개 폴더는 라우팅에 직접 포함되지 않는 폴더이다.일반적으로 내부 관리 목적으로 사용된다.  ② 라우트 그룹(Route Group) 생성하기라우트 그룹(Route Group)은 특정 페이지나 경로를 그룹화한다.이러한 그룹의 이름..

일반 CSS와 CSS Module 비교들어가며리액트(React.js)에서 CSS Module과 일반 CSS의 차이점에 대해 정리해본다.두 방식의 큰 차이점은 CSS 클래스의 범위(Scope)와 이름 충돌 방지이다 일반 CSS 방식일반적으로 사용되는 CSS는 전역적으로 동작한다.스타일 시트에서 정의된 클래스 이름이 프로젝트의 모든 컴포넌트에 영향을 미칠 수 있다.모든 컴포넌트는 같은 CSS 파일을 참조할 수 있고, 클래스 이름이 겹치면 스타일이 덮어씌워질 가능성이 있다. HomePage.css.button { background-color: blue; color: white;} HomePage.jsximport './HomePage.css';const HomePage = () => { return (..

CCI Cake들어가며Redis를 기반으로 만들어진 CCI Cake에 대해 정리해본다. CCI Cake개념실시간 데이터 히스토리언(Historian)과 시각화 도구로, Redis를 기반으로 만들어진 프로그램주로 산업, 제조, 에너지 분야에서 실시간 및 과거 데이터를 처리하는데 사용된다.방대한 양의 데이터를 저장하고, 빠르게 검색하여 분석할 수 있다.10백만 태그 이상을 저장 가능하며, 초당 50백만 태그 이상을 처리할 수 있다.1,000명 이상 동시 접속 시에도 속도 저하가 없다.http://sfsi.co.kr/OTIT-solution/?bmode=view&idx=2525997파이썬(Python) 기반의 스크립팅 환경을 제공하여, NumPy 같은 데이터 분석 라이브러리를 통해 데이터를 처리할 수 있다.E..

Redis(Remote Dictionary Server)들어가며실시간 데이터(Real Time Data)를 처리하기 위해 사용할 수 있는 플랫폼인 Redis(Remote Dictionary Server)에 대해 정리해본다. Redis(Remote Dictionary Server)개념 '키-값' 구조의 비정형 데이터를 저장하고 관리하기 위한 오픈 소스 기반의 비관계형 데이터베이스 관리 시스템(DBMS)고성능의 인메모리(In-memory) 데이터 구조 스토어주로 데이터베이스, 캐시, 메시지 브로커로 사용되며, 다양한 데이터 구조를 지원한다.2009년 살바토르 산필리포(Salvatore Sanfilippo)가 처음 개발했다. 특징모든 데이터를 메모리(RAM)에 저장한다. 따라서 매우 빠르게 데이터를 읽고 쓸 ..

git push 취소하는 방법들어가며깃(Git)에서 @push@를 한 후, 취소하는 방법을 정리해본다. 방법최근에 푸시한 커밋 취소하기마지막 커밋을 삭제하는 명령이다.하지만 작업 디렉터리의 변경 사항은 그대로 유지된다.$ git reset --soft HEAD^ 만약, 작업 디렉터리의 변경 사항을 초기화하려면 아래의 명령을 실행한다.$ git reset --hard HEAD^ @--hard@ 옵션을 이용하여 리셋할 경우, 작업 디렉터리의 변경 사항이 초기화된다. (변경된 내용이 모두 사라진다.) 원격 저장소에 이 변경 사항을 강제로 반영하고자 할 경우, 아래 명령을 실행한다.$ git push --force 참고또는 다음과 같이 @HEAD@ 키워드를 이용하여 취소할 수 있다.# 로컬 브랜치를 이전 커밋으..

self.function(param)과 function(self, param)의 차이점들어가며PyQt를 이용하여 개발을 할 때, 언제 @self.function(param)@ 또는 @function(self, param)@를 써야할지 헷갈릴 때가 있다.이 둘의 차이점에 대해 정리해본다.  self개념파이썬 클래스의 인스턴스 메서드에서 현재 객체 자신을 참조하기 위한 첫 번째 매개변수클래스의 인스턴스(객체) 자신을 참조하는 변수클래스 내에서 정의된 메서드가 호출될 때 자동으로 해당 메서드가 속한 객체를 가리키도록 한다.클래스와 객체 지향 프로그래밍(OOP)에서 매우 중요한 개념메서드 내에서 객체의 속성이나 다른 메서드에 접근할 때 사용 @self@는 메서드 내에서 객체의 속성과 다른 메서드에 접근할 수 있..

클래스(Class)들어가며타입스크립트(TypeScript)에서 사용할 수 있는 클래스(Class)에 대해 정리해본다. 클래스(Class)개념객체(Object)를 생성하기 위한 설계도(Blueprint)데이터를 캡슐화하고, 그 데이터를 조작하는 메서드를 포함하여 객체 지향 프로그래밍(OOP, Object Oriented Programming) 패턴을 따른다.상속(Inheritance)를 지원하며, 복잡한 데이터 구조를 쉽게 생성할 수 있다. 클래스와 생성자(Contructor)클래스에서 생성자(Constructor)는 새 인스턴스를 생성할 때 호출되는 특별한 메서드이다.생성자는 보통 객체의 초기 상태를 설정하는 데 사용된다.class Book { // 클래스 속성 선언 title: string; au..

제네릭(Generic)들어가며타입스크립트(TypeScript)의 제네릭(Generic)에 대해 정리해본다. 제네릭(Generic)개념코드의 재사용성을 높이고 다양한 타입에 대해 동작할 수 있게 해주는 기능제네릭을 사용하면 타입을 우선 특정하지 않고, 나중에 사용할 때 그 타입을 지정할 수 있다.또한, 타입 추론이 더 강화되고, 반복적인 타입 코드를 줄일 수 있다.함수, 클래스, 인터페이스, 타입 등에 제네릭을 적용할 수 있다. 기본 문법제네릭을 사용할 때는 타입 매개변수(Type Parameter)를 정의한다.보통 @@와 같은 형식으로 사용하며, 원하는 이름을 지정하면 된다.@T@, @K@, @U@ 등이 관습적인 이름으로 쓰인다. 예제 코드 1 : 함수에서 제네릭 사용하기@identity@ 함수는 입력받..

인터페이스(Interface)들어가며타입스크립트(TypeScript)의 인터페이스(Interface) 타입에 대해 정리해본다. 인터페이스(Interface)개념객체의 구조를 정의하는 데 사용되는 타입객체가 가져야 할 속성, 그 속성의 타입, 그리고 메서드를 지정할 수 있다.자바스크립트에는 존재하지 않으며, 타입스크립트에서 사용 가능하다.코드의 가독성 및 유지보수를 쉽게 하고, 타입 안전성을 높여준다. 주요 기능객체가 특정 속성들을 반드시 가지고 있어야 하는 구조를 정의할 수 있다.특정 속성은 선택적으로 포함될 수 있도록 정의할 수 있다.예) @age?: number;@함수의 매개변수와 반환값의 타입도 인터페이스로 정의할 수 있다.클래스는 인터페이스를 @implements@ 키워드를 통해 구현할 수 있다...

Zod 라이브러리들어가며타입스크립트(TypeScript)에서 유효성 검사를 쉽게 해주는 Zod 라이브러리에 대해 정리해본다. Zod 라이브러리개념타입스크립트(TypeScript)에서 유효성 검사를 쉽게 해주는 스키마 선언 및 데이터 검증 라이브러리타입 안전성을 유지하면서 데이터의 유효성을 검사할 수 있도록 설계되어 있다.데이터 검증을 더욱 명확하고 직관적으로 수행할 수 있도록 도와준다. 설치$ npm install zod # yarn add zod 기본 사용법다음과 같이 간단한 문자열(String) 스키마를 만들 수 있다.import { z } from "zod";// creating a schema for stringsconst mySchema = z.string();// parsingmySchem..

타입 가드(Type Guard)들어가며타입스크립트(TypeScript)의 타입 가드(Type Guard)에 대해 정리해본다. 타입 가드(Type Guard)개념타입스크립트에서 변수의 타입을 좁히는 방법주로 조건문(Conditional Statement)을 사용하여 특정 타입임을 확인한 후, 해당 타입에 맞는 안전한 작업을 수행할 수 있도록 도와준다.타입 가드를 사용하면 컴파일 시점에 타입 오류를 방지하고, 코드의 가독성과 안정성을 높일 수 있다.타입 가드를 효과적으로 사용하면 런타임 오류를 줄이고, 개발 과정에서 타입 관련 버그를 미리 방지할 수 있으며, 코드의 의도를 명확하게 표현하여 협업 시 가독성을 높이는 데 큰 도움이 된다. 타입 가드는 런타임에서 변수의 타입을 확인하여 타입스크립트에게 해당 변수..

모듈 방식 사용하기들어가며타입스크립트(TypeScript)에서 모듈 방식을 사용하는 방법을 정리해본다. 방법타입스크립트 파일(@.ts@/@.tsx@)은 기본적으로 모듈(Module)로 간주되지 않고, 전역 범위의 스크립트로 처리된다.여러 파일에서 동일한 변수명을 생성할 경우, 오류가 발생한다.fileA.tslet name = 'stickman';const susan = 'susan'; fileB.tsconst susan = 'susan'; // 오류 발생 이때, 다음과 같이 2가지 방법으로 타입스크립트 파일을 모듈로 변환할 수 있다. 방법 ① : @import@, @export@ 문 사용하기타입스크립트 파일에 @import@ 또는 @export@ 문을 추가하여 ES6 모듈로 취급되게 하는 방법이다. ..

인터페이스(Interface)와 타입 별칭(Type Alias) 비교들어가며인터페이스(Interface)와 타입 별칭(Type Alias)은 타입스크립트에서 타입을 정의하는 방법이다.타입스크립트(TypeScript)에서 인터페이스(Interface)와 타입 별칭(Type Alias)의 차이에 대해 정리해본다. 인터페이스(Interface)개념인터페이스는 주로 객체(Object)의 구조를 정의하는 데 사용된다.주로 객체의 속성과 메서드를 정의하는 데 사용된다.인터페이스를 구현하는 객체는 해당 인터페이스에서 요구하는 속성이나 메서드를 반드시 포함해야 한다.코드에서 객체의 구조를 명확하게 정의하고, 다른 코드에서 해당 구조를 따르도록 강제할 때 유용하다.@interface@ 키워드를 이용하여 생성할 수 있다...

caseReducers (Redux Toolkit) 속성들어가며리덕스 툴킷(Redux Toolkit)의 @caseReducers@ 속성에 대해 정리해본다.이 속성을 이용하면 슬라이스 내의 개별 리듀서 함수에 직접 접근하고 호출할 수 있다. createSlice() 함수와 caseReducers 속성createSlice() 함수슬라이스(Slice)를 정의하기 위해 사용된다.슬라이스는 특정 상태(State)와 그 상태를 변경하는 리듀서(Reducer)들을 한 곳에 모아놓은 것이다.슬라이스는 자동으로 액션 생성자(Action Creators)와 액션 타입(Action Types)을 생성해준다.reducers 옵션@createSlice@ 함수의 @reducers@ 옵션은 슬라이스의 상태를 변경하는 여러 개의 리..

URL의 파리미터(Parameter) 값 가져오기들어가며리액트(React.js)에서 URL의 파라미터(Parameter) 값을 가져오는 방법을 정리해본다. 파라미터(Parameter)개념URL 경로의 일부분으로, 주로 특정 리소스를 식별하는 데 사용된다.RESTful API 설계에서 흔히 사용되며, 리소스의 고유 식별자를 나타낸다.URL 파라미터를 사용하면 동적인 경로를 생성할 수 있어, 다양한 리소스에 대해 동일한 컴포넌트를 재사용할 수 있다. 종류종류설명경로 파라미터(Path Parameter)- 특정 리소스를 식별하는 데 사용- 예: @/users/:userId@쿼리 파라미터(Query Parameter)- URL의 @?@ 뒤에 위치하며, @키-값@ 쌍으로 다양한 옵션을 전달한다.- 예) @?sea..

daisyUI 테마 설정하기 들어가며테일윈드 CSS의 확장 라이브러리인 daisyUI를 이용하여 페이지에 테마(Theme)를 적용하는 방법을 정리해본다. 방법테마 고르기dasiyUI의 공식 문서에서 원하는 테마를 선택한다. daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.com 이 페이지에서는 드라큘라 테마(@dracula@)를 선택했다고 가정한다. 테일윈드 CSS 설정 파일에 추가하기테일윈드 CSS 설정 파일인 @tailwind.config.js@ 파일에 아래의 테마 속성을 추가해준다../tailwind.config.js/** @type {import('tailwind..