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

TailwindCSS가 v4로 올라오면서 전반적인 설정 방식부터 유틸리티 클래스 커스터마이징 방식이 달라졌습니다. 특히 "CSS-first" 접근 방식은 기존 v3 사용자라면 익숙한 설정 방식과 완전히 다르기 때문에, 처음 마주하면 당황스러운 경험을 할 수 있습니다.저도 새로운 레파지토리를 세팅할때 달라진 방식을 경험하면서(CSS만으로 유틸리티를 커스터마이징 하는 법) v4에 적응했던 경험을 공유해보고자 합니다.  tailwindCSS v3 vs v4 뭐가 달라졌을까 1. JS에서 CSS로기존 v3까지는 tailwind.config.js 혹은 .ts 파일을 만들어 테마 값을 확장하거나 플러그인을 추가했습니다. 하지만 v4는 이 설정 자체를 CSS 파일 안에서 직접 정의할 수 있습니다. 예전처럼 JS 파일..

요즘 개발자들 사이에서 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 기능으로 무한스크롤을 구현할 수 있다는 아이디어를 얻었다.  아이디어 고민 무한스크롤 적용이 필요한 페이지는 이미지와 같이 가..

페이지 새로고침 시 빈화면이 나타남SSR 페이지를 개발했을때, 새로고침을 하면 전체 HTML이 없어졌다가 나타나는 현상을 발견했다. ssr 페이지라서 HTML을 모두 전달받고나서 화면을 뿌려주는 원리인건 알겠는데, 사용자 경험(UX)측면에서 무언가 별로였다. 별로야.  그래서 다른 서비스들은 ssr페이지를 새로고침하면 어떻게 처리되는지 레퍼런스들을 찾아봤다. 내가 개발 중인 페이지처럼 빈화면을 잠깐 보여주는 곳도 있었고, 로딩 스피너 UI를 나타내는 웹사이트들도 있었다. 로딩 스피너를 넣을까?처음엔 당연히 첫 화면에서에서는 스켈레톤 UI를 적용하는 것은 무의미하니, "로딩스피너 UI를 넣어야겠다"라고 생각했다. 그런데 여러 웹사이트들을 살펴보면서, 웹앱 형태로 제작된 사이트들은 로딩 스피터를 사용하는 것..

리덕스와 zutstand 전역 상태 라이브러리에 대해서 알아보던 중에 두 라이브러리 모두 Flux 패턴이라는 공통점이 있었습니다. 이런 전역 상태 라이브러리들도 패턴들이 다양한 것으로 알고 있는데, 나중에 프로젝트의 특성에 맞게 알맞는 라이브러리를 도입하면 좋겠다 생각했습니다!  Redux 혹은 Zustand 를 사용하는데 Flux 패턴이라는 중요한 개념을 모르고 사용하는 것도 좀 아닌것같고,, 내가 면접관이라면 물어볼 것 같기도 하다...  Flux 패턴Flux 패턴은 메타(Meta)에서 2014년 페이스북 F8 컨퍼런스 MVC 모델의 단점을 보완하기 위해 등장한 아키텍처입니다. Flux 패턴은 단방향 데이터 흐름으로 애플리케이션의 상태를 관리하는 방식입니다. 간단하게 먼저 말하자면, Flux 패턴은 ..

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

프론트엔드 개발자의 폴더구조.. 개발을 처음 시작했을때 강사분이 추천하는 Container / Presenter 패턴을 스터디하고 첫 프로젝트를 시작했는데, 하나의 패턴만 알고 있어서 불편함을 느끼지 못하고 이것이 가장 깔끔한 패턴인 줄 알았다. 그렇게 두번째 프로젝트에 나보다 경험이 더 있는 친구가 프론트 리드를 맡고 그 친구의 스타일을 따라가다 보니 전의 폴더 구조 패턴이 본인에게 맞지 않고, 비효율적이라고 느꼈다. 그 계기로 계속해서 시야를 넓히려고 노력중이고, 현재는 사수 개발자가 없으니 많은 글들과 코드를 보려고 하고 있는 것 같다. 현재 진행중인 프로젝트가 릴리즈 후 회고를 통해 문제점을 인식했고, 개선하려는 과정때문에 한동안 프론트엔드 개발이 중단되었는데, 혼자 관리하는 코드이고, 코드를 최..

블록체인 NFT 토큰게이팅 관련 프로젝트를 진행중 MetaMask를 통해서 로그인을 구현한 방법을 리마인드하고 코드리뷰와 개념정리를 할 겸 블로그 글로 남겨보려고 합니다. web3.js와 MetaMask를 연동하면 사용자가 웹 어플리케이션에 안전하게 로그인할 수 있습니다. 이번 포스팅에서는 MetaMask와 web3.js를 연동하는 방법과 이를 통해서 로그인 기능을 구현하는 전체적인 과정을 살펴보도록 하겠습니다. 사전준비사항시작하기전에 진행한 코드의 환경과 준비사항은 다음과 같습니다. 1. Next.js 프로젝트 환경2. MetaMask를 브라우저에 설치.3. web3.js 자바스크립트 라이브러리를 프로젝트에 설치 MetaMask와 Web3 연동 1. useEffect 훅을 활용해 Web3 초기화 및 M..