목적 저번 포스팅에서, RSC 를 다루기 이전 CSR -> SSR 을 혼합하게되는 배경을 간단히 다루어보았다. 이 내용을 이해해야, 왜 RSC 가 등장했는지 이해할 수 있을 것 같았다. 이번 포스트에서는 RSC 를 통해 CSR + SSR 을 결합하면서 얻는 장점을 살펴보자. FCP, TTI, LCP RSC 를 이용하면서 얻을 수 있는 장점...

목적 @gather_here 의 검색 결과 페이지를 새로 구축하면서, 서버 사이드 컴포넌트를 적용해보려고 시도 중이다. 최소한 상황에 따라 더 유리한 선택지가 있을 텐데, 무분별하게 "use client"를 도배하는 행동은 그만해야할 것 같았기 때문이다. 따라서 서버 vs 클라이언트를 선택할 나만의 기준 정도는 세워야하지 않을까 싶어서 도전하기로 ...

문제 상황 오류 현상을 정리한 JIRA 이슈 지금 현재 구현되어있는 검색 기능은 직관적이지 않다. 헤더에 존재해서 어디에든 검색이 가능하지만, 정작 메인페이지를 제외하고는 검색 기능이 동작하지 않는 것이다. 실제 검색 창에서 검색을 해보자. 검색어가 없을 때는 url 에 변화가 없다. 검색어가 있는 경우에는 url 에 query str...

타입스크립트 교과서 교재를 통해 제대로 익히고 넘어가기로 마음을 먹었다. 간단히 시작해보자. TypeScript 란? TypeScript is JavaScript with syntax for types 어디까지나 타입스크립트는 자바스크립트다. 자바스크립트에 타입을 위한 구문이 추가되어있는 것, 이게 전부다! 간단히 예시로 살펴보자. c...

목적 이전에 @gather_here 프로젝트를 진행할 때, Github Oraganization 을 통해 협업을 진행했다. 하지만, 이 팀 프로젝트를 Vercel 로 배포하려고 하니 Pro 요금제를 사용해야만 가능하다는 것이었다. 개인 repo 로 fork 한 뒤 sync 를 맞추는게 귀찮기도 했고, 여러 명이 같이 작업하니 그냥 Pro 요금제를 ...

layout.tsx 를 이용해 컴포넌트 마운트 수 줄이기 전반적인 리팩토링을 진행했다. 먼저 Chat, Calender 컴포넌트가 페이지 이동마다 새로 마운트 되고 있는 것이 비효율적이라 생각했다. 그래서 useEffect 를 통해 페이지 이동 마다 mount 되는 것을 확인했다. 내가 담당한 Sidebar 영역도 하나의 컴포넌트로 만들어 코드를...

오늘은 간단하다. 오류를 고치느라 시간을 많이 썼는데, 그 중에서 좀 적을 만한 게 있었다. useEffect(() => { // 채팅 내역 불러오기 const getAllMessages = async () => { const { data, error } = await supabase .from("Messages...