Fe-Dev

이번 포스팅에서는 next.js 로 개인프로젝트를 진행하며 next-auth를 적용하여 로그인 기능을 구현했던 과정에 대해 공유해보려 한다. 왜 Next-Auth 였나 ? 무엇보다 Next Auth 를 사용한 가장 큰 이유는 쉽고 간단하게 구현할 수 있기 때문이였다. DB 통신을 하여 로그인을 직접 구현하는 것 이외에도 Oauth, Email 를 사용하여서도 쉽게 구현할 수 있도록 가이드가 잘 되어있고 발급받은 jwt 를 crsf 토큰을 활용해 매 사용자 요청을 검증하도록 안전하게 설계되어 있다.(자세한 정보는 next-auth 공식 레퍼런스(https://next-auth.js.org)를 참고) Oauth 소셜로그인 기능도 구현해보고 싶었지만 일단 제일 기본적인 로그인 부터 구현해보고 싶어서 이번 포스..

이번 포스팅에서는 리덕스 사가를 개인 프로젝트에 적용하면서 알게된 것들을 정리해보려 한다. 개인프로젝트로 next.js로 블로그를 만들고 있는데 특정 사용자의 블로그로 접속했을때 해당 블로그의 사용자 정보(계정, 블로그명 등)와 최근 게시글, 인기게시글, 최근 댓글등 과 같은 정보를 왼쪽 영역에서 공통 layout으로 표출해주고 있었다. 이 데이터들은 _app.tsx 파일에서 getInitialProps로 서버사이드에서 데이터를 가져와서 layout 파일에 props로 내려주고 있었는데 해당 레이아웃을 사용하는 파일이 여기저기 있다보니 같은 props 가 무분별하게 사용되는게 보기 좋지 않았다. 이번기회에 리덕스를 프로젝트에 적용해보고 싶기도 해서 리덕스를 사용하여 해당 데이터를 상태로 관리하되 서버사이..

이번 포스팅에서는 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에게 전달하여 상태의 값을 변경하고 변경된 상태의 값을 컴포넌트로 전달해주는 역할을 한다. 즉..

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