현재 일하고 있는 곳에서 테이블 최적화 작업을 진행하고 있는데, 진행하면서 알게 된 리스트 가상화와 윈도잉, 그리고 React Virtuoso를 활용한 최적화 전후 비교 사항을 작성해봤습니다.

모던 리액트 Deep Dive에서 React의 렌더링 과정을 공부하고, 기존 브라우저 렌더링과의 차이점을 알아보고, React의 렌더링의 핵심인 Fiber에 대해서 공부해봤습니다.

서버 컴포넌트가 어떤 식으로 렌더링이 되고, 그래서 이를 사용 시에 어떤 이점을 볼 수 있는지를 정리해봤습니다.

서버 컴포넌트가 무엇인지 이해하기 위해 그 탄생하기까지의 과정을 참고해서 정리해봤습니다.

커스텀 훅은 대체 어떻게 써야 좋은 걸까? 면접 때도 그렇고, 프로젝트를 할 때도 그렇고 스스로에게 던지는 좋은 커스텀 훅이란 무엇인가에 대한 질문을 던지면 뚜렷한 답이 나오지 않는다. 실제로도 커스텀 훅에 대해서 고민해보고, 관련한 방법들을 찾아…

만능 Input은 죄악이다. ‘준비물 챙겼어’에서 Input 컴포넌트 자체에 여러 가지 기능이 다 담긴 만능 Input 컴포넌트를 만들려고 했었다. 그러나 점점 기능들이 다양하고, 엮어있는 컴포넌트들이 다양해지면서 코드가 점점 스파게티가 되어가고 나중가서는 …

서문 Next.js를 공부하면서 초반에 가장 많이 본 에러 중 하나가 바로 Hydration Error이다. 클라이언트 컴포넌트에 ‘use client’를 입력하지 않아서 종종 이런 에러들을 보곤 했는데, 돌이켜보니 이런 에러들을 해결하기에만 급급했지 대체 hydration이 뭐…

❓ 면접에서 많이 물어보던 useEffect와 useLayoutEffect 얼마 전에 진행했던 과제에서도 그렇고, 이따금씩 면접에서도 이 둘에 대한 질문이 들어올 때가 있었다. 얼마 전까지는 단순히 면접 때문에 이를 외우고 있었다가, 과제에서의 리뷰에서 React에서는 u…

과제에서의 경험 얼마 전, 제의를 받은 회사에서 과제를 했던 적이 있었다. 그 과정 속에서 Next.js로 CORS 정책에 따른 문제를 해결하던 적이 있었는데, 추후에도 이와 관련해서 같은 경험을 겪을 거라 생각했다. 그래서 이참에 CORS에 대해서, 그리고 COR…

⚠️ Next.JS 프로젝트에서 Vercel 배포 중에 발생한 이슈 어제, 너굴의 숲 행사 관련으로 3시간 정도 급하게 프로젝트를 만들었던 적이 있었는데 막판에 Vercel로 배포했더니 계속해서 실패하는 이슈가 있었다. 어떤 이슈였을지 파악해보니 다음과 같은 배포 …

나는 useState를 이해하고 있나? 문득 그런 생각이 들었다. 그런 생각이 들었던 건, 예전의 예차니즘 님께서 말씀하신 그 말이 떠올라서였는데.. 클로저에 대해서 물어볼 때, useState가 왜 클로저인지를 말할 수 있어야 한다는 그 말씀. 되게 기억에 남아…

⚠️ 이슈가 들어왔다. 이번에 작업한 업무와 관련하여 QA 팀과 디자인 팀에서 속도 개선에 대한 건의 사항이 들어왔다. 이번에 작업한 내용 중에 follow와 unfollow를 하는 페이지가 있는데, 이미 있는 기능을 그대로 가져와 쓰고 있는 데다 해당 기능은 누를…

부트캠프에서 프로잭트를 진행했을 때, 상태 관리툴로 Redux Toolkit을 사용했다. 그러나 그 당시에는 미들웨어의 역할이 무엇이고, 왜 쓰는지. 그리고, 그냥 fetch나 axios 통해 연결하고 쓰면 되는게 아닌지. 프로젝트를 진행하는 과정 내내 그런 생각이 …