1. 프로젝트 개요React로 만든 감정 일기 애플리케이션.감정 일기 CRUD를 포함하고 있다.App.js에 의한 중앙 집중식 상태를 통해 처리.일기 항목에 대한 여러 페이지 탐색 및 상태 관리가 포함됩니다.(routing)2. 사용된 기술React Router: react-router-dom을 활용하여 라우팅을 처리.Home, New, Edit, Diary의 네 가지 기본 페이지로 구성.페이지 네비게이션을 구현하기 위해 react-router-dom의 Routes와 Route 컴포넌트를 사용.상태 관리useReducer 후크를 사용하여 일기 항목의 Read, Update, Delete 합니다.상태는 App.js 내 최상위 수준에서 관리되어 다양한 페이지에 걸친 전역 액세스를 보장.3. 특이사항react..

const ordersMap = cardIds.reduce((map, id, index) => { map[id] = index + 1; return map; }, {});기존의 정렬 방식. 나름 짧고 간결하게 잘 짰다 생각하지만, 사용감 자체는 별로였다(직접 정렬하고 싶은 index들과 정렬하고 싶은 상태로 숫자들을 입력시켜야 했기 때문에 오류가 많았다.) ============================================================================================function getSavedColumns() { if (localStorage.getItem("backlogItems")) { backlogLi..

grocery bud submit clear items 위와같은 foodlist라는 html이 존재한다.app.js를 요약하자면, form에 원하는 텍스트를 입력하여 버튼을 누르면 div에 새로운 food가 리스트 형태로 나타나며 각각의 food에는 삭제, 수정 버튼이 존재한다.리스트 제일 밑에는 clear 버튼이 존재한다.  // add itemfunction addItem(e) { e.preventDefault(); const value = grocery.value; const ..

다중 페이지 애플리케이션(MPA)MPA(Multi Page Application)는 웹 페이지에서 서버로 데이터를 요청하고 응답을 받을 때 매번 새로운 HTML 페이지를 받는 방식을 말합니다. 웹이 탄생했을 때부터 지금까지 사용되고 있는 디자인 패턴.간단히 정리해서 그냥 페이지를 여러개 만드는 것.장점검색엔진 최적화(검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정)에 용이.탁월한 확장성(새로 만들면 되니까.)단점페이지 속도 저하와 웹사이트 전체 성능 문제개발자 부담이 크고, 개발 기간이 김.웹 사이트의 보안 및 유지·보수가 어렵다.(페이지가 여러개니까)사족AJAX(새로 고침을 하지 않고 데이터를 받아오는 기술)가 등장하기 전까지 모든 웹 사이트에서 사용이베이(eB..

PromisePromise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다:pending(대기): 초기 상태, 아직 완료되지 않은 상태.fulfilled(이행됨): 작업이 성공적으로 완료된 상태.rejected(거부됨): 작업이 실패한 상태.const promise = new Promise((resolve, reject) => { // 비동기 작업 수행 let success = true; // 작업 성공 여부 (예시) if (success) { resolve('작업 성공'); } else { reject('작업 실패'); }});promise.then((message) => { console..

과제 1.