프론트엔드17 [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. [처음 만난 리액트] 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 0-5 정리 토스뱅크 멘토님 조언을 따라서 요즘 전공서적(?) 개발서적(?) 책들을 읽고 있는데,오래 기억하려면 내용을 요약해두면 좋을 것 같아 정리한다. 이 책은 입문자 기준이라, 설명이 꽤 자세하다.프론트엔드 개발자들은 개념을 탄탄히 다지는 데에 도움이 될 것 같다. 지금 읽고 있는건 React 도서랑 Node JS 도서인데,이번 달 내로 완독하고 Next JS와 Springboot 책도 읽어보고 싶다. 어릴 땐 책을 참 좋아했는데, 요즘은 읽을 시간이 많이 없어서 아쉽다 🤓📖요약은 깔끔하게 하려고 chatgpt의 도움을 받았다![ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ] 🔹 웹 개발 기본 개념 정리🏗 HTML (HyperText Markup Language)웹사이트의 뼈대를 구성하.. 2025. 4. 4. [한경xToss] 8주차 요약 : Typescript + 중간 팀플🥷 * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. typescript 팀플 시작 당시 팀원들에게 react ts로 개발을 진행하자고 했었는데,마침 강사님이 강의를 진행해주셨다.ts를 경험해보지 않은 팀원들이 있었기에 다행이었음!! //타입 단언(Assertion) : 형변환과 유사type Person = { name: string age: number} //타입좁히기function func1(value: number | string) { //value.toFixed() //실수형으로 바꾸기 //value.toUpperCase() //대문자로 바꾸기 if (typeof value === 'number') { value.toFixed() } else if (typeof v.. 2025. 3. 20. [React] Redux 개념 및 역할, 파일 구조 디렉토링 개발을 처음 진행할 때는 리덕스 내용을 한 파일에다가 모아두다가,인턴 하면서 디렉토링 하는 방법을 배웠었는데 또 써먹을 일이 생겨 기록해둔다. Redux는 애플리케이션의 상태를 한곳에서 관리하는 라이브러리이다. 여러 컴포넌트에서 같은 데이터를 공유할 때 유용하다. 1️⃣ Redux 파일 구조 (in React typescript) /redux /actions # 액션 정의 (이벤트 발생 시 필요한 데이터 정의) categoryActions.ts /reducers # 리듀서 정의 (상태가 어떻게 변경될지 결정) categoryReducer.ts store.ts # 스토어 설정 (전체 상태 관리) 각 파일은 Redux의 핵심 요소인 액션(Acti.. 2025. 2. 27. 이전 1 2 3 다음 728x90 반응형
