이전에 로그인 API를 구현하고 이제는 컴포넌트들을 생성하여 API와 연결해줘 완성을 했다. 만드는 동안 발생했던 에러들과 내가 새로 알게된 것들과 함께 정리하는 시간을 갖아보려한다. 내가 공부한 로그인 방법의 API를 정리한 글에서 나와있듯이 데이터 입력 > 데이터 검토 > 유효성 검사(토큰확인) > 결과 와 같은 순서로 구성되어있으며, 위의 기능들을 하기 위한 장치들은 API에서 모두 만들어 놨으므로 이제는 이용하는 일만 남았다. 모듈에서는 액션, 액션생성함수, 리듀서, 초기State를 담아주고, 최상위 index에서는 store와 sagaMiddleware, localstorage를 관리해준다. 그리고 컨테이너에서 dispatch로 액션을 전달하여 State에 정보를 전달해준다. 데이터의 흐름은 페..
React
로그인을 구현하려는 목적? 우리가 네이버나 구글의 메일 서비스나 다른 서비스를 이용할 때, 거의 필수적으로 거치는 과정이 있다. 바로 로그인이다. 그만큼 대부분의 웹에 들어가는 기능인 로그인을 구현해보는 시간을 갖도록 하자. 이 계획은 여러 단계로 나누어 글을 작성할 것이다. 오늘은 기본적인 api 구성까지 해보도록 하자. 사용하는 주요 기술 Express : express를 이용해서 서버를 구현할 예정이다. (koa로 하려 했지만 아직은 express가 부족하다 생각하기에 이번에는 express를 이용해 공부를 더 할 예정이다.) Joi : 스키마 언어를 검토해주고, node용 validator보다 관계에 따른 정의가 가능하다. (ex. 옵션 설정에서 a는 필수 요소로 지정하고 b는 필수가 아니라 지정..
koa-router 사용 Koa를 사용할 때에도 라우트 작업을 해줘야 하는데, Koa에는 라우터 기능이 내장되어 있지 않기에 koa-router 모듈을 설치해야 한다. npm i koa-router 1. 기본 사용법 index.js에서 라우터를 불러와 적용하는 방법이다. const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); // 라우터 설정 router.get('/', ctx => { ctx.body = '홈'; }); router.get('/about', ctx => { ctx.body = '소개'; }); // app 인스턴스에 라우터 적용 ap..
nodemon이란? 코드를 변경할 때마다 서버를 자동으로 재시작해주는 도구이다. 우선 설치부터 해보자면 npm i --dev nodemon 개발용 의존 모듈로 설치해주고 package.json 에 script를 다음과 같이 입력한다. { "name": "blog-backend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node src", "start:dev": "nodemon --watch src/ src/index.js" }, "keywords": [], "author": "", "license": ..
시작에 앞서 몇가지 정의에 대해 설명해 보자. 백앤드 데이터 등록과 조회의 방법과 구성에 관한 로직을 만드는 것 Node.js 자바스크립트 엔진 기반으로 웹 브라우저 뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임 Koa Node.js 환경에서 웹 서버를 구축할 때 사용하는 웹 프레임 워크중 하나이며, Express의 개발팀이 개발한 프레임워크이다. Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용해서 사용하므로 필요한 기능만 이용해 서버를 만들 수 있어 Express보다 가볍다. 또한, async/await 문법을 정식으로 지원하기에 비동기 작업을 쉽게 관리할 수 있다. 작업 환경 준비 1. Node 설치 확인 node --version 2. 프로젝트 생성 순서는 디렉..
현제 SSR의 문제점? API를 사용하면 HTML 로 렌더링할 때 서버의 컴포넌트에 대해 모든 데이터가 준비 되어있어야 한다. 이 말은, HTML을 클라이언트에게 보내기 전에 서버의 모든 데이터를 수집해야 한다는 것이다. 그렇다면, 게시물을 렌더링한다고 했을 때 게시물의 데이터가 큰 경우 서버에서 생성하는 HTML의 생성이 게시물의 데이터를 받아와 렌더링하여 클라이언트에 전송하기까지 지연될 수 있다. 이로 인하여 게시물 외 페이지의 다른 영역의 렌더링 또한 지연되게 된다. 또한, Javascript 코드가 로드된 후 HTML을 hydration하고 상호작용할 수 있도록 React에 전달하는데, React는 컴포넌트를 렌더링하는 동안 서버에서 생성한 HTML에 이벤트 핸들러를 첨부한다. 이때 React에서..
