본문 바로가기

전체 글

 (21)
React Server Components 딥 다이브 누군가 RSC가 무엇이냐?라 묻는 질문에 대한 답을 한 번 생각해 봤습니다.그에 대한 저의 대답은 "RSC는 서버에서 렌더링 되는 새로운 컴포넌트로, 빌드 시 JSX 트리를 구성하여 HTML을 산출한다."입니다. 어떻게 이렇게 대답할 수 있을까요?  자, 우선 RSC가 일반적인 리액트 컴포넌트와 어떻게 다른지 보겠습니다. 아래는 일반적인 컴포넌트와 서버 API입니다.클라이언트가 요청을 보내면, 서버는 db에서 데이터를 찾아서 응답합니다. 클라이언트는 이 데이터를 받아서 렌더링하죠.// bundle.jsfunction Note({id}) { const [note, setNote] = useState(''); // NOTE: loads *after* first render. useEffect(() =>..
CSR부터 RSC까지 렌더링 방식의 변화 Next.js의 서버 컴포넌트와 서버 액션을 보면서 관련된 개념들이 헷갈렸습니다.그래서 그 흐름을 정리하고, 각각의 렌더링을 비교해 보겠습니다.  CSR(SPA) - 2013CSR은 브라우저에서 코드를 사용자 인터페이스로 변환하는 렌더링 방법입니다렌더링 순서클라이언트가 요청합니다.서버가 빈 HTML을 응답으로 보냅니다.클라이언트가 JS 코드를 로드합니다.클라이언트는 HTML을 생성하고, 하이드레이션 하면서 상호작용이 가능한 UI를 만듭니다.💡 하이드레이션 (hydration)비유하자면, 말라비틀어진 HTML에 상호작용이 가능하게 물을 주는 것과 같습니다.구성 요소를 렌더링 하고 이벤트 핸들러를 연결합니다.약점SEO에 적합하지 않습니다. 크롤러가 인덱싱 하기에 번들 사이즈가 크고 다운로드 속도가 느립니다..
Storybook으로 시각적 요소 테스트하기 최근 TDD를 지향하면서 단위 테스트코드를 많이 짰습니다.기능 테스트는 Jest로 큰 무리가 없었는데, UI 테스트 코드를 짤 때는 시각적으로 확인할 수 없어 답답함과 불안함이 있었습니다.UI 테스트를 어떻게 진행할지 엄두가 안 났습니다. 꼼꼼하게 하자니 생산성이 바닥을 기어갈게 뻔했고, 그렇다고 대충 하거나 안 할 수도 없는 노릇이었습니다.  레이아웃이나 색이 변경되는 걸 어떻게 테스트할 수 있을까요? 그러던 차에 NHN FE개발랩의 김동우님이 발표하신 '실용적인 프런트엔드 테스팅 전략' 유튜브 영상을 봤고, Storybook을 한번 써보기로 했습니다.  시각적 요소 테스트먼저 UI 테스트 요소에는 '시각적 요소', '구성 요소', '상호작용', '접근성', '유저 플로우'가 있습니다.이번에는 소개해 ..

티스토리툴바