0279 · FE8월 16일
[Next.js] Next.js 15와 Tailwind CSS v4: 더 이상 tailwind.config.ts는 필요 없다
들어가며 Next.js 15와 Tailwind CSS v4가 나오면서 가장 큰 변화 중 하나는 설정 방식이다. 이제는 더 이상 tailwind.config.ts 파일이 필수적이지 않고, CSS-first 접근 방식으로 globals.css에서 직접 …
FE · CSS · 웹개발
#FE
9월 0장 · 통산 515장
- 0263 · FE8월 3일[Next.js] Next.js 15 + TailwindCSS 적용 시 마주한 문제와 새로운 설정 방식 (2025 최신 정리)시작하며 Next.js 15에서는 TailwindCSS를 도입하는 방식이 예전과 다르게 바뀌었다. 특히, 프로젝트 초기화 시 tailwind.config.js 파일이 생성되지 않거나, globals.css 파일이 예전처럼 구성되지 않는 점에서 많은 …FE · 웹개발 · 프론트엔드
- 0262 · FE8월 2일[Next.js] TailwindCSS v4에서 CSS 변수로 커스텀 유틸리티 만들기오프닝 TailwindCSS를 사용하다 보면 “우리 프로젝트만의 색상, 폰트, 여백” 등을 디자인 시스템처럼 통일해서 쓰고 싶을 때가 많다. Tailwind v4에서는 CSS 변수를 활용해서 커스텀 유틸리티 클래스를 만드는 방식이 굉장히 자연스럽고 …FE · CSS · 웹개발
- 0261 · FE8월 2일[Next.js] Next.js 기반 프로젝트에 소셜 로그인 붙이기 (NextAuth 실전 가이드)오프닝 Next.js 기반 프로젝트에서 소셜 로그인을 사용하고 싶었다. Next.js에서는 자체적인 Auth기반 패키지를 지원하고 있고, 이를 통해 보다 간편하게 소셜 로그인을 구현할 수 있었다. 오늘은 Next.js 기반에서 소셜 로그인을 Next…FE · 웹개발 · 프론트엔드
- 0259 · FE8월 1일[React] React 프로젝트에 Vercel + GitHub Actions로 CI/CD 구축하기시작하며 지난 번에는 CI/CD에 대한 개념을 배웠다면, 이번에는 Vercel과 GitHub Actions를 활용해 CI/CD를 구축한 전체 과정을 기록해보려고 한다. Github Actions를 활용한 CI/CD 파이프라인 구축에 대해 이론적으로 …FE · 웹개발 · 프론트엔드
- 0252 · FE7월 26일[Next.js] CSR과 SSR — Next.js에서의 개념과 실제 사용 방법Next.js는 React 기반 프레임워크로, CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 모두 지원한다. 단순히 개념만 아는 게 아니라, Next.js에서는 이걸 어떻게 구현하는지가 핵심이다.…FE · 웹개발 · 프론트엔드
- 0251 · FE7월 26일[Next.js] Next.js에서 Hydration 에러가 발생한 이유와 해결 과정문제 상황 Next.js에서 모바일 햄버거 메뉴를 만들던 중 아래와 같은 에러가 발생했다. Error: Hydration failed because the server rendered HTML didn't match the client. 처음에는 단…FE · 웹개발 · 프론트엔드
- 0250 · FE7월 25일[Next.js] Next.js + Netlify에서 10MB GIF → 160KB MP4로 바꾸기 (feat. ffmpeg)1. 문제 상황 소개 Next.js 기반의 개인 프로젝트에서 move.gif 애니메이션을 사용했다. 처음에는 잘 작동하는 듯했지만, Netlify에 배포하고 Lighthouse 성능 점수를 확인해보니 로딩 시간 지연과 성능 저하가 발생했다. 용량: …FE · 웹개발 · 프론트엔드
- 0208 · FE7월 1일[React] 성능 잡는 Hook! useMemo, useCallback, 그리고 React.memo 정리 끝판왕React.memo : 컴포넌트 자체를 메모이제이션하여 props가 바뀌지 않으면 다시 렌더링하지 않도록 한다. 1) 사용하는 경우 부모 컴포넌트가 자주 렌더링되는데, 자식 컴포넌트의 props가 변하지 않는 경우 불필요한 리렌더링 방지 목적 2) …FE · 웹개발 · 프론트엔드
- 0197 · FE7월 1일[Next.js] 실무에서 쓰는 Next.js 구조 설계 – src, app, features, components프로젝트가 커질수록 이런 경험, 한 번쯤은 해봤을 것이다. app/, components/, utils/ 안에 파일이 정체 불명의(name.conflict)처럼 쌓이다 보니 "이걸 어디에 넣어야 하지?" 며 5분을 검색하게 된다. 누구나 겪는 이 문…FE · 웹개발 · 프론트엔드
- 0169 · FE6월 4일디자인은 디테일에 있다, ::after를 활용한 밑줄 애니메이션가운데에서 퍼지는 밑줄 효과, ::after로 만드는 동적인 스타일링 React 프로젝트에서 메뉴 탭이나 버튼과 같은 인터랙티브한 UI를 만들 때, 사용자의 선택을 시각적으로 명확하게 표현해 주는 것은 중요하다. 그 대표적인 방식 중 하나가 bord…FE · CSS · 웹개발
- 0167 · FE6월 4일React 코드의 완성도를 높이는 PropTypes와 ESLint의 만남React로 프로젝트를 진행할 때, ESLint가 아래와 같은 경고를 띄울 때가 있다. 'react/prop-types': 'desc' is missing in props validation 이 글에서는 이 경고가 왜 발생하는지, 그리고 어떻게 해결…FE · 웹개발 · 프론트엔드