React10 React Query 란 ? 패스트캠퍼스 x 야놀자 웹 프론트엔드 부트캠프 파이널 프로젝트를 준비중인데, 팀원 중 한 분이 상태관리로 React Query를 쓰는 것이 어떻겠냐고 하셔서 React Query가 무엇인지 공부하고 정리하고자 한다. React Query 란 ? 공식 문서에 따르면, 아주 강력한 비동기 상태를 관리하는 툴이라고 한다. 그럼 이 상태가 무엇인지 알아보자. 상태(State) 란 ? 주어진 시간에 대한 시스템을 표현한 것 문자열, 배열, 객체 등 다양한 형태로 Application에 저장된 데이터 이를 프론트 개발자 입장에서 본다면, 페이지가 로드되거나 렌더링된 이후 사용자가 수행한 모든 동작에 대한 결과라 할 수 있다. 사용자가 액션을 취하면 그 액션에 따라 상태(state)가 바뀔거고 변경된 상태에 따라 V.. 2023. 12. 31. 패스트캠퍼스x야놀자 웹 프론트엔드 부트캠프 미니프로젝트 리팩토링 리팩토링 내용 2주간의 프로젝트 기간이 끝나고 다시 2주동안 리팩토링을 진행하기로 했다. 전에는 객실(룸) 이미지가 없었기에 기본 숙소 이미지로 대체했었지만, 이번엔 오픈 api에서 더 많은 정보를 불러와서 해당 내용들을 추가하는 방식으로 진행하기로 했다. 내가 진행한 리팩토링 내용은 다음과 같다. 카카오맵 API 추가 -> 숙소 위치 마커 렌더링 마커 클릭 시 커스텀 오버레이 렌더링 -> 클릭 시 길찾기 페이지 생성 숙소상세정보 API 변경에 따른 추가 정보 get 객실 추가 정보 처리 장바구니 API 변경에 따른 로직 처리 예약하기 API 변경에 따른 로직 처리 리팩토링 기간 2023년 12월 4일 ~ 2023년 12월 15일 결과물 - 객실 이미지 슬라이더 구현 - 이미지 없을 시 기본 이미지 렌더.. 2023. 12. 19. 패스트캠퍼스x야놀자 웹 프론트엔드 부트캠프 미니프로젝트 회고 프로젝트 내용 패스트캠퍼스x야놀자 웹 프론트엔드 부트캠프 미니프로젝트를 진행했다. 주제는 다음과 같다. 본 프로젝트는 숙박 예약 서비스를 완성하는 것을 목표로 함 본 프로젝트의 개발 범위는 다음과 같다 - 회원 인증 ◼ 회원가입 ◼ 로그인 - 상품 조회 ◼ 전체 숙박 상품 목록 조회 (옵션) 카테고리를 임의 생성하여 분류하여 출력 ◼ 개별 숙박 상품 상세 소개 - 상품 선택 및 장바구니 담기 ◼ 숙박 상품 옵션 선택 ◼ 장바구니 담기 ◼ (또는) 바로 결제하기 - 장바구니 ◼ 장바구니 보기 ◼ 장바구니에서 주문하기 버튼 클릭 시, 예약(주문) 페이지로 이동 - 예약(주문) 하기 ◼ 만 14세 이상 이용 동의 (상세 설명서 X, 체크박스로만 간단히 처리) ◼ 결제하기 버튼 클릭 시, 상품을 주문한 것으로 .. 2023. 12. 19. 리덕스(Redux) 리덕스란? 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 리덕스 Data Flow Action: 간단한 JS 객체. 작업 유형을 지정하는 type 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성도 가질 수 있음 Reducer: 어플리케이션 상태 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부 상태 업데이트함 Redux store: 이들을 하나로 모으는 객체 저장소는 어플의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐 Dispatch: 스토어 내장 함수 중 하나로 리듀서에.. 2023. 10. 15. 이전 1 2 다음
