본문 바로가기

전체 글

 (44)
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 툴을 사용할 때, “접혀 있다..
HTTP에서 HTTPS로: 인증서, 암호화, 그리고 송수신의 비밀 안녕하세요 :) 웹사이트에 접속할 때 우리가 흔히 보는 주소는 http:// 또는 https://로 시작합니다. 겉으로 보기엔 단지 s 하나의 차이지만, 실제로는 보안, 암호화, 신뢰라는 관점에서 완전히 다른 세계가 펼쳐집니다.하지만 대부분의 사람들은 HTTPS가 무엇인지 정확히 알지 못한 채 "그냥 더 안전한 버전이겠지", "보안 강화..된 거 아니야..?" 정도로만 하고 넘깁니다. 심지어 개발자들 사이에서도 "왜 HTTPS가 안전한가?", "어떻게 암호화가 동작하냐?" 이런 질문에 자신 있게 대답하기란 쉽지 않습니다.그래서 이번 글에서는 HTTP에서 HTTPS로 넘어가는 과정에서 실제로 무슨 일이 벌어지는가에 대해 실제 통신 흐름, 인증서의 역할, TLS의 구조, 대칭키 생성 방식 등 아주 디테일하게..

티스토리툴바