react19 [NextJS] SSR 컴포넌트 vs CSR 컴포넌트 (Server Component와 Client Component), 페이지 로딩 사용자 경험 문제 해결 Next.js - Server Component와 Client ComponentNext.js 13부터 app 디렉토리 구조가 도입되면서, 컴포넌트가 서버(Server) 컴포넌트인지, 클라이언트(Client) 컴포넌트인지 구분하는 것이 매우 중요해졌습니다.이 글에서는 Server Component와 Client Component가 무엇인지, 각각 어떤 특징과 장단점을 가지는지, 그리고 언제 어떤 걸 선택해야 하는지 쉽게 정리해보겠습니다.Server Component란?Next.js에서 page.tsx나 layout.tsx 컴포넌트들은 기본적으로 Server Component입니다.Server Component는 서버에서 렌더링되고, 최종 결과만 HTML로 브라우저에 전달됩니다.✅ Server Compone.. 2025. 4. 26. [NextJS] 이미지를 렌더링하는 두 가지 방법 : img vs Image 태그 비교 Next.js에서 img와 Image 컴포넌트 비교Next.js로 웹 개발을 하다 보면 이미지 태그를 삽입할 때 두 가지 선택지가 있다. 바로 HTML 기본 태그인 와 Next.js가 제공하는 컴포넌트다. 비슷해 보이지만, 두 방법은 내부 동작 방식, 성능 최적화, 사용 편의성 측면에서 상당히 다르다. Next.js를 사용하는 목적 자체가 최적화된 React 개발이기 때문에, 이미지 또한 전용 컴포넌트를 적극 활용하는 것이 바람직하다."빠르고 가벼운 웹 서비스" 를 목표로 한다면, Next.js의 를 사용하자! 1. 기본 정의 정의HTML 표준 이미지 태그Next.js 전용 고성능 이미지 컴포넌트제공 주체브라우저 표준Next.js (next/image 모듈)2. 동작 방식 태그그냥 HTML 그 자체.. 2025. 4. 26. [NextJS] 라우팅 시스템 종류 - app vs pages 디렉토링 방법 비교, 폴더 구조 예시, useRouter 오류 디버깅 Next.js에서 app 디렉토리와 pages 디렉토리는각각 다른 방식으로 페이지 라우팅을 처리하는 두 가지 방법을 제공합니다.1. pages 디렉토리import { useRouter } from 'next/router'; 사용/pages 구조 예시 index.tsx → / about.tsx → /about # 👤 사용자용 client/ dashboard.tsx → /client/dashboard profile.tsx → /client/profile blog/ [id].tsx → /client/blog/:id # 🛠 관리자용 admin/ i.. 2025. 4. 25. [처음 만난 리액트] React 책읽기 : Chapter 9-12 정리 [ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] ✅ 조건부 렌더링 (Conditional Rendering)조건에 따라 렌더링 결과가 달라지도록 하는 것🔹 1. 엘리먼트 변수리액트 엘리먼트를 변수처럼 저장해서 조건에 따라 선택적으로 렌더링 let button;if (isLoggedIn) { button = ;} else { button = ;}return {button};🔹 2. 인라인 조건▶ 인라인 If조건문을 코드 안에 직접 집어넣는 방식논리 연산자 && (AND) 사용앞의 조건이 true일 때만 뒤의 엘리먼트가 렌더링됨{isLoggedIn && }▶ 인라인 If-Else삼항 연산자 ? : 사용조건이 true면 첫 번째, false면 두 번째 항목을 렌더링서로 다른 두 가지.. 2025. 4. 7. [처음 만난 리액트] React 책읽기 : Chapter 6-8 정리 [ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] 🔹 React State 정리✅ State란?리액트 컴포넌트의 변경 가능한 데이터개발자가 직접 정의하여 사용State가 변경되면 컴포넌트가 재렌더링됨렌더링이나 데이터 흐름에 사용되는 값만 State에 포함해야 함🎯 State의 특징JavaScript 객체 형태직접 변경 불가능 → 반드시 지정된 방법(set 함수)으로 변경해야 함⚛️ 클래스 컴포넌트에서 State 사용법생성자에서 State를 한 번에 정의State 변경 시 setState() 함수 사용⚡ 함수 컴포넌트에서 State 사용법useState() Hook을 사용하여 각각의 State를 정의각 State별로 제공되는 set 함수를 사용하여 변경🔹 React 생명주기(Life.. 2025. 4. 4. [처음 만난 리액트] React 책읽기 : Chapter 0-5 정리 토스뱅크 멘토님 조언을 따라서 요즘 전공서적(?) 개발서적(?) 책들을 읽고 있는데,오래 기억하려면 내용을 요약해두면 좋을 것 같아 정리한다. 이 책은 입문자 기준이라, 설명이 꽤 자세하다.프론트엔드 개발자들은 개념을 탄탄히 다지는 데에 도움이 될 것 같다. 지금 읽고 있는건 React 도서랑 Node JS 도서인데,이번 달 내로 완독하고 Next JS와 Springboot 책도 읽어보고 싶다. 어릴 땐 책을 참 좋아했는데, 요즘은 읽을 시간이 많이 없어서 아쉽다 🤓📖요약은 깔끔하게 하려고 chatgpt의 도움을 받았다![ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] 🔹 웹 개발 기본 개념 정리🏗 HTML (HyperText Markup Language)웹사이트의 뼈대를 구성하.. 2025. 4. 4. 이전 1 2 3 4 다음 728x90 반응형
