본문 바로가기

[프로젝트] 개발 프로젝트 모음zip

[NextJS] About Page : carousel 구현 (tailwind.css 및 Daisy UI)
[프로젝트] 개발 프로젝트 모음zip 2024. 1. 18. [NextJS] About Page : carousel 구현 (tailwind.css 및 Daisy UI) 목표 : js 없이 서버 컴포넌트로 돌아가는 캐러셀 구현 : use client가 아닌 서버 컴포넌트로 구현되게 하기 위해 노력함 ---> 성공! tailwind.css 및 daisy UI 사용 : 아직 익숙해지는 과정이라 최대한 사용중 캐러셀 클릭 이벤트 js 없이 구현 - 단, a 태그로 특정 item으로 이동하게 만들었음 (item first 및 item last의 id로 이동) 발생한 소소한 문제들 1. 이벤트 없이 어떻게...... 이동하죠? - a 태그로 이동 ❮ 2. 화살표가 div랑 붙어버렸다. 어떻게 합니까 - gap 사용 {/* 붙어있던 화살표와 div는 gap-4 값을 넣어서 해결*/} 대략 가닥이 잡히고 나서부터는 컬러를 골랐다. AB 테스트 컬러 A. B. 최종 (일단) 어제부터 ..
[Next.js] Navbar에 svg 추가, 반응형 추가 구현
[프로젝트] 개발 프로젝트 모음zip 2024. 1. 16. [Next.js] Navbar에 svg 추가, 반응형 추가 구현 next에 svg 사용하기 svgr 설치 npm install @svgr/webpack svgr 구성 : next.config.js // next.config.js module.exports = { webpack(config, options) { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] }); return config; }, }; 아이콘 가져오기 https://www.svgrepo.com/ SVG Repo - Free SVG Vectors and Icons Free Vectors and Icons in SVG format. ✅ Download free mono or multi color vectors for commercial ..
[Next.JS] 싱글페이지 만들기 : Tailwind.css 그리고 daisy UI
[프로젝트] 개발 프로젝트 모음zip 2024. 1. 15. [Next.JS] 싱글페이지 만들기 : Tailwind.css 그리고 daisy UI 개쩌는(희망사항) 넥스트 프로젝트를 시작해보자. CNA 해주시고 프로젝트 구조 설정 해주세요. (지난주 완료) 링크참고 [리액트에서 Next로] Next.js 기초 : 초기 프로젝트 설정부터 네비게이션 일단 공식문서를 들어가자. Docs | Next.js Welcome to the Next.js Documentation. nextjs.org VScode를 켜서 터미널에 입력하자. npx create-next-app@latest 초기설정 설치 완료가 되면, 프로젝트 이동 및 실행 cd [프로젝 keepgochida.tistory.com 나는 프론트엔드니까 daisy ui 쓸 것 Tailwind Navbar Component — Tailwind CSS Components ( version 4 update i..

티스토리툴바