[nextjs+ts]( 번외) TailwindCSS 지원 Class를 제외한 값 커스텀하기 TailwindCSS는 정말 다양한 custom한 정보를 제공해주지만, 프로젝트를 진행하다보면 그 외에 값을 적용해야할 때가 있다. 감사하게도 Tailwind는 [] 기능을 통하여 손쉽게 해당 커스텀 기능을 제공해준다. #기존 클래스 - 다음과 같이 클래스를 지정하여 이용한다. Test #커스텀으로 적용하기 Test 다음과 같이 []를 통하여 커스텀 적용이 가능하다. #nextjs #ts #TailwindCSS #css #js #react
[nextjs+ts]프로젝트 04.로그인 페이지 TailwindCSS Modifiers를 이용한 예외처리/이벤트 처리 [결과 화면] peer를 통하여, 예외처리, hover를 통하여 이벤트 처리를 진행하였다. #react에서 복잡하게 처리해야하는 작업들이 한줄로 간편하게 처리되었다. 예외처리 할 객체 peer등록 후 peer-invalid:bg-red-600 등의 이벤트 처리를 하면된다. 이벤트 처리 할 객체 hover:bg-red-600 등의 이벤트 처리를 하면된다. import type { NextPage } from "next"; const Test: NextPage = () => { return ( Test CMS 아이디 아이디를 입력해주세요 비밀번호 패스워드를 입력해주세요 문의가 있는 경우, 아..
[nextjs+ts]프로젝트 03. TailwindCSS로 기본 로그인 페이지 만들기 #기본 UI를 간단하게 작성해보았고, 트랜지션, 동적코드, 백엔드와 연동은 순차적으로 진행 할 예정이다. #[완성된 화면] #[소스코드] import type { NextPage } from "next"; const Login: NextPage = () => { return ( Test CMS 아이디 비밀번호 로그인 문의가 있는 경우, 아래의 이메일로 연락부탁드립니다. promoted.go@gmail.com ); }; export default Test; 프로젝트 경로 https://github.com/gofogo2/admin-cms-nextjs.git #nextjs #ts #TailwindCSS #css #js #re..
[nextjs+ts]프로젝트 02. TailwindCSS 설정 [설치] npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npm install -D prettier prettier-plugin-tailwindcss [경로 설정] - tailwind.config.js module.exports = { content: ["./pages/**/*.{js,jsx,ts,tsx}","./components/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], } [글로벌 지정] - index.css @tailwind base; @tailwind components; @tailwind..
[nextjs+ts]프로젝트 01. 개발환경 설정 개발환경: frontend : nextjs typescript tailwindCSS backend : asp.net core 3.1 다음 환경을 기반으로 Dashboard 기반 Admin CMS 개발 예정 [nextjs+typescript 설치] npx create-next-app@latest --typescript [18 rc 버전으로 업데이트] npm i next@latest react@rc react-dom@rc [next.config.js] - 버그를 위한 옵션 추가 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: {re..