Dev

이번 포스팅에서는 react-redux 라이브러리에서 제공하는 Provider를 사용하여 app 전체에서 store를 사용할 수 있는 방법과 useSelector를 사용하여 상태값을 가져오는 방법, useDispatch를 사용하여 상태값을 업데이트 방법에 관해 정리해보려한다. 목차 react-redux 설치 Provider를 사용하여 store 공급하기 useSelector, useDispatch 사용법 1. react-redux 설치 우선 Provider를 사용하기 위해서 아래의 명령어를 실행하여 react-redux를 설치한다. npm install react-redux --save 2. Provider를 사용하여 store 공급하기 // index.tsx import React from 'react..

이번 포스팅에서는 리덕스에서 여러개의 reducer를 사용해야 할때 활용할 수 있는 combineReducers에 관해 간단하게 정리하는 포스팅이다. 목차 combineReducers 사용이유 combineReducers 사용법 1. combineReducers 사용이유 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { createStore } from 'redux'; import rootReducer from './reducers'; const root = ReactDOM.createRoot(document.getElementById..

이번 포스팅에서는 Redux란 무엇이고 코드 예시를 통해 사용방법에 대해 포스팅해보려한다. 목차 Redux 란? Context와 차이점 Redux 설치 및 사용 방법 1. Redux 란 ? 리덕스는 상태 관리 라이브러리로서 자바스크립트 기반의 웹 어플리케이션에서 데이터의 상태를 효율적으로 관리하기 위해 사용한다. 보통 React와 함께 사용되는 것이 일반적이지만 Angular, Vue.js 등 다른 자바스크립트 프레임워크와도 함께 사용이 가능하다. 간단하게 요약해서 app 내에서 사용되는 데이터의 상태(State)를 Store라는 하나의 저장소에서 관리하고 필요에 따라 Dipatch로 Action을 Reducer에게 전달하여 상태의 값을 변경하고 변경된 상태의 값을 컴포넌트로 전달해주는 역할을 한다. 즉..

Oracle Cloud VM 인스턴스에 Next.js 로 구성한 App을 서버에 띄우고 도메인 연결까지 했으나 SSL 적용이 안되어 있어서 http 로 들어가야 하고 보안인증서가 없어서 자물쇠가 안걸려 보이는게 자꾸 마음이 쓰였다. 이번 포스팅에서는 Nginx 설치를 하고 certbot 을 사용하여 let's encrypt 보안인증서까지 발급받는 과정을 정리해보려 한다. 목차 Nginx 설치 Nginx 서비스 실행 및 방화벽 포트 설정 리버스 프록시 설정 Certbot 설치 Crontab을 활용한 인증서 자동갱신 1. Nginx 설치 Nginx를 설치하는 이유는 앞서 말한 보안인증서를 발급받아 SSL적용을 하기 위해서도 있지만 리버스 프록시 기능을 사용하기 위해서이기도 하다. 리버스 프록시는 요약하면 클..

Next.js 를 사용하여 개발중인 웹 어플리케이션에서 Toast UI 에디터를 이용해서 이미지를 첨부해야하는데 이 이미지를 blob 으로 DB에 그대로 넣으면 용량이 너무 크기에 .. 고민을 하다가 오라클 클라우드에서 제공하는 Bucket을 알게 되었다. 참고할만한 레퍼런스가 많이 없어서 혼자 삽질을 엄청했다. 목차 Oracle Cloud Bucket 이란? Bucket 생성 IAM 사용자 생성 정책 수립 소스 코드 예시 1. Oracle Cloud Bucket 이란? 간단하게 요약하자면 오라클 클라우드의 객체 스토리지 서비스로 다양한 유형의 파일(이미지, 동영상, 문서)과 데이터(DB 백업, 로그등)를 저장하는데 사용되는 컨테이너이다. 디렉토리 구조로 관리되고 있어 직관적이고 데이터를 유연하게 저장..

이번 포스팅에서는 MySQL 과 Next.js를 연동하는 방법에 대해 정리해보려 한다. (접속이 가능한 MySQL Database 접속정보가 있거나 설치가 되어 있다는 전제하에 진행) ※ 주의할 점 npm 으로 설치한 mysql 모듈은 서버 사이드 로직에서 실행되기 때문에 클라이언트 사이드 로직에서는 직접 붙을수가 없다. 클라이언트 사이드 로직에서 DB와 연동하여 데이터를 가져와야 한다면 Next.js 의 API Routes 기능을 사용하여 fetch 나 axios로 데이터를 가져오거나 서버에서 실행되는 getServerSideProps나 getStaticProps 를 사용하여 mysql 모듈로 데이터를 가져오고 해당 컴포넌트에 데이터를 props로 내려주는 방법을 상황에 맞게 사용하는 것을 추천한다. ..

저번 포스팅에 이어서 이번 포스팅은 이전 포스팅에서 생성한 VM 인스턴스(CentOS 기준)에 MySQL을 설치하는 방법에 대한 포스팅이다. 목차는 아래와 같다. 오라클 클라우드 VM 인스턴스 Port 설정 CentOS 방화벽 설정 MySQL 설치 1. 오라클 클라우드 VM 인스턴스 Port 설정 인스턴스에 DB를 설치하고 외부에서 DB에 접속하기 위해 MySQL이 사용하는 기본포트인 3306 포트를 인스턴스 VCN 보안 목록에서 허용해줘야 한다. 우선 메뉴 > 인스턴스 화면으로 이동 후 기본 VNIC 항목 하위의 서브넷을 클릭하여 서브넷 세부정보 화면으로 이동한다. 서브넷 세부정보 화면에서 Default Security List 를 클릭하여 해당 서브넷의 보안목록 세부정보 화면으로 이동 후 수신 규칙 ..

저번 포스팅에서 인스턴스 생성시 공용 IP가 자동으로 부여된 것을 확인할 수 있었는데 찾아보니 해당 public IP 는 임시 IP 로 인스턴스 재부팅등에 의해 변동될 수 도 있다는 정보를 확인했다. 이번 포스팅에서는 이런 인스턴스의 임시 공용 IP를 고정 IP로 바꾸는 방법에 대해 알아보려 한다. 1. 예약된 공용 IP 관리 메뉴 -> 네트워킹 -> 예약된 공용 IP 항목으로 이동한다. 예약된 공용 IP 항목 탭을 클릭 후 구획을 이전 포스팅에서 만들었던 구획으로 변경 후 'Reserve public IP adrdress' 버튼을 클릭한다. 2. 예약된 공용 IP 관리 생성 원하는 공용 IP 이름을 입력하고 하단의 Reserve public IP address 를 클릭하면 사용가능한 랜덤한 IP 주소가..