Dev

이번 포스팅에서는 Redux Toolkit을 사용하여 보다 효율적으로 Redux를 사용하는 방법을 정리해보고자 한다. 목차 Redux Toolkit 이란? Redux Toolkit 설치 Redux Toolkit 기능과 사용 예시 1. Redux Toolkit 이란? Redux Toolkit은 리덕스의 복잡한 부분을 간소화하여 리덕스를 보다 쉽고 간편하게 사용할 수 있도록 만들어진 라이브러리이다. Redux Toolkit은 기존 Redux를 사용했을때 대비 아래와 같은 이점이 있다. - 초기 저장소를 설정을 기존 Redux 저장소 설정에 비해 간편하게 할 수 있음. - 기존 Redux 코드의 불필요한 반복을 줄이고 보다 간편한 코드로 작성할 수 있는 이점이 있음 - Redux 사용에 용이한 패키지(DevT..

이전포스팅에서 이어서 이번 포스팅에서는 리덕스에서 미들웨어의 기본 개념과 Redux Thunk에 대해서 정리해보려 한다. 목차 미들웨어(Middleware) 란? 미들웨어 함수 생성 비동기처리를 위한 미들웨어 : Redux Thunk 1. 미들웨어(Middleware) 란? Redux 미들웨어를 간단하게 요약하면 action을 dispatch로 전달하고 reducer에 도달하기 이전에 지정된 작업을 실행할 수 있게 해주는 중간자이다. reducer가 dispatch 받은 액션을 처리하기 전에 할 수 있는 작업들은 다양한데 예를 들면 로깅, API 비동기 작업, 라우팅 등이 있다. 2. 미들웨어 함수 생성 미들웨어의 사용 예시를 위해 리덕스 사용시 console 로그를 찍는 간단한 미들웨어 함수를 작성하였..

이번 포스팅에서는 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로 내려주는 방법을 상황에 맞게 사용하는 것을 추천한다. ..