거니의 velog

1. useConsolelogimport { useEffect } from 'react';// 커스텀 훅 정의function useConsoleLog(label, value) { useEffect(() => { console.log(`${label} : `, value); }, [label, value]);}export default useConsoleLog;2. useCommonCodeListimport { useState, useEffect } from 'react';import { getCommonCodeListInfo, tokenGetCommonCodeListInfo } from '../api/adminApi';import fetchData from '../utils/fet..

.scrollCover { height: 500px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;}

https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 studiomeal.com#pond { display: flex; justify-content: flex-end; }#pond { display: flex; justify-content: center; }#pond { display: flex; justify-content: space-around; }#pond { display: flex; justify-content: space-between; }#pond { display: flex; align-items: flex-end; }#pond { display: flex; justify-content: center; align-items: center;..

https://dev-play.tistory.com/entry/Git-Git-hub-%EC%99%84%EC%A0%84-%EC%B4%88%EB%B3%B4%EC%9E%90-%EC%82%AC%EC%9A%A9%EB%B2%95-Git-bash-%ED%99%9C%EC%9A%A9 [Git] Git Hub 완전 초보자 사용법 (Git bash 활용) 1. Git 설치 및 설정 1-1 Git 설치 1-2 Git global 설정 git config --global user.name "sample" git config --global user.email "sample@naver.com" Git bash 또는 cmd 창에 입력 최초 Git 설정으로 해당 PC 에서 Git 처음 실행 시 설정 dev-play.tistory.c..

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 는 프리티어 버전에서 사용할 수 있으므로 다른 선택을 하지 않도록 주의한다. 사용자의 이름과 패스워드는 데이터베이스 관리자이므로 반드시 잘 기억해 두도록 한..