최근 Tailwind CSS v4를 사용한 개인 프로젝트에서, 커스텀 태그를 활용한 동적 스타일 적용을 하던 도중에 문제를 발견했습니다. 이번 글에서는 해당 문제 상황과 해결을 위해 시도했던 방법들, 그리고 최종적으로 Tailwind CSS v4의 신규 기능인 @source inline() 디렉티브를 활용하여 문제를 해결한 경험을 공유해보고자 글을 적습니다. 또한 TailwindCSS v4 환경에서 global.css 만으로 구성하는 방법에 대해서도 간략하게 다뤄보도록 하겠습니다. 문제 상황 : 커스텀 태그로 동적 스타일 적용 실패개인 프로젝트에서 UI 텍스트 내에 , 등의 커스텀 태그들을 정의하여, 이를 React 컴포넌트에서 특정 스타일로 렌더링하는 방식을 구현하고 있었습니다. 개발자 도구를 보면..

요즘 개발자들 사이에서 MCP(Model Context Protocol)가 매우 뜨거운 주제로 떠오르고 있는 것 같습니다. 처음 MCP에 대한 정보를 접했을 때, 개발 툴 생태계가 다시 한번 뒤흔들릴 수 있겠다는 기대감이 생겼습니다. 명령어 한 줄로 AI가 실제로 디자인을 생성하고, 코드를 짜고, API를 호출하는 시대가 열리고 있다는 것이 여러 자료를 통해 실감되었기 때문입니다. 하지만 막상 관련 문서나 유튜브 영상을 찾아보니 아직까지 정보가 많지 않아 예상치 못한 에러에 익히는데 시간이 좀 걸린 것 같습니다. 그래도 이런 변화의 흐름 속에서 뒤처질 수는 없기에, 직접 MCP를 경험해 보기로 결심했습니다. 마침 개인 기술 블로그 프로젝트를 진행 중이었고, Cursor IDE와 Figma MCP 서버를 ..

개발하고 있는 프로덕트에서는 페이지 간 이동을 위해 Next.js의 태그를 사용하고 있었습니다. 이는 클라이언트 사이드 라우팅을 통해 전체 페이지를 새로고침하지 않고도 빠르고 부드러운 화면 전환이 가능하다는 장점이 있기 때문이다. 하지만 개발 도중 한가지 예상치 못한 문제를 발견했습니다. 바로 페이지를 이동할 때마다 이전 페이지의 스크롤 위치가 기억되어, 새로운 페이지가 렌더링된 후에도 스크롤이 맨위가 아닌 중간위치에 머무는 현상이 발생한 것이였습니다. 사용자의 입장에서는 갑자기 페이지가 어중간한 위치에서 열리는 듯한 인상을 받을 수 있어서, 이 문제를 무시하기는 어려웠습니다.  문제 상황 분석Next.js의 태그는 전체 페이지를 새로고침하지 않고, React 클라이언트 사이드 라우팅을 통해 필요한 컴포..

서비스를 운영하면서 사용자가 증가함에 따라 페이지네이션 처리가 필요해졌다. 현재는 서비스 사용자가 많지 않지만, 언젠가는 꼭 필요한 기능이므로 미리 구현하는 것이 좋다고 판단했다.페이지네이션 처리 고민처음에는 넘버링 페이지네이션과 무한스크롤의 선택지가 있었다. 결국에는 팀 회의를 통해서 서비스에 맞는 무한스크롤 개념을 도입하기로 결정했다.현재는 CSR 기반 페이지로 구현이 되어있다. seo 개선을 위함과 초기 페이지 로딩 속도 향상을 위해서 SSR + ReactQuery로 마이그레이션을 예정되어 있어서, 마침 react-query의 useQuery의 useInfiniteQuery 기능으로 무한스크롤을 구현할 수 있다는 아이디어를 얻었다.  아이디어 고민 무한스크롤 적용이 필요한 페이지는 이미지와 같이 가..

현재 진행중인 프로젝트 프론트 개발을 5월부터 시작하여 6개월 정도의 기간을 지속하다 보니까, 처음에 짜놓은 폴더구조에 대해서 불편함을 느끼기 시작했다. mvp 완성에 급급하여 마구잡이로 컴포넌트와 코드를 배치시켜서 다시 개발을 시작하려보니 집중이 안되는 그런느낌? 이대로 계속 가다가는 걷잡을 수 없이 지저분해질 것 같아서 우연히 봤던 기능(feature)을 단위로 모듈화하는 아키텍처 패턴이 인상적이라 적용해보고자 한다!!  FSD 아키텍처가 무엇인가Feature-sliced Design(FSD) 구조는 프론트엔드 애플리케이션을 기능(Feature) 단위로 나누어 모듈화하고, 코드의 재사용성과 유지 보수성을 높이기 위한 아키텍처 패턴이다. 기존 많이 사용되던 컴포넌트 기반 구조보다 기능과 도메인에 초점을..

React는 사용자 인터페이스를 보다 더 효율적으로 구축하기 위해 개발된 자바스크립트 라이브러리로, Facebook에서 처음 도입된 이후로 많은 기개발자들에게 사랑받고 있습니다. 리액트의 주요 특징 중 하나는 가상 DOM(Virtual DOM)을 활용한 최적화된 렌더링 기법입니다. 리액트가 어떻게 동작하는지에 대한 원리와,DOM, 가상 DOM과 그것이 브라우저 성능에 어떤 영향을 미치는지 알아보도록 하겠습니다.  DOM( Document Objext Model )이란먼저 리액트의 동작원리를 이해하기 전에 DOM이란 무엇인지부터 이해하는 것이 중요합니다. DOM은 "Document Object Model"의 약자로, 웹 사이트의 HTML, head, body 같은 태그들을 자바스크립트가 조작할 수 있도록 ..

NextJS 13버전으로 업데이트가 되면서 굉장한 변화들이 있었는데, 그 중 가장 큰 변화라고 생각이 드는 것은 앱 디렉토리(app directory)의 등장이라고 생각이 듭니다. 앱 디렉토리의 이전과 이후를 모두 경험해본 입장에서는 이후가 개발자 경험이 향상되었다고 체감이 듭니다.  NextJS 서버 클라이언트와 클라이언트 컴포넌트의 이해nextjs에는 클라이언트 컴포넌트와 서버 컴포넌트가 있습니다. NextJS 13버전의 app 폴더안에 있는 모든 컴포넌트는 기본적으로 서버 컴포넌트입니다. 개인적인 생각으로는 이 두개의 컴포넌트를 이해하고 차이를 인식하고 개발하는 것이 정말 중요하다고 생각합니다. 들어가기에 앞서 간단하게 결론부터 말하자면클라이언트 컴포넌트는 사용자 상호작용을 처리하는데 중점을 두고 ..