전체 글 (45) 썸네일형 리스트형 Tailwind CSS v4 + eslint-plugin-tailwindcss 충돌 이슈에 대해 Next.js 15 + Tailwind CSS v4를 이용해 드라이브 시스템을 만들다가 tailwind css eslint 버전 충돌 이슈가 났다. 2025.06월 현재, Tailwind CSS v4는 공식적으로 eslint-plugin-tailwindcss 플로그인과 호환되지 않는 것 같아, 따로 찾아본 후 이 글을 적어 기록을 남겨놓기로 했다. 버전 충돌은 여러 번 났었지만 아직 사용하는 툴의 버전들이 호환되지 않은 적은 처음이었기에 여러 공식 커뮤니티나 문서를 찾아보는데 재미가 있었기 때문이다. 2025.01.22일, Tailwind CSS v4.0이 정식 출시되면서 v3와는 많은 게 바뀌었다. 이 글을 참고하면 좋을 거 같다. TailwindCSS v4!! v3와 달라진 점!!!!오늘은 버전 업그.. cn() 함수: 왜 모든 shadcn, radix UI 컴포넌트에 들어갈까? shadcn/ui나 Radix UI를 사용해보신 분이라면 이런 의문이 한 번쯤 들었을 거라고 생각한다.// shadcn/ui의 avatar ui 코드function Avatar({ className, ...props}: React.ComponentProps) { return ( )} "Tailwind로 UI 작업을 하다 보면 꼭 등장하는 cn()은 무슨 일을 할까?" 모든 shadcn 컴포넌트와 Radix UI 기반 라이브러리에서 이 함수를 볼 수 있다. 그리고 뭐.. 가끔 바이브 코딩하다가 AI가 cn()을 이용해 css 부분을 짜준 경험도 있을 거라고 생각한다. 그리고 cn()함수를 따라가다 보면, 이런 코드를 볼 수 있다.import { clsx, type ClassValue } f.. 왜 Next.js에서 cookies()는 비동기일까? Next.js로 개발을 하다 보면 자연스럽게 Server Component와 Client Component를 나누어 사용하게 된다.그런데 쿠키를 다룰 때마다 헷갈리는 부분이 있었는데, // Client Component에서는 이렇게'use client'export default functino ClientPage() { const cookies = document.cookie; // 동기적으로 접근 return ( { cookies } )}; // Server Component에서는 이렇게export default async function ServerPage() { const cookieStore = await cookies(.. 로컬 MySQL DB를 Railway로 마이그레이션 하기 현재 스타트업을 준비하면서 mvp를 만들고 있는데, 시연을 위해 로컬에 만들어뒀던 mysql DB를 클라우드 환경으로 옮겨야 했고, Railway를 선택했다. 왜 이전해야 했냐면, 프론트엔드와 백엔드가 통합된 Next.js 구조에서 실제 배포된 환경에서도 DB에 접근이 가능해야 했기 때문이다.mvp 개발 설계 당시 선택지로는 Neon, Supabase, Railway 등 여러 서비스가 있었지만, 나는 Railway를 선택했다. [당시 사용 기술 및 환경]Next.js (Typescript + Prisma)MySQL 9.3.0 (Homebrew)Railway (MySQL 호스팅)DBeaver (GUI 확인 도구)Terminal 왜 Railway를 선택했는가일단 설정이 매우 빠르고 직관적이다. MySQL,.. disabled 옵션은 왜 필요할까? 얼마 전 로그인 폼 코드를 작성하다가 문득 disabled 옵션은 왜 필요한 걸까? 라는 생각이 들어서, 이 속성이 가진 의미와 쓰임을 정리해보면 좋겠다는 생각이 들었다. {isLoading ? 'Loading...' : '로그인'}처음에는 단순히 버튼을 눌렀을때 함수가 실행되면 되는 거 아닌가? 굳이 클릭을 막아야 하나? 라는 의문이 들었다. 하지만 직접 구현하고 시뮬레이션하면서, disabled 옵션이 단순한 UI요소를 넘어 얼마나 중요한 역할을 하는지 알게 되었다. 1. 중복 클릭 방지: 서버에 과부하를 주지 말자사용자가 큽하게 버튼을 두세 번 연속 클릭할 경우, 동일한 요청이 서버로 여러 번 날아가게 된다. 로그인, 회원가입, 결제처럼 중요한 요청에서는 이게 매우 치명적일 수 있다.disabl.. TailwindCSS v4!! v3와 달라진 점!!!! 오늘은 버전 업그레이드가 된 TailwindCSS v4 사용법에 대해 이야기 해보려고 한다. 보통 나는 프론트엔드 개발을 할 때 Next.js + TailwindCSS를 사용한다. 이번에 우연히 새로운 프로젝트를 셋팅하게 됐는데, 이전처럼 셋팅하니 에러가 난다?⨯ ./app/globals.css Error evaluating Node.js code Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to .. C언어 배열이랑 JavaScript 배열이 다르다고? 프론트엔드 개발을 하면서 데이터를 리스트 형태로 다뤄야 할 일이 많았다. 그런데 대학생때 익숙하게 손이 가던 arr[0] =3; 식의 C배열 방식은 JS에선 뭔가 잘 안 맞는 느낌이 들었다. 처음에는 단순히 문법 차이라고 생각했지만, 쓰면 쓸수록 배열의 “본질”이 다르다는 느낌이 강하게 들었다.그래서 이번 기회에 C언어와 JavaScript배열의 차이를 파고들어 봤고, 이 글은 그 차이를 학습하고 기록한 탐구?일지이다. 배열은 정말 배열일까?우리가 흔히 아는 ‘배열’이란 무엇인가.대학교에서 배열을 배우면 보통 C언어에서 시작한다. 그럴 때 배열은 이런 느낌이다.int arr[3] = {1, 2, 3};‘크기가 고정’된 숫자 3개짜리 박스 → arr[3] 이면 3개 고정0번 인덱스부터 시작해서 인덱스를 .. 디자인 시스템, 프론트엔드 개발자는 어디까지 알아야 할까? 개발을 하다 보면 UI/UX 디자이너와 Figma를 함께 보며 의견을 나눌 일이 많다. 25년 4월 주말에 프론트엔드 개발자로 디자이너와 이야기할 기회가 생겼는데 “여기는 아코디언으로 많이들 하죠”, “px간격은 어쩌구”, “텍스트는 rem 어쩌구” 라는 말을 들었다. 그 날 얘기를 들으면서 머릿속에 물음표가 나오기도 했고, 모르는 걸 물어보면서 했는데도 내용의 100%를 이해하지 못했다. 사실 프론트엔드 개발을 하면서 px나 vh, vw는 익숙하다. ai를 쓰면서 더 익숙해진 거 같다. 그래서 rem? 듣고 본 적은 있는데 이 단위에 대해 이해하고 있지는 않았다. 또한, “아코디언”이 뭔지도 몰랐다. 햄버거 바, 버튼 정도는 알았지만, 이건 정말 처음 듣는 용어였다. AI 툴을 사용할 때, “접혀 있다.. 이전 1 2 3 4 ··· 6 다음 목록 더보기
