전체 글70 tailwindCSS safelist와 동적클래스 classname TailwindCSS를 사용할 때 클래스를 동적으로 적용해야 하는 상황이 종종 발생합니다.하지만 동적 클래스를 잘못 작성하거나 TailwindCSS의 빌드 과정과 호환되지 않는 방식으로 구성하면 스타일이 적용되지 않을 수 있습니다. 목차 동적 클래스 지정 속성에 따라 버튼 색상을 동적으로 변경하려는 방식으로 클래스를 동적으로 사용하려면, 단순한 리터럴 대입으로는 변경되지 않습니다.이 방식은 Tailwind(의 빌드 과정에서) 클래스가 제대로 적용되지 않습니다.interface ButtonProps { label: string; onClick: () => void; color?: string; // 색상 조절을 위한 선택적 prop}const Button: React.FC = ({ label, .. 2024. 12. 8. React 프로젝트(초기) JavaScript에서 TypeScript로 변경하기 기존 JavaScript 기반으로 만들어진 React 프로젝트를 TypeScript로 변경하는 과정을 기록합니다. TypeScript Version - 5.7.2React Version - 18.3.1 목차 패키지 설치 TypeScript와 React의 타입 정의를 프로젝트에 추가해야 합니다npm install --save typescript @types/react @types/react-dom 그러면 이렇게 아래 부분이 추가됩니다.package.json 과 package-lock.json 이 변경된 모습은 아래와 같습니다. TypeScript 설정 파일npx tsc --inittsconfig.json 파일을 생성합니다.위 코드를 입력하면 아래 내용이 생성됩니다. {"compilerOptions.. 2024. 12. 7. seoul_secure WIFI 와이파이 비밀번호 seoul_secure는 서울시에서 제공하는 공공 와이파이 서비스 입니다. seoul과 seoul_secure이 있는데, (조금 더) 보안접속이 되는 seoul_secure로 접속하는 것이 권장되며, seoul_secure 와이파이 비밀번호를 기록합니다.(당연히 무료 접속을 제공합니다. Free!!) ## 와이파이 연결스마트폰이나 노트북의 와이파이 설정에서 "seoul_secure" 네트워크를 선택하세요. ## 사용자이름과 암호 사용자 이름 : seoul사용자 이름은 seoul 이며 암호는 아래 이미지를 참고합니다. 주의사항공공 와이파이 사용 시 개인정보 보호를 위해 VPN 사용을 권장합니다.중요한 금융 거래나 개인정보 입력은 피하는 것이 좋습니다. 2024. 12. 7. react 에 tailwindcss 적용하는 방법 목차tailwind 패키지 설치npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p(참고로 -p 플래그는 자동으로 postcss.config.js까지 생성해줍니다.)tailwind 설정파일 기본 구성tailwind.config.js 에서 설정이 관리됩니다.javascriptCopy/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html" // HTML 파일도 추가 권장 ], theme: { extend: { // 커스텀 테마 설정 가능 .. 2024. 12. 7. 이전 1 2 3 4 5 6 ··· 18 다음
