Virtual DOM(Document Object Model) VS Real DOM Virtual DOM 실제 DOM의 가상 복제본으로 jS 객체로 이루어진 가상트리. 실제 DOM의 계층 구조와 유사하게 구성되어 있으며, UI 상태를 반영 업데이트 최적화: 가상 DOM은 UI 변경 사항을 추적하고, 변경된 부분만 실제 DOM에 저굥하는데 사용됨. DOM 조작 횟수 최소화하고, 업데이트 프로세스를 최적화 할 수 있음. 라이브러리 및 프레임워크활용: React 등의 라이브러리 및 프레임워크는 Virtual DOM을 활용하여 UI 업데이트를 효율적으로 처리함. Real DOM 웹 브라우저에서 직접 조작하는 실제 DOM. HTML 요소, 속성, 스타일, 이벤트 등의 모든 것을 나타냄. 업데이트 오버헤드: UI ..

🚀 Today I Studied Savers Social Login: kakao 랜덤 아이디 만들기 로그인 후 db에 uid, email 넣기 랜덤으로 만든 아이디가 들어가도록 로직 개선 필요 기술면접대비: 전역상태관리 libs 기술튜터링 진행 with 원장님 ⚡️ Today I Learned Savers 회의록 아침 ==> https://xoxojw.notion.site/20230823-83a9084d3c40443dbf68db2527387ed3?pvs=4 오후 ==> https://xoxojw.notion.site/20230823-885deec8260048aa8d633a9cab8a0e29?pvs=4 기술면접대비: 전역상태관리 library == https://xoxojw.notion.site/20230..

전역상태관리 : 전체 애플리케이션의 상태를 중앙 집중화된 곳에서 관리하는 패턴/기술로, 여러 컴포넌트 혹은 모듈 간에 데이터 공유 및 업데이트를 편리하게 해준다. 전역상태관리 주요 목적 데이터공유 상태의 일관성 상태 업데이트 관리 애플리케이션 확장성: 새로운 컴포넌트 추가시 전역 상태관리를 통한 데이터관리 로컬 상태와의 구분: 모듈내부의 데이터와 전역에서 공유하는 데이터를 구분하여 관리 전역상태관리 종류 Redux 중앙 상태 스토어, action - reducer pattern으로 데이터 관리 상태의 불변성을 유지하며 업데이트함 비동기 데이터를 다룰 때에 redux-thunk 등의 미들웨어를 사용함 Boilerplate 코드가 있음 Recoil Facebook에서 개발한 React app을 위한 상태관리..

🚀 Today I Studied Savers Header Header의 구성요소들 클릭 시, 해당 요소로 이동하도록 route 설정 login, logout 버튼 추가 다크모드 버튼 추가 예정 login 여부에 따라 login/회원가입 || logout/mypage 로 버튼이 바뀌도록 작업 진행중 기술면접 Redux ⚡️ Today I Learned 기술면접/Redux ==> https://terryehlee.tistory.com/171 Savers 튜터링 ==> https://xoxojw.notion.site/5-2-20230822-bf9300f7c97b4f1b91d760cac1f74417?pvs=4 회의록 ==> https://xoxojw.notion.site/20230822-b839a1db7a314..

Redux : JS application의 상태관리 library. Store: apllication의 모든 상태가 저장되는 중앙 상태 저장소 Action: 상태변경을 위한 이벤트를 나타내는 객체 Reducer: 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수한 함수 Dispatch: 액션을 스토어에 보내 상태를 변경하는 메서드 작동방식 action을 dispatch 하여 상태변경 요청 reducer는 현재 상태와 action을 이용하여 새로운 상태 계산 store는 새로운 상태를 저장하고, React component에 이를 전달하여 UI를 업데이트함. 장점 전역 상태관리를 통한 데이터 공유 및 업데이트 용이성 예측 가능한 상태관리로 디버깅과 태스팅이 수월함 애플리케이션의 복잡성을 관리하고, 컴포..

🚀 Today I Studied 기술면접 상태관리 State Management Savers wireframe: 지희님과 의논하여 업데이트 api 명세서: 1차 완성 했지만 수많은 수정이 필요 ⚡️ Today I Learned 기술면접//상태관리 ==> https://terryehlee.tistory.com/169 Savers 회의록 ==> https://xoxojw.notion.site/20230821-8a087441b8094fa29e578efbaf2dd5bc?pvs=4 ==> https://xoxojw.notion.site/20230821-7a218f3bedf8497ab01066b747fbc08e?pvs=4 wireframe ==> https://www.figma.com/file/UJqqQihTX0h..