반응형 멋쟁이사자처럼후기71 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 93 (CSR vs. SSR, Next.js, 라우팅 기본) 목차CSR vs. SSRNext.js라우팅 기본오늘 하루를 돌아보며 CSR vs. SSRCSR(Client Side Rendering)은 클라이언트 측에서 렌더링이라는 뜻으로, 사용자가 웹사이트에 접속하면 서버가 기본적인 HTML과 자바스크립트 파일을 전달하고, 브라우저가 자바스크립트를 실행해서 클라이언트(사용자 컴퓨터)에서 화면을 동적으로 렌더링하는 방식이다. SSR(Server Side Rendiring)은 서버 측에서 렌더링이라는 뜻으로, 사용자가 웹사이트에 접속하면 서버(Node.js 등)가 사전에 HTML을 만들어 클라이언트(브라우저)에 전달한다. 구분SSR(서버 사이드 렌더링)CSR(클라이언트 사이드 렌더링)렌더링 위치서버에서 HTML 생성브라우저에서 JavaScript로 렌더링초기 로딩빠름(.. 2025. 9. 19. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 92 (리액트 액션, useActionState 훅, useOptimistic 훅) 목차리액트 액션useActionState 훅useOptimistic 훅오늘 하루를 돌아보며 리액트 액션액션(Action)은 리액트 19에서도입된 새로운 비동기 작업 처리 방식이다. 폼이나 버튼 등에서 서버와 데이터를 주고받는 작업을 더 쉽고 안전하게 구현하도록 설계되었다. 기존에 비동기 작업을 처리할 때 직접 loading, error, data 상태를 관리해야 해서 코드가 복잡해지고 실수할 여지도 많았는데, 액션이 도입되면서 폼의 action 속성에 액션 함수를 직접 전달할 수 있게 되었다. 액션 함수는 폼 데이터(FormData)를 받아 비동기 작업을 처리한다. 리액트가 자동으로 로딩, 에러, 완료 상태를 관리해 줘서 이제는 핵심 로직에만 집중하면 된다. 액션은 폼(Form)에 자주 사용된다. 전통적.. 2025. 9. 19. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 91 (useDeferredValue 훅, useTransition 훅, use API(함수)) 목차useDeferredValue 훅useTransition 훅use API(함수)오늘 하루를 돌아보며 useDeferredValue 훅useDeferredValue는 값의 변경을 지연시켜 UI 반응성을 높여주는 훅이다. 예를 들어, 검색창에 글자를 입력할 때마다 무거운 연산이 필요한 컴포넌트를 렌더링할 때 버벌일 수 있는데, 이럴 때 useDefferedValue 훅을 사용하면 입력값이 즉시 반영된다. 리스트 렌더링은 살짝 느리게(지연)해서 사용자는 부드럽게 입력할 수 있고, 리스트는 천천히 업데이트돼서 전체 앱의 반응성이 좋아진다. 아래 예시와 같이 검색 입력과 필터링에 오랜 시간이 소요되는 리스트 렌더링의 UI 반응성을 향상시킬 수 있다. 입력값 등 즉각적으로 반영되어야 하는 UI와 해당 값에 의존.. 2025. 9. 16. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 90 (Suspense 바운더리, 코드 분할(React.lazy)) 목차Suspense 바운더리코드 분할(React.lazy)오늘 하루를 돌아보며 Suspense 바운더리Suspense는 리액트에서 비동기 데이터 로딩 상태를 쉽고 자연스럽게 관리할 수 있게 하는 기능이다. 기존에는 데이터를 불러올 때마다 isLoading과 error 같은 상태 변수를 만들고 조건문으로 로딩 UI와 에러 UI를 직접 관리해야 했다. 하지만 Suspense를 사용하면 동기 코드처럼 자연스럽게 비동기 데이터를 처리할 수 있고, 로딩 상태 관리 코드를 일일이 작성하지 않아도 돼서 컴포넌트가 훨씬 간결해진다. Suspense는 리액트에서 기본적으로 제공하지만, 비동기 데이터 처리를 위해서는 Suspense를 지원하는 라이브러리나 프레임워크가 필요하다. 대표적으로 Next.js나 TanStack.. 2025. 9. 16. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 89 (개발 도구(Profiler), 컴포넌트 메모이제이션, 대용량 데이터 렌더링) 목차개발 도구(Profiler)컴포넌트 메모이제이션대용량 데이터 렌더링오늘 하루를 돌아보며 개발 도구(Profiler)리액트 개발 도구에 내장된 프로파일러(Profiler) 탭이 있다. 프로파일러는 리액트 앱의 실제 렌더링 성능을 측정하고 어떤 컴포넌트가 얼마나 자주, 왜 렌더링되는지 시각적으로 분석할 수 있게 도와준다.Flame Chart: 컴포넌트 계층 구조와 각 컴포넌트의 렌더링 시간을 시각적으로 보여준다. 상위 컴포넌트에서 하위 컴포넌트로 내려가는 구조다.Rank Chart: 렌더링에 가장 많은 시간이 걸린 컴포넌트를 순서대로 보여준다. 선능 병목 지점 파알에 유용하다.Timeline: 앱의 렌더링 이벤트를 시간 순으로 보여준다. 각 이벤트의 상세 정보(시작, 끝, 소요 시간 등)를 확인할 수 있.. 2025. 9. 12. 이전 1 2 3 4 ··· 15 다음 반응형
