코치님이 말씀해주신 "메모이제이션을 한 번 적용하기 시작하면 연달아 적용해야 한다"는 말이 정말 와닿았다. React.memo를 컴포넌트에 적용하면, 그 컴포넌트로 전달되는 props들도 모두 메모이제이션해야 한다는 뜻이다.처음에는 왜 이렇게 복잡하게 해야 하나 싶었는

SSR, SSG, Hydration 개념 정리 [SSR, SSG, CSR 이해하기] SSR (Server-Side Rendering) 정의: 서버에서 HTML을 미리 생성하여 클라이언트에 전달하는 렌더링 방식 특징: 서버에서 완전한 HTML을 생성하여 전송 초기

SPA(Single Page Application) 시대를 연 대표적인 방식입니다.처음에는 빈 HTML만 내려주고, 브라우저가 큰 JS 번들을 받아와 DOM을 생성합니다.✅ 장점: 페이지 이동이 빠르고 동적인 UX 구현에 강함❌ 단점: 초기 로딩 속도가 느리고 SEO에

이번에 캘린더 애플리케이션을 구현하면서 TDD(Test-Driven Development)를 처음 제대로 경험해봤다. 그동안 테스트는 '개발이 끝난 후에 하는 것'이라고 생각했는데, 이번 과제를 통해 테스트가 단순히 버그를 찾는 도구가 아니라 설계를 개선하는 방법론이라

이번 과제를 진행하면서 "왜 이런 설정들이 필요한가?"라는 근본적인 질문부터 시작했다.Mock에 대한 고민과 깨달음처음에는 "왜 실제 함수를 쓰지 않고 가짜를 만드는거지?"라는 의문이 들었다. 하지만 실제로 사용해보니:toastFn: 실제 토스트를 표시하면 테스트 환경

이번 주 주제 클린코드 원칙과 리액트 컴포넌트 리팩토링 회사에서 업무를 하면서 항상 내가 짠 코드에 대해 생각을 했다. 더 가독성 있게 짤 수는 없을까? 성능을 더 높일 수 있는 코드를 작성할 수 있지 않을까? 내 코드에 대해 리뷰를 받을 수 있는 환경도 아니었고, 더

이번 주 주제 📖 과제의 핵심취지 React의 hook 이해하기 함수형 프로그래밍에 대한 이해 액션과 순수함수의 분리 배운 내용 정리 📚 이번 주차는 React Hook에 대해 깊이 있게 학습하고, 함수형 프로그래밍의 핵심 개념들을 실제 코드로 구현해보는 시간이

회사에서 업무를 하면서 항상 내가 짠 코드에 대해 생각을 했다.더 가독성 있게 짤 수는 없을까? 성능을 더 높일 수 있는 코드를 작성할 수 있지 않을까?내 코드에 대해 리뷰를 받을 수 있는 환경도 아니었고, 더 좋은 코드가 있을 거 같은데... 생각하면서도 AI한테 물

Exported on 2025. 8. 6. at 1시 29분 0초 GMT+9 from Cursor (1.3.9)User나는 리액트 초보고 너는 교수님이야. 너는 이해 못하는 나에게 이해할 수 있도록 설명해줘야해. 내가 products.ts에 Products 상수를 ex

일단, 나는 타입스크립트를 써본 적이 없어서 문법 자체들이 너무 생소했다. 그리고 리액트 훅에 대해서도 useRef, useState 등 만 써봤지.. 메모이제이션 관련해서 왜 사용하고, 어떻게 동작하는지도 몰랐다.....회고 마저 쓸게요,,,, 일단 링크만 올리기..

useSyncExternalStore는 React 18에서 도입된 외부 저장소(state)의 변화를 React 컴포넌트에서 정확하고 일관성 있게 구독하기 위해 만든 훅이다.외부 상태와 React 렌더링 사이의 시점을 정확히 동기화해서,버그 없이 일관된 UI를 만들 수

2주차 과제를 진행하면서 배운 것들 1️⃣ VirtualDOM? Virtual DOM은 실제 DOM과 똑같은 구조를 가진 메모리 상의 가상 트리다. 주로 React, Vue 등의 프레임워크에서 사용되며, 실제 DOM을 직접 조작하는 대신 Virtual DOM을 이용해

이번 과제에서는 SPA(Single Page Application) 구조를 설계하는 과정에서 많은 어려움을 겪었다. 특히 SPA의 전반적인 구조를 어떻게 구성해야 할지에 대한 감이 전혀 잡히지 않았다.라우팅 시스템을 직접 구현해야 했기 때문에 라우터에 대한 개념이 부족