Jun's TID

Node.js 에서 JWT를 사용하여 토큰 기반 인증 시스템을 구축할 수 있다. 세션 기반이나 쿠키와 같은 개념은 생략하고, 어떻게 JWT를 사용하여 토큰을 생성하고 이를 검증하는 지만 확인해보려고 한다. 예제는 직전에 DB연동을 하면서 진행했던 코드를 그대로 가지고 진행한다. 바로 한번 확인해보자. 우선, User라는 모델을 하나 만들고 DB에도 users 테이블을 하나 생성하자. ◎models/User.js module.exports = (sequelize, DataTypes) => ( sequelize.define( "User", { id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true }, name: { type: DataTyp..

직전에 다뤘던 Node.js 런타임에 연장선으로 이번엔 DB를 연동해보려고 한다. 원래대로라면 책에 나온대로 MongoDB와 mongoose를 사용하여 Back-end 서버에 연동하려고 했는데, MongoDB가 유료가 된지 꽤 지나서... 그냥 mySql과 많이들 사용한다는 Node.js ORM 도구인 Sequelize를 사용하여 DB를 연동하고, 간단한 CRUD를 구현해보려고 한다. 바로 시작해보자. Sequelize에 대한 내용은 공식문서인 여기를 참조했으며, 직전 포스팅에서 구현했던 간단한 백엔드 서버를 가지고 실습을 진행하려고 한다. 우선, 아래와 같이 squelize와 mysql 연동을 위한 드라이버, sequelize 커멘드 라인을 위한 cli 까지 설치해주자. npm install seque..

자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임이 바로 지금까지 사용했던 node.js 이다. Node.js 환경에서 웹 서버를 구축할 때는 보통 Express, Hapi, Koa 등의 웹 프레임워크를 사용하지만, 이번 포스팅에서는 책에 나와 있는 그대로 Koa를 사용하여 백엔드 서버를 구축하려고 한다. Koa는 Express의 기존 개발 팀이 개발한 프레임워크이며, 미들웨어, 라우팅, 템플릿, 파일 호스팅 등과 같은 다양한 기능이 자체적으로 내장되어 있는 Express와는 달리 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용하여 사용한다. Koa는 또한 async/await 문법을 정식으로 지원하기 때문에 비동기 작업을 더 편하게 관리할..

SSR(서버 사이드 렌더링)과 같이 React 에서 웹팩 설정을 커스터마이징 해야할 때가 있는데, Create React App 으로 만들 프로젝트에서는 웹팩 관련 설정 파일이 기본적으로 보이지 않는다. 그렇기 때문에 아래와 같이 eject 기능을 실행하여, 해당 파일들을 자유롭게 Config 할 수 있게 해야 한다. 사용법은 매우 간단하다. npn run eject 명령어를 프로젝트 파일이 있는 경로에서 실행해주기만 하면 되는데, 숨겨져 있던 파일들을 불러오는 작업이기 때문에 git에 연동된 프로젝트라면 반드시 이전에 커밋을 하고 실행해야 한다. git add . get commit -m 'commit before eject' npm run eject 를 실행하고 나면, 아래와 같이 웹팩 Config ..

프로젝트를 배포하기 위해서는 반드시 빌드를 해야한다. 이 빌드 작업은 Webpack이라는 도구가 처리하는데, 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일을 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. 리액트에서는 이 빌드 과정에서 화면에 보여지지 않거나 당장 사용하지 않는 기능이 들어간 파일들을 미리 빌드하지 않고, 필요한 시점에 동적으로 불러와서 사용할 수 있게끔 해주는 기능을 구현할 수 있다. 이를 코드 스플리팅이라고 하며, 바로 한번 알아보도록 하자. 자바스크립트 함수 비동기 로딩 컴포넌트 코드를 스플리팅하기에 앞서 일반 자바스크립트 함수를 스플리팅 해보면서 어떤 개념인지 익혀보자. 우선, 아래와 같은 코드가 있을 때 ◎notify.js..

대부분의 경우에는 직전에 다룬 redux-thunk로도 충분히 기능을 구현할 수 있지만, redux-saga 는 좀 더 까다로운 상황에서 유용하게 쓸 수 있다. 아래와 같은 상황에서 redux-saga 를 주로 사용한다. - 기존 요청을 취소 처리해야 할 때(불필요한 중복 요청 방지) - 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행할 때 - 웹소켓을 사용할 때 - API 요청 실패 시 재요청해야 할 때 redux-saga 에서는 ES6의 제너레이터 함수 문법을 사용하는데 보통 일반적인 상황에서는 많이 사용되지 않기 때문에 먼저 다뤄보고 들어가자. generator function 제너레이터 함수의 핵심 기능은 함수를 작성할 때 함수를 특정 구간에 멈춰..

리액트 웹 App에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. 예를 들어, 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, 미들웨어를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다. 우선, 미들웨어를 사용해보기 전에 간단한 작업 환경을 만들어주자. 작업 환경 준비 리덕스로 상태를 관리하는 간단한 카운터 예제를 우선 만들고, 그 위에 미들웨어를 적용해보자. ◎modules/counter.js imp..

이번에는 리덕스를 사용하여 리액트 App의 상태를 관리하는 방법을 알아보려고 한다. 리액트 App에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지보수 하는데 큰 도움이 된다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수도 있다. 리액트 프로젝트에서 리덕스를 사용하기 위해서는 npm install react-redux npm install redux 를 사용하여 라이브러리를 설치하고 사용한다. 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 여기서 프레젠테..

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한 컴포넌트끼리 똑같은 상태를 관리할 때 굉장히 효과적이다. 물론 전역 상태 관리만 한다면 Context API를 사용하는 것으로도 충분하지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. 추가로 아주 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해 준다. 이번 포스팅은 리덕스를 리액트에 적용하기 전에 알아야 할 개념들을 먼저 훑어볼 예정이다. - 액션 상태에 어떠한 변화가 필요하면 액션이..

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 때는 어떻게 해야할까? 리액트 App은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 하지만 최상위 컴포넌트부터 데이터를 전달하는 방식은 다뤄야할 컴포넌트 / 데이터의 수가 많아지면 많아질 수록 사람이 일일이 관리하기가 거의 불가능한 수준까지 갈 수 있다. 그렇기 때문에 리덕스나 MobX와 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 더 편하게 처리할 수 있다. 리액트 v16.3 업데이트 이후에는..