페이지네이션을 구현하기 전에 이론적으로 정리하며 공부하려고 한다!  Pagenation의 주요 특징[ 데이터를 나눠서 보여줌 ]한 번에 모든 데이터를 보여주지 않고, 일부만 보여줌 (예: 1페이지에 10개씩).사용자 입장에서 가독성 향상 + 로딩 속도 개선.[ 서버/클라이언트의 부담 감소 ]전체 데이터를 한 번에 처리하면 리소스 낭비가 커지는데, 페이징하면 필요한 만큼만 가져오니까 효율적이야.페이지 이동 기능 제공사용자는 원하는 페이지로 쉽게 이동 가능 (1, 2, 3... 다음, 이전 등).데이터 정렬과 필터링과 함께 사용 가능정렬, 검색과 함께 사용하면 다양한 조건의 페이징 처리가 가능함  페이지네이션 구현에는 보통 두 가지 방식이 있다. 1. Offset 기반 PaginationLIMIT, OFFS..

yarn create next-app .현재 경로에 next 프로젝트 생성 yarn add next@14 react@18 react-dom@18 Next.js 14 버전에서는 next.config.ts 파일을 공식적으로 지원하지 않습니다.즉, TypeScript(.ts)로 next.config.ts를 작성하는 것은 지원되지 않으며, .js 또는 .mjs 형식으로 변환해야 함 mv next.config.ts next.config.mjs 변경후 파일 내용 다음과 같이 수정/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true};export default nextConfig; PnP 환경에서는 TypeScript가 ..

Reference👉🏻 DaleSeo 블로그👉🏻 모던 자바스크립트 딥다이브 도서   Set 객체는 중복되지 않는 유일한 값들의 집합을 다루는 자료구조예요. Set을 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있습니다. 배열과 유사하지만 다른 차이도 존재합니다. Set은 자바스크립트 ES6부터 추가된 기능이라 Set을 쓰면 효율적인 코드를 짤 수 있는 상황에도 배열을 사용하는 경우가 있다고 해요. 배열과 Set의 차이를 살펴보자면, 배열은 데이터를 순서있게 저장합니다. 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능해요. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복이 문제되지 않아 동일한 값을 여러 번 저장할 수 있습니다.   세트는 얼..

서버 액션(Server Actions)은 React 18에서 새롭게 도입된 기능으로, 서버에서 실행되는 코드를 클라이언트에서 쉽게 호출할 수 있게 해준다. 이는 서버에서 직접 액션을 처리하고, 그 결과를 클라이언트로 반환하는 방식으로 작동하여 클라이언트에서 복잡한 상태 관리나 비동기 처리를 덜어주는 장점을 가지고 있다  React 서버 액션의 주요 특징 1. React 컴포넌트에서 호출 가능서버 액션은 React 컴포넌트 내에서 호출할 수 있으며, 서버 액션이 완료되면 결과값을 받아 렌더링할 수 있습니다. 이를 통해 클라이언트에서 복잡한 로직을 구현할 필요 없이 서버에서 처리된 데이터를 바로 사용할 수 있습니다. 2. 직접적인 서버와 클라이언트 통신서버 액션은 클라이언트가 직접 호출하는 서버 함수입니다...

다음은 레시피 등록에서 재료를 추가하는 기능입니다.selectBox에서 값을 선택할 때 마다 재료에 해당하는 단위가 바뀌고, 상태배열 selects에 선택한 값을 추가합니다. 기존 코드const upDateIngredient = (e, index) => { const ingredientId = e.target.value; const ingredientName = e.target.options[e.target.selectedIndex].textContent; let ingredientUnit = ""; // 기존 상태배열에 중복 데이터가 존재하는지 검사 for(let i = 0; i select.index !== index)); //삭제 alert('이미 존재하는..

현재 진행하고 있는 프로젝트의 메인화면이다페이지를 구현하기 전에 먼저 머리속에서 순서를 정해보았다 1. 레시피 정보가 담긴 배열을 만든다.API에서 받아와야 하지만 당장은 api가 없기 때문에 임시 Mock Data를 만들어 사용하자.//Mock Dataconst items = [ { imgFile: 'https://homecuisine.co.kr/files/attach/images/140/868/087/c936189e03c496989162bf511a99b12e.JPG', recipeName: '마라떡볶이', NickName: '소연', recipeDesc: '마라맛이 나는 떡볶이' }, { imgFile: 'https://www.sbfoods-worldwide.com/k..

Redux와 React Query의 차이점 Redux주된 목적: 클라이언트 측 상태 관리. 주로 사용자가 직접 생성하고 관리해야 하는 전역 상태(예: 사용자 입력, UI 상태, 인증 상태 등)를 다루기 위한 라이브러리입니다.데이터 관리: 모든 종류의 상태(비동기 또는 동기, 클라이언트 내부에서만 사용하는 상태)를 관리하는 데 사용됩니다.전역 상태: 상태를 하나의 스토어에 저장하고, 전역에서 액세스 및 업데이트할 수 있도록 합니다.설정 복잡성: 전통적인 Redux는 비동기 처리나 상태 관리 로직이 다소 복잡할 수 있습니다. 이를 간소화하기 위해 Redux Toolkit을 많이 사용합니다.비동기 처리: 비동기 처리는 Redux 미들웨어(예: redux-thunk 또는 redux-saga)를 통해 처리해야 하..

💡 React 강의를 보며 프로젝트를 만들던 도중 강의에서 React Router 라이브러리를 사용하는데, 이에 대해 정확이 이해하고 공부하기 위해 React Route에 대해 정리하려고 합니다.리액트 라우터(React Router)에 대한 정확한 정보는 공식문서를 통해 확인하는 것이 가장 좋고, 이 글은 공식문서와 여러 블로그를 참고하여 작성하였습니다.   React Router는 Client Side Routing을 가능하게 한다. Client Side Routing을 통해 서버에서 다른 문서를 요청하지 않고도 링크를 클릭함으로써 URL을 업데이터할 수 있다. 즉시 새 UI를 렌더링 하고 fetch를 통해 데이터 요청을 수행하여 페이지를 새 정보로 업데이트 할 수 있다. 브라우저가 다음 페이지에 대..

[출처]👉🏻  우아한테크: [10분 테코톡]👉🏻  Dev.Ella 블로그        오늘날 웹 애플리케이션을 개발한다고하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발한다. ✔️ SPA여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다. ✔️ MPA반면 MPA란, Multi Page Application의 약자로, 탭을 이동할 때 마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다.  ..