영벨롭 개발 일지

📌 Next.js 가 SSR 을 수행하는 방식SSR(Server Side Rendering)은 서버 측에서 렌더링 준비가 완료된 완성된 HTML 문서를 클라이언트에게 전달하는 렌더링 방식입니다.  처음 렌더링이 될 때, 서버 측에서 데이터도 함께 가져와서 그려주기 때문에 초기 로딩속도가 빠릅니다.하지만, 페이지를 넘길 때마다 서버 측에서 다시 불러와야하기 때문에 CSR(Client Side Rendering)보다 서버 부하가 많습니다. 그럼에도 SSR을 사용하는 이유는 페이지가 로딩될 때 데이터도 동시에 로드되기 때문에 SEO에 유리하기 때문입니다. Next.js는 SSR을 기반으로 하지만, 페이지가 로드된 이후엔 React에서 CSR을 이용하는 방식을 차용합니다.서버가 페이지를 그려줍니다. pages..

📌 Redux Toolkit이란?Redux Toolkit은 효율적인 Redux 개발을 위해, Redux의 설정을 간소화하고 편리한 API를 제공하는 전역 상태 관리 도구입니다.yarn add @reduxjs/toolkit ✅ Redux의 단점보일러플레이트 코드Redux의 일반적인 설정과 사용 방법에 따라 보일러플레이트 코드가 많이 필요합니다.특히 액션 타입, 액션 생성자 함수 등을 수동으로 작성해야 할 때가 많습니다. 🤔 보일러플레이트 코드 (boilerplate code)프로그래밍에서 반복적이고 일반적인 작업을 수행하기 위해 필요한 기본적인 코드 템플릿  Redux Toolkit 은 이러한 리덕스의 단점을 보완하고자 등장하였습니다.리덕스의 설정을 간소화하고, 많은 리덕스 보일러플레이트 코드를 줄일 ..

📌 들어가며...먼저 styled-components는 웹 애플리케이션에서 스타일을 지정할 수 있는 대표적인 CSS-In-JS 입니다.저 역시 다양한 React 프로젝트를 진행하며 styled-components에 익숙한데요! React 에서 styled-components를 사용할 때에는 따로 추가 설정이 필요없이 설치 후 바로 사용하면 됐습니다.하지만, Next.js 에서 styled-components를 사용하기 위해선 추가 설정이 필요합니다. 그 이유는 바로 렌더링 방식의 차이에 있습니다. React는 클라이언트 사이드 렌더링(CSR)이 기본이기 때문에, 웹 애플리케이션에 대한 렌더링이 클라이언트 측에서 모두 일어납니다. 따라서 styled-components에 대한 추가 설정 역시 필요가 없습..

📌 Next.jsNext.js는 React 기반의 프레임워크입니다.강력한 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하여, 초기 로딩 속도를 개선하고 SEO를 향상시킬 수 있습니다.  ✅ Next.js 를 사용하는 이유서버 사이드 렌더링(SSR)초기 로딩 속도를 개선하고, SEO를 향상시킵니다.요청이 들어올 때 서버에서 React 컴포넌트를 렌더링하여 HTML을 생성 후, 클라이언트에게 전송합니다.정적 사이트 생성(SSG)사전 빌드된 페이지를 제공하여 정적 HTML 파일로 생성하며, 데이터가 변경될 때마다 재빌드 할 수 있습니다.React 컴포넌트 기반Next.js는 React 컴포넌트를 기반으로 하므로, 거대한 React 생태계를 이용할 수 있으며 컴포넌트 재사용성을 활용할 ..

📌 React Query란?리액트 쿼리(react-query)는 리액트 애플리케이션에서 데이터 페칭과 같은 서버 상태를 관리하는 데 도움을 주는 라이브러리입니다. 리액트 쿼리를 통해 외부 데이터를 효율적이고 간편하게 관리할 수 있습니다.npm install @tanstack/react-query ✅ React Query 장점간편한 데이터 관리: 데이터 페칭, 캐싱, 리패치, 에러 처리 등을 자동으로 처리할 수 있어, 개발자가 간편하게 데이터 관리할 수 있도록 도와줍니다. 캐싱과 성능 최적화: 내부적으로 캐싱을 사용하여 동일한 데이터 요청을 최적화하고, 데이터의 유효성을 자동으로 관리하여 성능을 향상시킵니다. 자동 리패치: 데이터가 만료되거나, 유효하지 않을 경우 자동으로 데이터를 다시 가져오는 기능을 ..

📌 Vite란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다.Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록 확장되었습니다.  ✅ Vite의 장점빠른 시작 속도: 기존 번들러에 비해 개발 서버 시작 속도가 매우 빠릅니다.개발 생산성: HMR(핫 모듈 교체)를 통해 변경된 파일을 다시 로드하여 애플리케이션을 즉시 업데이트합니다.모던 개발 경험: 최신 JavaScript 기능과 ES 모듈을 기본적으로 지원합니다.작은 번들 크기: Rollup을 통해 최적화된 생산 빌드를 생성하여 작은 번들 크기를 유지합니다.📌 Vite + React + TypeScript 프로젝트 생성 및 시작프로젝트를 생성하는 명령어..