스벨트킷에서 daisyUI 테마를 이용해 Dark mode를 적용해 보자! 1. 테마 변경을 위해 theme-change 설치 npm install theme-change 2. 원하는 daisyUI 테마 선택 daisyUI themes — Tailwind CSS Components ( version 4 update is here ) How to use daisyUI themes? daisyui.com - 다크 테마 "dim" / 라이트 테마 "pastel" 선택 3. tailwind.config.cjs 파일 수정 /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], ..

스벨트킷에서 daisyUI를 설치하고 설정해 보자! 우선, daisyUI는 Tailwind 기반이기 때문에 Tailwind를 설치해 줘야 한다. [SvelteKit] Tailwind 설치 및 설정 스벨트킷에서 Tailwind를 설치하고 설정해 보자! 1. npm tailwind 설치 npm install -D tailwindcss postcss autoprefixer 2. config 파일 생성 npx tailwindcss init tailwind.config.cjs -p 3. config 파일 내용 설정 /** @type {import('tailw codingchyo.tistory.com - Tailwind 설치 방법 1. npm daisyui 설치 npm install daisyui 2. tailwi..

스벨트킷에서 Tailwind를 설치하고 설정해 보자! 1. npm tailwind 설치 npm install -D tailwindcss postcss autoprefixer 2. config 파일 생성 npx tailwindcss init tailwind.config.cjs -p 3. config 파일 내용 설정 /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: { colors: { 'my-color': '#403d39', // 커스텀 색상 들어갈 부분 }, fontFamily: { } }, }, plugins: [require("d..

프로젝트를 위해 스벨트킷을 설치하고, 필요한 초기 설정을 해 보자! 1. 노드 버전 확인 node -v - 스벨트킷은 nodejs 16 버전 / 18 버전 지원 2. 스벨트킷 설치 npm create svelte@latest 프로젝트명 - svelte@latest는 최신 안정 버전 / svelte@next는 최신 개발 버전 - 설치 시 질문 사용할 템플릿은? [ 데모 프로젝트 / 기본 라이브러리가 있는 프로젝트 생성 / 빈 프로젝트 생성 ] 타입 체크 사용 여부? [ 타입스크립트 사용 / 자바스크립트 주석을 이용한 타입 확인 / 안 함 ] EsLint, Prettier 사용 여부? [ Yes / No ] 브라우저 테스팅 여부? [ Yes / No ] EsLint는 소스 코드에 문제가 있는지 검사 후, 문..

스벨트를 독학ing.. 현재진행중 리액트에 비해서 간결하고 직관적인 것이 아주 맘에 들었다 하지만? 검색 시 자료가 너무너무너무너무 후달린다 리액트 공부할 때는 스택오버플로우 들어만 보고 솔직히 잘 안 찾아봤는데 스벨트는 스택오버플로우에 관련 자료 나오는 것만으로도 감사해야 할 지경 그래서? 앞으로 믿을 건 나의 기록뿐 스벨트한테 정떨어지기 전까지는 열심히 기록하자자자아좌좌자