변혁적인 삶

🚀 [Next.js] Tailwind CSS: 개념, 설치, 사용 방법, 예시모든 프로젝트는 Windows 환경에서 진행됩니다.목차Tailwind CSS란?Next.js에서 Tailwind CSS 사용하기 설치 방법Tailwind 사용 예시Tailwind CSS를 사용하는 이유Tailwind CSS를 사용하는 상황기존 CSS vs Tailwind CSS마무리Tailwind CSS란?Tailwind CSS는 유틸리티 기반의 CSS 프레임워크입니다. 다른 CSS 프레임워크(예: Bootstrap)와 달리, 미리 정의된 UI 컴포넌트 대신 클래스를 사용하여 스타일을 빠르게 적용할 수 있습니다. Tailwind는 "원하는 스타일을 빠르게 적용할 수 있게 돕는 유틸리티 클래스"를 제공하여 HTML 태그에 일일이..

🚀 [Next.js] Middleware(미들웨어)모든 프로젝트는 Windows 환경에서 진행됩니다.목차Next 프로젝트에서 미들웨어란?middleware.ts 파일 위치파일 구조 예시주의사항미들웨어 적용 경로 설정(matcher)middleware.ts의 역할middleware.ts 예시예시 코드 설명middleware 사용법정리Next 프로젝트에서 미들웨어란?미들웨어(middleware)는 Next.js에서 요청(request)과 응답(response) 사이에 실행되는 중간 처리 로직을 담당하는 파일입니다.이 파일은 사용자가 페이지에 접근하기 전에 필요한 작업을 수행할 수 있는 중요한 역할을 합니다.middleware.ts 파일 위치Next 프로젝트에서 미들웨어는 Next.js 프로젝트의 최상위(r..

🚀[Next.js] 3. 프로젝트 폴더 구조모든 프로젝트는 Windows 환경에서 진행됩니다.목차개요ComponentContainerUtilstypes마무리Next.js 시리즈 [Next.js] 1. 설치 및 환경 구성🚀 [Next.js] 1. 설치 및 환경 구성모든 프로젝트는 Windows 환경에서 진행됩니다.Next.js란?Next.js는 React 기반의 오픈 소스 웹 개발 프레임워크입니다.서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSrevolutionarylife.tistory.com [Next.js] 2. 프로젝트 실행 및 구조🚀 [Next.js] 2. 프로젝트 실행 및 구조모든 프로젝트는 Windows 환경에서 진행됩니다.목차Next.js 시리즈개요프로젝트 실행프로젝트 구조(1..

🚀 [Next.js] 2. 프로젝트 실행 및 구조모든 프로젝트는 Windows 환경에서 진행됩니다.목차Next.js 시리즈개요프로젝트 실행프로젝트 구조(1)Next.js 시리즈 [Next.js] 1. 설치 및 환경 구성🚀 [Next.js] 1. 설치 및 환경 구성모든 프로젝트는 Windows 환경에서 진행됩니다.Next.js란?Next.js는 React 기반의 오픈 소스 웹 개발 프레임워크입니다.서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSrevolutionarylife.tistory.com [Next.js] 2. 프로젝트 실행 및 구조🚀 [Next.js] 2. 프로젝트 실행 및 구조모든 프로젝트는 Windows 환경에서 진행됩니다.목차Next.js 시리즈개요프로젝트 실행프로젝트 구조(1..

🚀 [Next.js] 1. 설치 및 환경 구성모든 프로젝트는 Windows 환경에서 진행됩니다.목차Next.js란?Next.js 프로젝트 시작하기Node 설치 방법create-next-app 설치Next.js 프로젝트 생성참고Next.js 시리즈 [Next.js] 1. 설치 및 환경 구성🚀 [Next.js] 1. 설치 및 환경 구성모든 프로젝트는 Windows 환경에서 진행됩니다.Next.js란?Next.js는 React 기반의 오픈 소스 웹 개발 프레임워크입니다.서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSrevolutionarylife.tistory.com [Next.js] 2. 프로젝트 실행 및 구조🚀 [Next.js] 2. 프로젝트 실행 및 구조모든 프로젝트는 Windows 환경에..