거니의 velog

2. 빈즈톡 애플리케이션 생성 * IAM의 역할 생성이 완료되면 Elastic Beanstalk 메뉴로 이동한다. * 빈즈톡 메뉴에서는 오른쪽 상단의 애플리케이션 생성 메뉴를 선택한다. (1) 애플리케이션 생성 * 애플리케이션 생성의 첫 단계는 애플리케이션의 환경을 구성하는 것이다. '환경 티어'에서는 '웹 서버 환경'을 선택하고 이름을 지정한다. 아래쪽의 '플랫폼'은 API 서버의 경우 'Java'로 설정한다. JDK 버전은 17을 사용한다. * 애플리케이션의 코드는 나중에 jar 파일을 업로드해서 사용하지만, 처음 시작 단계에서는 정상적으로 실행되는 환경을 구성하는 것을 목표로 하기 때문에 별도의 변경없이 기본값을 사용한다. * 다음 단계의 설정은 서비스 엑세스 설정으로 처음 생성 시에는 새 서비스 ..

* 마지막 프로젝트의 마무리로 개발된 API 서버와 리액트 애플리케이션은 AWS의 Elastic Beanstalk(이하 빈즈톡)을 사용해서 배포(deploy)해 볼 것이다. 웹 애플리케이션의 배포(deployment)는 개발된 애플리케이션을 실제 사용자가 접근할 수 있는 환경에 설치하고 실행하는 과정을 말합니다. 이는 애플리케이션을 개발 환경에서 완성된 형태로 변환하고, 서버에 배치하여 사용자가 인터넷을 통해 접근할 수 있게 하는 과정을 포함합니다. 아래는 일반적인 웹 애플리케이션 배포 과정에 대한 설명입니다. 1. 서버 환경 설정: 먼저, 애플리케이션을 호스팅할 서버를 선택하고 환경을 설정합니다. 이는 서버 운영 체제, 웹 서버 (예: Apache, Nginx), 데이터베이스 서버, 백엔드 서버 등을 ..

6. 장바구니 처리 * 장바구니 처리는 서버와 연동해야 하는 부분은 리액트 쿼리를 이용해서 처리하고, 장바구니의 아이템에 대한 상태 처리는 리코일을 이용한다. import { atom } from "recoil"; export const cartState = atom({ key: "cartState", default: [], }); * cartState는 카트에 담긴 장바구니 아이템의 배열을 선언한다. (1) 리코일의 Selector * 리코일의 Atom이 데이터 자체를 의미한다면, Selector는 데이터를 이용해서 처리할 수 있는 기능을 의미한다. 예를 들어 장바구니의 경우 해당 상품의 가격과 수량을 이용해서 전체 장바구니의 총액을 구하는 기능을 사용할 수 있다. * 리코일의 Selector는 데이터..

5. 리코일(Recoil) 라이브러리 * 리코일 라이브러리는 리덕스나 리덕스 툴킷과 유사하게 애플리케이션 내에 상태를 처리하기 위한 라이브러리이다. https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org * 리액트의 생태계가 발전하면서 상태관리를 위한 다양한 라이브러리가 등장했는데 리코일은 2020년에 등장하면서 많은 인기를 끌고 있다. * 리코일 라이브러리를 이해하기 위해서는 위의 그림에 나오는 Atoms와 useRecoilState()를 이해해야 한다. Atoms는 리코일을 통해서 보관하고 싶은 데이터를 의미한다. 리덕스가 애플리케이션당 하나의 상태를 유지하는 것과 달리, 리코일은 여러 개의 Atoms를 만들..

4. 상품 수정 처리 * 상품 수정은 조회와 등록 기능이 같이 존재하기 때문에 useQuery()와 useMutation()을 같이 사용해야 한다. 상품의 수정 처리는 기본적으로 다음의 흐름을 따라서 처리한다. - useQuery()를 이용해서 상품 데이터를 가져온 후 컴포넌트의 상태 값으로 지정한다. - 을 이용해서 컴포넌트의 상태로 유지되는 데이터를 수정한다. - 수정이나 삭제를 처리한 후 화면을 이동하게 된다. * 리액트 쿼리 3 버전까지는 useQuery() 의 파라미터로 지정되는 옵션에는 onSuccess를 지정해서 서버의 데이터를 직접 useState()가 사용하는 상태로 변경할 수 있었지만 5 버전 부터는 deprecated 되므로 다른 방법을 사용해야 한다. (1) 조회 및 상태 처리 * ..

3. 상품등록 처리 * 리액트 쿼리에서 가장 중요한 기능은 useQuery()와 useMutation() 이다. SQL로 비유하자면 useQuery()가 select를 위해서 사용된다면, useMutation()은 insert/update/delete를 위해서 사용된다. useMutation() 은 파라미터로 서버를 호출하는 함수를 전달하고 mutate()를 이용해서 처리 결과에 대한 다양한 정보를 얻을 수 있다. * 상품등록 기능을 처리하는 components/products/AddComponent.js를 수정한다. * AddComponent에 useMutation()이 적용되므로 모달창을 처리하기 위한 fetching이나 result와 관련된 내용들을 모두 삭제하고 useMutation()을 적용한다..

2. 상품목록 페이지 * 상품목록에서 데이터를 조회하는 기능은 동일하지만 페이지의 번호나 검색 조건 등이 변경될 수 있으므로 useQuery를 이용할 때 주의할 점이 생긴다. (1) 중복적인 쿼리 키(key) * 기존 components/products/ListComponent.js 에 useQuery를 이용해서 page와 size까지 쿼리 키(key)가 되도록 수정한다. import React from "react"; import { getList } from "../../api/productsApi"; import useCustomMove from "../../hooks/useCustomMove"; import FetchingModal from "../common/FetchingModal"; impo..

* 리액트의 인기 요인 중 하나는 방대한 생태계에 있다. 리액트의 버전이 변경되면서 추가되는 기능보다 빠른 속도로 라이브러리나 프레임워크들이 등장하고 있는 상황이다. * 이번 장에서는 비동기 처리를 더욱 손쉽게 할 수 있는 리액트 쿼리(React Query)와 리덕스 대신에 많이 사용하는 상태관리 라이브러리인 리코일(Recoil)을 이용한다. 리액트 쿼리는 기존 서버의 데이터를 캐싱하는 기능을 가지고 있어서 불필요한 서버 호출을 줄여줄 뿐 아니라 간략한 코드로 기능을 구성할 수 있습니다. 리코일은 과거 리덕스(리덕스 툴킷 이전)의 복잡함을 없애고 손쉽게 애플리케이션의 상태 관리를 가능하게 한다. * 이번 장의 학습 목표는 다음과 같다.1. 리액트 쿼리(React Query)의 설정과 상품 관리 적용 2...

4. 상품 조회에서 장바구니 추가 * 장바구니에 존재하는 장바구니 아이템을 변경하거나 삭제하는 작업이 완료되었다면 이제 상품 조회 화면에서 장바구니에 상품을 추가하는 기능을 구현한다. 상품을 추가하면 장바구니 아이템을 생성하게 되는데 이때 서버에 전달하는 데이터는 '이메일, 상품번호, 수량'이다. 아래와 같은 상품 조회 화면에는 장바구니에 담기 버튼을 추가해 주어야 한다. (1) 상품 조회 기능 수정 * 장바구니에 상품 추가 기능은 components/products/ReadComponent.js를 수정해야만 한다. import React, { useEffect, useState } from "react"; import { getOne } from "../../api/productsApi"; import..