tailwindCSS2 [Next.js 13] 컴포넌트 생성 후, page에서 컴포넌트에 <HTML> 태그, 속성값 사용법 접근 (요약) 현재 개발중인 프로젝트에서 Next.js 13버전과 TypeScript 를 기술스택으로 갖고, 구성요소마다 최대한 잘게 컴포넌트화를 목표로 하고 있습니다. (1) 컴포넌트(components)를 빼주고, 실제 화면을 보여주는 (2) page.tsx 파일에서 (1) 컴포넌트를 사용하면서도 (3) 해당 컴포넌트 내에 태그나 속성값을 주는 방법을 학습해보겠습니다. 1. (상황) 컴포넌트화 & page.tsx 생성 (1.1). 컴포넌트화 + 컴포넌트 사용을 위한 등록 (1.2). Page.tsx 생성 + 컴포넌트 가져오기 2. 컴포넌트에 속성 값 전달하기 (2.1). 컴포넌트 파일 준비하기 (interface, props) (2.2). page.tsx( 컴포넌트를 사용할) 파일 준비하기 3. 컴포.. 2023. 9. 27. [Next.js 13] tailwind css Plugin 작성 & 적용 접근 (요약) 현재 개발중인 프로젝트에서 Next.js 13버전과 TypeScript 를 기술스택으로 갖고, 이에 더불어 Tailwind CSS를 사용하고 있습니다. 필요한 컴포넌트를 Tailwind CSS에서 가져다가 사용하려는 찰나, 프로젝트 내부 tailwind.config.ts 파일에 Plugin 부분을 추가하란 안내를 따라가봅니다. 1. (상황) Tailwind css 컴포넌트 사용 필요 (1.1) 컴포넌트 코드 내부 2. Tailwind CSS Plugin 추가 & 설치 (2.1). npm install @플러그인명 (2.2). tailwind.config.ts 파일에 플러그인 추가 방법 1. (상황) Tailwind css 컴포넌트 사용 필요 (1.1) 컴포넌트 코드 내부 /* This ex.. 2023. 9. 27. 이전 1 다음
