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을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다.  ..

Context란?리액트에서는 값을 관리할 때 useState를 사용해서 값을 선언하고 상태를 관리한다.const [a,setA] = useState(''); useState는 컴포넌트 안에서 선언하고, 이렇게 선언한 값은 컴포넌트 내에서만 사용이 가능하다만약 컴포넌트에게 자식이 있다면 자식에게 props를 사용해서 값을 전달 해 주는 것이 가능하다  만약 위와 같이 컴포넌트들을 만들었다고 가정하자컴포넌트 A에서도 쓰고 B에서도 쓰고 C, D, E에서도 써야하는 값이 있다면 어떻게 해야할까? 최상위 컴포넌트인 App에서 useState로 상태를 만든 다음A에게 Props로 전달해주고, B에게 Props로 전달해주고, B의 자식 컴포넌트인 C와 D에도 Props로 전달해주고, C의 자식 컴포넌트인 E에도 P..

git remote update먼저 원격의 브랜치에 접근하기 위해 git remote를 갱신해줄 필요가 있다.$ git remote update  원격 저장소 branch 확인원격 저장소의 branch 리스트를 확인하는 방법이 있다. -r 옵션을 주면 원격 저장소의 branch 리스트를 볼 수 있고, -a 옵션을 주면 로컬, 원격 모든 저장소의 branch 리스트를 볼 수 있다. $ git branch -r$ git branch -a  원격 저장소의 branch 가져오기-t 옵션과 원격 저장소의 branch 이름을 입력하면 로컬의 동일한 이름의 branch를 생성하면서 해당 branch로 checkout을 한다.만약 branch 이름을 변경하여 가져오고 싶다면 $ git checkout -b [생성할 b..