분류 전체보기130 Next.js 프로젝트 tailwind.config 파일 생성하기 Next.js프로젝트를 설치해도 tailwind.config.js는 자동으로 생기지 않기 때문에 Tailwind는 별도로 설정해줘야 합니다 ✅ Next.js에서 Tailwind CSS 설정 순서1. Next.js 프로젝트 생성npx create-next-app 프로젝트 이름2. Tailwind CSS 설치npm install -D tailwindcss postcssnpx tailwindcss init -p //tailwind.config 파일과 postcss.config 파일 생성 npx tailwindcss init : tailwind.config.js 만 생성함npx tailwindcss init -p : tailwind.config.js + postcss.config.js 같이 생성 2025. 4. 18. 실시간 기능을 구현할 때 대표적인 기술 스택들 보통은 Socket.IO + Redis 조합을 가장 많이 사용합니다.간단하고 확장 가능하며, 서버 내에서 유연한 로직 처리가 가능하기 때문이에요. ✅ 백엔드 개발자가 많이 사용하는 실시간 서버 기술1. Socket.IO (Node.js)가장 대중적인 웹소켓 라이브러리실시간 채팅, 알림, 위치 공유 등 다양한 기능 구현에 적합Express.js 등과 함께 많이 사용클라이언트와의 연결 상태 추적, 재연결 등 부가기능도 많음프론트엔드 + 백엔드 모두 JavaScript로 통일 가능하다는 장점2. WebSocket API (Raw / low-level)브라우저가 기본 제공하는 WebSocket 인터페이스 사용Socket.IO보다 더 가볍고 낮은 수준모든 프로토콜 구현을 수동으로 다뤄야 해서 복잡도는 ↑3. Re.. 2025. 4. 18. youtube PC 버전 한곡 반복재생 (연속재생) 하는 법 모바일에서는 쉽게 찾았는데 PC버전에서는 반복 재생 버튼이 아무리 찾아도 안보이길래...어딨지 한참 찾았는데 화면에 마우스 오른쪽 클릭하면 나타난다!!얏호 2025. 4. 16. npm i vs pnpm add의 차이점 항목npm ipnpm add패키지 매니저npmpnpm설치 속도보통훨씬 빠름 (캐싱 기반)디스크 사용량높음 (중복 패키지 저장)낮음 (하드링크로 재사용).npmrc나 lock파일 반영package-lock.jsonpnpm-lock.yaml내부 알고리즘node_modules 구조.pnpm 내부 DB 기반프로젝트 간 공유❌ 안 됨✅ 글로벌 저장소 공유 가능 지금 pnpm을 쓰고 있다면 항상 pnpm add, pnpm install, pnpm remove 등 pnpm 명령어만 써야함! 그럼 pnpm 쓰고 있는데 npm i 하면 어떻게 돼?가능은 해. 실행도 잘 돼.하지만 🔥 lock파일이 충돌날 수 있음!예를 들어:pnpm-lock.yaml + node_modules → pnpm 방식으로 설치됨npm i 실행.. 2025. 4. 15. nextjs preload 에러 발생 이유 및 해결 The resource http://localhost:3000/_next/static/css/app/layout.css?was preloaded using link preload but not used within a few seconds from the window's load event.Please make sure it has an appropriate as value and it is preloaded intentionally. 이 에러 메시지는 Next.js (또는 일반 웹 앱)에서 CSS 리소스를 preload했는데, 실제로는 안 썼다는 경고야.preload한 CSS가 몇 초 안에 쓰이지 않았다는 브라우저 경고 "너 link preload로 CSS를 미리 불러오긴 했는데, 실제로 그 CSS는 .. 2025. 4. 15. [CSS] tailwind에서 4배수 디자인 단위를 권장하는 이유 일관성, 협업, 퍼포먼스, 유지보수… 관점에서 장점이 많기 때문이다.4px 단위는 웹디자인계의 황금 비율 같은 존재. ✅ 1. 디자인 일관성을 유지하기 위해 (Design Consistency)4의 배수 단위로 레이아웃과 컴포넌트를 정리하면, 간격이 들쑥날쑥하지 않고 시각적으로 안정적이야.이는 디자인 시스템에서 흔히 말하는 Spacing Scale 개념이야.📏 Tailwind의 기본 spacing scale: 0.5rem (2px) 간격p-1 → 0.25rem (4px), p-2 → 0.5rem (8px), p-4 → 1rem (16px), ... ✅ 2. 디자인 시스템 & 개발 협업이 쉬워짐디자이너와 개발자가 공통된 단위로 소통할 수 있음.디자이너가 "여기 padding 16px 줄게요" 하면 개발자.. 2025. 4. 13. 이전 1 2 3 4 5 ··· 22 다음
