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

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

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

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

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

개인적으로 공부하고 직접 프로젝트에 적용해보고 싶은 기능이 있습니다. 바로 'nextjs의 경로 가로채기'였습니다. 대부분의 모달의 경우 URL이 부여되지 않고 있고, 현재 페이지위에서 모달창을 띄우는 방식을 사용합니다. 인기있는 웹사이트의 모달만 봐도 그렇습니다. 하지만 이러한 모달에 경로 가로채기 개념을 적용한다면 이는 사용자 경험(UX)를 크게 향상하는 방법이라고 생각이 들었습니다.. 그래서 본인의 프로젝트 링킷에도 경로 가로채기 개념을 도입해보고자 생각이 들었습니다. 이에 대한 기대효과로는 추후에 사용자가 선택한 값이 새로고침을 해도 풀리지 않고, 링크를 복사해서 다른 사용자에게 공유까지 할 수 있다는 장점이 있습니다. NextJS에서 경로 가로채기(Intercepting Routes)에 대한 개..

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