거니의 velog

8. 리액트 애플리케이션의 배포 * 로컬 환경에서 실행한 리액트 애플리케이션이 정상적으로 동작했다면 남은 작업은 빈즈톡을 이용해서 예제 애플리케이션을 배포하는 것이다. 리액트 애플리케이션을 배포할 수 있는 방법은 S3를 이용해서 업로드하거나, Amplify 서비스를 이용해서 GitHub의 저장소를 배포하는 등의 다양한 방법이 있다. * 빈즈톡은 Node.js 기반의 코드를 업로드하면 자동으로 npm install 이나 npm start 등을 수행해 주기 때문에 간단하게 리액트 프로그램을 배포할 수 있다. * 프로젝트의 폴더 구조에서 node_modules를 제외한 파일들을 압축해서 zip 포맷의 파일로 생성한다(파일 이름은 크게 중요하지 않다). * 빈즈톡에 새로운 애플리케이션을 생성한다. 이때 플랫폼은..

7. API 서버의 S3 설정 * 설정된 S3 서비스를 이용하기 위해서는 API 서버에 라이브러리를 추가하고 설정을 추가해야만 한다. 이 설정에 대한 라이브러리는 Spring Cloud AWS 를 이용한다. https://github.com/awspring/spring-cloud-aws GitHub - awspring/spring-cloud-aws: The New Home for Spring Cloud AWS The New Home for Spring Cloud AWS. Contribute to awspring/spring-cloud-aws development by creating an account on GitHub. github.com * 스프링 부트의 버전에 따라 사용할 수 있는 라이브러리 버전이..

6. S3 업로드 처리 * AWS의 많은 서비스 중에 S3는 대용량의 파일을 업로드 하거나 서비스할 수 있는 기능을 제공하므로 이미지나 기타 파일들에 대해서 저장 및 조회 기능 구현 시에 도움이 된다. 빈즈톡을 이용하는 경우 기본적으로 S3를 이용하기 때문에 설정을 이용해서 파일 업로드 기능을 처리할 수 있다. * AWS의 메뉴에서 S3를 선택하면 빈즈톡 애플리케이션 생성 시에 만들어진 S3의 버킷(파일을 담는 공간)을 확인할 수 있다. (1) IAM을 이용한 S3 사용자 생성 * S3 버킷에 직접 파일을 업로드하는 작업은 가능하지만, 이를 프로그램을 통해서 처리하기 위해서는 사용자를 생성하고 사용자가 가지는 액세스 키(access key), 비밀 엑세스 키(secret access key) 등을 사용해..

5. 리액트 연동 확인 * 리액트는 localhost 경로를 이용해서 개발해 왔기 때문에 빈즈톡으로 배포된 API 서버를 이용하기 위해서는 API 서버를 호출하는 경로들을 수정해야만 한다. 리액트 코드에서는 localhost 경로를 최초로 사용했던 todoApi.js를 수정해서 AWS에 배포된 API 서버를 호출하도록 변경한다. import jwtAxios from "../util/jwtUtil"; // export const API_SERVER_HOST = "http://localhost:8080"; export const API_SERVER_HOST = "http://API서버도메인주소"; // 마지막에 / 를 넣지 않도록 주의! const prefix = `${API_SERVER_HOST}/api/..

4. API 서버 수정* API 서버를 빈즈톡에 올리기 전에 데이터베이스 설정을 변경해서 동작 여부를 확인한다. 예제에서는 MariaDB를 사용했지만, AWS는 MySQL이므로 이를 변경해 준다(MySQL과 MariaDB는 서로 호환이 되기는 하지만, 문제가 일어날 가능성을 최대한 줄여서 개발하도록 한다). * 우선 build.gradle에 MariaDB 드라이버 대신 MySQL 드라이버를 추가한다.dependencies { (...) // runtimeOnly 'org.mariadb.jdbc:mariadb-java-client' runtimeOnly 'com.mysql:mysql-connector-j' (...) }* application.properties 파일에서는 JDBC 연결 정보와 JDBC 드..

3. 빈즈톡에 데이터베이스 설정* 빈즈톡은 애플리케이션의 모든 구성을 하나로 묶어서 관리할 수 있는데 데이터베이스 역시 애플리케이션의 설정과 같이 처리할 수 있다. 데이터베이스를 이용하기 위해서 구성된 환경의 '구성' 메뉴에서 시작할 수 있다. '구성' 메뉴에는 Networking and database 메뉴의 편집 버튼을 클릭한다.* 데이터베이스 항목에서는 우선 상단의 데이터베이스 활성화를 변경한다. 데이터베이스는 mysql로 지정하고 버전은 8.0 버전을 지정한다. 인스턴스 클래스의 경우 데이터베이스의 실행 환경을 지정하는데 db.d2.micro 는 프리티어 버전에서 사용할 수 있으므로 다른 선택을 하지 않도록 주의한다. 사용자의 이름과 패스워드는 데이터베이스 관리자이므로 반드시 잘 기억해 두도록 한..

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를 만들..