다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 이제 마지막 회원 인증 관련 API인 로그아웃 구현이다. 이는 매우 간단한 작업으로, 쿠키를 지워주기만 하면 되었다. 1. 로그아웃 구현 - src/api/auth/auth.ctrl.js /* POST /api/auth/logout */ export const logout = async (ctx) => { // 로그아웃 ctx.cookies.set('access_token'); ctx.status = 204; // No content }; - Postman 테스팅 결과 Set-Cookie의 access_token이 비워졌음을 확인하였다. 이렇게 회원 인증 시스템 작성은 끝이 났다. 이제 기존에 구현했던 posts API에 회..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 이제 클라이언트에서 사용자 로그인 정보를 지닐 수 있도록 토큰을 발급하자. JWT 토큰을 만들기 위해서 jsdonwebtoken 이라는 모듈을 설치한다. $> yarn add jsonwebtoken 1. 비밀키 설정하기 .env 파일을 열어서 JWT 토큰을 만들 때 사용할 비밀키를 만든다. 비밀키는 문자열로 아무거나 상관없으며, 길이도 자유다. 이 비밀키는 나중에 토큰의 서명을 만드는 과정에서 사용되므로 외부에 공개되면 절대로 안 된다. 비밀키가 공개되면 누구든지 마음대로 토큰을 발급할 수 있게 된다. - .env PORT=4000 MONGO_URI= mongodb://localhost:27017/blog JWT_SECRET..

- src/api/auth/auth.ctrl.js export const login = async (ctx) => { // 로그인 const { username , password } = ctx.request.body; // username, password 없으면 에러 처리 if(!username || !password) { ctx.status = 401; return; } try{ const user = await User.findByUsername(username); // 계정이 존재하지 않으면 에러 처리 if(!user) { ctx.status = 401; return; } const valid = await user.checkPassword(password); // 비밀번호가 일치하지 않는 경우..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 서버에 회원 인증 시스템을 구현하였다. 시스템을 구현하기 위해서 JWT라는 기술을 사용하였는데 이는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 토큰? 그렇다면 토큰이 무엇일까 ? 사용자의 로그인 상태를 서버에서 처리하는 데 사용하는 방식에는 대표적으로 두 가지 방식이 있다. 하나는 세션 기반 인증 시스템, 하나는 토큰 기반 인증 시스템이다. 1. 세션 기반 인증 시스템 한 마디로, 서버가 사용자가 로그인 중임을 항상 기억하고 있다는 뜻이다. 사용자가 로그인을 하면, 서버는 세션 저장소에 사용자 정보를 조회하고, 세션 id를 발급한다. 사용자의 브라우저의 쿠키에 이 세션 id가 ..

현재 만들어 놓은 list API는 작성된 모든 포스트를 불러오도록 작성되어있다. 만약 포스트 개수가 몇 백 개라면 로딩 속도가 느려질 것이므로 페이지화 하는 것이 좋다. 이를 페이지네이션 (pagination) 한다고 한다. 또, 포스트의 목록을 조회할 때에는 포스트의 내용 중 일부만 보여주고, 클릭시 포스트의 전체 내용을 보여주는 것이 합당하다. 1. 가짜 데이터 생성 우선, 페이지네이션 기능 구현을 위해 가짜 데이터를 생성한다. - src/createFakeData.js import Post from './models/post'; export default function createFakeData() { // 0,1,2, ... 39로 이루어진 배열을 생성한 후 포스트 데이터로 변환 const p..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 이제 포스트 작성시 제목, 내용, 태그를 모두 전달 받도록 만들어보자. 클라이언트가 셋 중 하나의 값이라도 빼먹었을 경우, 400 오류 (Bad Request)가 발생하여야 한다. 지금은 따로 처리하지 않았기 때문에 요청 내용을 비운 상태에서 write API를 실행해도 요청이 성공하여 비어있는 포스트가 등록된다. 객체를 검증하기 위해서는 if 문으로 비교하는 방법도 있지만, 유효성 검사를 도와주는 Joi 라이브러리를 설치하여 사용해보고자 한다. - 터미널 yarn add joi 1. write API 검증 - src/api/posts/posts.ctrl.js import Joi from 'joi'; ... /* POST /..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 클라이언트가 잘못된 id를 전달했다면 400 Bad Request 오류를 띄워주는 것이 올바르다. 현재로서는 올바르지 않은 형식의 id가 전달되면 500 오류가 발생한다. 요청 검증을 통해 400 오류가 뜰 수 있도록 바꿔보자 ! mongoose에서 id 값이 올바른 ObjectId 인지 확인하는 방법은 다음과 같다. import mongoose from 'mongoose'; const { ObjectId } = mongoose.Types; ObjectId.isValid(id); 여기서 id는 검증하고자 하는 id이다. 현재 ObjectId를 검증해야 하는 API는 read, remove, update이다. 이 세 함수에 검..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 1. 데이터 생성 : 블로그 포스트 작성 - src/api/posts/posts.ctrl.js import Post from '../../models/post'; /* POST /api/posts { title: "제목", body: "내용", tags: ['태그1','태그2'] } */ export const write = async (ctx) => { const {title, body, tags} = ctx.request.body; const post = new Post ({ title, body, tags, }); try{ await post.save(); ctx.body = post; } catch(e) { ctx.t..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 1. MongoDB MongoDB는 관계형 데이터베이스가 아닌, 문서지향적 NoSQL 데이터베이스이다. 그럼 여기서, 문서란? 문서 ❓ RDBMS의 레코드(record)의 개념. 한 개 이상의 키-값 쌍으로 이루어진다. 다음은 문서의 예이다. - 문서의 예시 { "_id" : ObjectId("509980132123"), "username" : "subbni", "name" : { first : "S.B", last : "Oh" } } 새로운 문서를 만들면 _id라는 고윳값을 자동생성한다. - 문서는 BSON 형태로 저장된다. BSON ❓ JSON 문서를 바이너리로 인코딩한 형태 여러 문서가 들어있는 곳은 컬렉션이라 한다. ..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. 기존 src/index.js 파일 하나에 모두 작성한 라우터들을 여러 파일에 분리시켜서 작성하여 모듈화 시킨 뒤, 다시 src/index.js 파일에서 불러와 적용하였다. - src/api/index.js const Router = require('koa-router'); const api = new Router(); api.get('/test', (ctx) => { ctx.body = '성공'; }); // 라우터를 내보낸다. module.exports = api; - src/index.js const Koa = require('koa'); const Router = require('koa-router'); const ap..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다. const Koa = require('koa'); const app = new Koa(); // ctx : 웹 요청과 응답에 관한 정보가 담김 // next : 현재 처리 중인 미들웨어의 다음 미들웨어를 호출하는 함수 app.use(async (ctx, next) => { console.log(ctx.url); console.log(1); if (ctx.query.authorized !== '1') { ctx.status = 401; //unauthorized return; } // next() 함수는 Promise를 반환한다. await next(); console.log('END'); // next().then(() =>..

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용으로 작성된 글입니다. const RenderPropsSample = ({children}) => { return 결과: {children(5)} ; }; export default RenderPropsSample; 만약 위와 같은 컴포넌트가 있다면 추후 사용할 때 다음과 같이 사용할 수 있다. {value=> 2*value}; RenderPropsSample 에게 children으로 함수를 전달하면, 해당 컴포넌트에서는 이 함수에 5를 인자로 넣어서 결과 : 10을 렌더링한다. 이러한 패턴을 Function as a child, 혹은 Render Props라고 한다. 컴포넌트의 children이 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 ..