뚜부니의 Devlog

Github 리포지토리에서 Add file > Create new file을 통해 파일 생성 페이지로 이동합니다. 파일명을 다음과 같이 LICENSE로 설정하면 Choose a license template 버튼이 표출됩니다. Choose a license template 버튼을 클릭하면 보이는 여러 License Template 중 MIT License를 선택하고 Review and submit 버튼을 클릭합니다. 그러면 다음과 같이 MIT License 관련 내용이 자동으로 추가됩니다. 그 다음 LICENSE 파일을 추가해주면 Github 리포지토리에 License가 추가됩니다. Github 파일 목록을 보면 아래와 같이 추가된 것을 확인할 수 있습니다. 참고 https://docs.github.co..

vi로 파일을 열었을 때, 아래와 같은 문구가 노출되는 경우가 있습니다. E437: terminal capability "cm" required Press ENTER or type command to continue 이럴 때는 아래의 명령어를 실행한 다음, vi로 파일을 열면 됩니다. export TERM=vt100

00. 실습 환경 Apache 2.0 License 내에서 사용할 수 있는 기능만 포함된 OSS 버전을 활용하여 실습하였습니다. CentOS 7.9 Elasticsearch OSS 7.10.2 Kibana OSS 7.10.2 여기서는 공식 홈페이지에서 다운로드 받은 후 CentOS 서버로 파일을 옮겨 설치하는 방식으로 환경을 구축하였으며, 다른 방식으로 환경 구축을 하고 싶다면 공식 문서를 참고하시길 바랍니다. 01. Elasticsearch 설치 공식 홈페이지에서 Elasticsearch RPM 버전을 다운로드 받은 후, CentOS 서버에 업로드합니다. 서버에 업로드가 완료되면, 아래 명령어를 통해 elasticsearch를 설치합니다. sudo rpm --install elasticsearch-os..

00. 실습 환경 Apache 2.0 License 내에서 사용할 수 있는 기능만 포함된 OSS 버전을 활용하여 실습하였습니다. CentOS 7.9 Elasticsearch OSS 7.10.2 Logstash OSS 7.10.2 Kibana OSS 7.10.2 Filebeat OSS 7.10.2 Java 11 여기서는 공식 홈페이지에서 다운로드 받은 후 CentOS 서버로 파일을 옮겨 설치하는 방식으로 환경을 구축하였으며, 다른 방식으로 환경 구축을 하고 싶다면 공식 문서를 참고하시길 바랍니다. 01. Elasticsearch 환경 구축 Elasticsearch 설치 공식 홈페이지에서 Elasticsearch RPM 버전을 다운로드 받은 후, CentOS 서버에 업로드합니다. 서버에 업로드가 완료되면, ..

개발 서버에서 API 호출 시 CORS 에러가 발생하는 것을 확인했습니다. API 서버에서 localhost:3000 에 대한 cors 처리를 하는 것이 좋지 않다는 생각이 들어, React에서 리버스 프록시를 설정하기로 결정했습니다. http-proxy-middleware 설정 프록시 설정 방법은 다양하게 있으나, 그 중 가장 유연하게 설정 가능한 방법이 http-proxy-middleware 를 활용하는 것이므로 해당 방법으로 진행했습니다. 먼저, 아래 명령어를 이용해 http-proxy-middleware를 설치합니다. npm install http-proxy-middleware --save 그 다음 src 폴더 바로 아래에 setupProxy.js 를 추가합니다. const {createProxy..

react-hook-form 란? react-hook-form 사용을 하면 form을 더 쉽게 만들기 위한 라이브러리로, 아래와 같은 장점을 가집니다. 장점 배우기 쉽다 유효성 검사에 유용하다. HTML 표준을 활용하여 안정적인 기능을 제공한다. 재 렌더링 횟수를 최소화한다. 구성 요소를 즉각 분리하여 같은 컴포넌트 내 요소들의 의미 없는 재 렌더링을 막아준다. 전체 양식을 재 렌더링 하지 않고, 개별 입력 및 양식 상태 업데이트를 구독할 수 있다. 여기서는 간략하게 설명하고 넘어가도록 하겠습니다. 더 자세한 내용은 https://react-hook-form.com/ 을 참고해주세요. react-hook-form 설치하기 아래 명령어를 입력하면, react-hook-form이 설치되어 사용할 수 있습니다..

해당 게시글을 Spring 프로젝트와 React에 대한 자세한 설명을 제공하지는 않습니다. React 프로젝트 생성하기 React 프로젝트를 생성하고 싶은 위치에 아래 명령어를 입력하여 생성합니다. npx create-react-app {프로젝트 이름} 그러면 아래와 같이 프로젝트가 원하는 위치에 생성됩니다. CORS 이슈가 발생하지 않도록 Package.json에 proxy 설정을 추가해 줍니다. { // ... "proxy": "http://localhost:8080" } 통합 Build 설정하기 Spring에서 React를 Build 할 수 있도록 아래 설정을 Gradle에 추가합니다. 이때, frontendDir은 React 프로젝트 Path입니다. // React 설정 시작 def fronten..

SpringBoot에서 S3 사용 시 Spring Boot는 2.x.x 버전이어야 합니다. 2023년 1월 8일 기준, Spring Boot 3.x.x 버전에 대한 정식 Release가 출시 되지 않았기 때문입니다. (참고 : https://github.com/awspring/spring-cloud-aws) 여기서는 S3 개념에 대해 자세하게 다루지 않으며, 자세한 설명을 원한다면 아래 블로그를 추천드립니다. https://inpa.tistory.com/entry/AWS-📚-S3-버킷-생성-사용법-실전-구축 AWS Key 발급 AWS 서비스에 접근하기 위해서는 권한을 가진 Key를 생성해야 합니다. Key 발급은 AWS IAM 서비스를 이용하면 됩니다. 먼저, AWS IAM의 사용자에 접속하여 우측에 있..