개발하고 있는 프로덕트에서는 페이지 간 이동을 위해 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 패턴은 ..

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

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

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

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