프로젝트 담당 기능 주요 구현내용 1. 공공데이터 API fetching 및 가공 1) axios와 useQuery를 사용하여 data fetch 및 페이지 용도에 맞게 분배, 가공 2) try, catch 문으로 에러 핸들링 2. 메뉴탭 및 지역 필터 기능 구현 1) recoil의 useRecoilState와 react-router-dom의 useLocation을 이용한 query String으로 메뉴 관리. 2) 기존에 페이지 새로고침 시 HOME으로 초기화되는 부분을 해결하고자 메뉴 상태 유지를 위해 sessionStorage를 사용해서 관리하고 있었는데 이를 url의 query를 이용한 방식으로 리팩토링 3. 페이지네이션, 캐러셀 라이브러리를 사용하지 않고 로직 직접 구현 1)

오늘 새로 배운 것 컴포넌트 간 props나 Redux같은 라이브러리를 사용하지 않고 커스텀 훅으로 상태를 공유할 수 있는지 시도해보았다. 근데 안되더라. 알아보니 커스텀 훅은 컴포넌트간 로직을 공유할 뿐 상태는 각 컴포넌트마다 독립적이라 공유되지 않는다고 한다. 결국 전역 상태로 관리해주기 위해서는 Redux나 useReducer hook같은 툴을 사용해야한다. useState의 Batch Update 우선 그냥 보고 듣기만 해서는 무슨 뜻인지 와닿지 않는 Batch라는 단어에 대해 찾아보았다. batch : (일괄적으로 처리되는) 집단(무리), (일괄 처리를 위해) 함께 묶다 결국 함께 일괄적으로 처리된다는 의미인 것 같다. 다시 살펴보면, 동기적 작업은 한 작업이 끝나야 다음 작업이 수행되므로 일괄적이지 않고 비동기적 작업은 하나의 작업을 위임하고 다른 작업을 하고 있으므로 동시에 일괄적으로 처리한다고 생각할 수 있을 것 같다. setState의 작업은 기

오늘 새로 배운 것 JS 개념 나중에 다시 공부하면서 정리할 예정. 일단 메모한 내용을 남겨놓았다. 생각보다 아래 질문들에 대해 즉각즉각 답을 하지 못하거나 놓치고 있는 부분들이 많았다. MPA와 SPA MPA는 페이지마다 새로 서버에서 새로 html 파일을 다운받아서 클라이언트에서 가지고있는 CSS,JS로 렌더링 SPA는 한 개의 html 파일에서 변경되는 일부만 Virtual DOM으로 변경된 부분을 감지해서 데이터 통신을 통해 부분적으로 렌더링 DOM과 가상 DOM DOM은 자바스크립트 언어를 화면에 나타내기위한 표준. DOM은 랜더링되는 과정이 복잡하다는 한계가 있습니다. 이러한 문제점을 해결하기 위한 등장한 것이 가상 DOM입니다. 가상DOM은 DOM과 같은 객체를 메모리에 저장한 것. 이 가상 DOM과 DOM의 비교를 통해 DOM에서 변화가 있는 부분만 렌더링하는 것이 리액트의 특징입니다. 즉, 가상 DOM은 DOM을 필요에 따라 랜더링하기 위