거니의 velog

* 드디어 블로그 프로젝트의 마지막 장이다. 이 장에서는 포스트를 수정하는 기능과 포스트를 삭제하는 기능을 구현하고, 프로젝트를 마무리한다. * 이번 실습은 다음 흐름으로 진행된다. 1. 포스트 수정 * 먼저 포스트 수정 기능을 구현해 보자. (1) PostActionButtons 컴포넌트 만들기 * 포스트를 읽는 화면에서 포스트 작성자에게만 포스트 상단에 수정 버튼과 삭제 버튼이 나타나도록 렌더링해 보겠다. 이번에 만들 버튼은 기존에 만들어서 사용하던 Button과 스타일이 다르므로, 기존의 Button 컴포넌트를 재사용하지는 않을 것이다. * components/post 디렉터리에 PostActionButtons 라는 컴포넌트를 생성하자. [components/post/PostActionButtons..

(4) 페이지네이션 구현하기 * 이번에는 페이지네이션 기능을 구현해 보자. list API를 만들 때 마지막 페이지 번호를 HTTP 헤더를 통해 클라이언트에 전달하도록 설정했다. 그러나 요청을 관리하는 사가를 쉽게 만들기 위해 작성한 createRequestSaga 에서는 SUCCESS 액션을 발생시킬 때 payload에 reponse.data 값만 넣어 주기 때문에 현재 구조로는 헤더를 확인할 수 없다. * 그렇기 때문에 createRequestSaga를 조금 수정해 줄 것이다. [lib/createRequestSaga.js] (...) export default function createRequestSaga(type, request) { const SUCCESS = `${type}_SUCCESS`;..

(3) HTML 필터링하기 * sanitize-html 이라는 라이브러리를 사용하여 HTML을 필터링해 보겠다. 이 라이브러리는 HTML을 작성하고 보여 주어야 하는 서비스에서 매우 유용하다. 단순히 HTML을 제거하는 기능뿐만 아니라 특정 HTML만 허용하는 기능도 있기 때문에 글쓰기 API에서 사용하면 손쉽게 악성 스크립트 삽입을 막을 수 있다. * 백엔드 프로젝트 디렉터리에서 yarn을 사용하여 sanitize-html을 설치하자. $ yarn add sanitize-html * 이어서 백엔드 프로젝트의 post.ctrl.js를 수정한다. 먼저 맨 위에 sanitize-html을 불러 오자. [src/api/posts/posts.ctrl.js] import Post from '../../models..

(2) 포스트 목록 조회 API 연동하기 * postLIst 컴포넌트에서 실제 데이터를 보여 줄 수 있도록 API를 연동해 보자. 우리가 사용할 list API는 username, page, tag 값을 쿼리 값으로 넣어서 사용한다. API를 사용할 때 파라미터로 문자열들을 받아 와서 직접 조합해도 되지만, 여기서는 qs 라이브러리를 사용하여 쿼리 값을 생성할 것이다. 이 라이브러리를 사용하면 쿼리 값을 더 편리하게 생성하고 JSON으로 변환할 수 있다. * yarn 으로 qs를 설치하자. $ yarn add qs * 그리고 lib/api/posts.js 파일에 다음 함수를 추가하자. import qs from 'qs'; import client from './client'; export const wr..

2. 포스트 목록 페이지 구현하기 * 이번에는 여러 개의 포스트를 보여 주는 포스트 목록 페이지를 구현해 본다. (1) PostList UI 준비하기 * PostList라는 컴포넌트를 만든다. 이 컴포넌트에서는 포스트들을 배열로 받아 와서 렌더링해 준다. 사용자가 로그인 중이라면 페이지 상단 우측에 새 글 작성하기 버튼을 보여 준다. * components/posts 디렉터리를 만들고, 그 안에 PostList 컴포넌트를 다음과 같이 작성해 주자. [components/posts/PostList.js] import React from 'react'; import styled from 'styled-components'; import Responsive from '../common/Responsive'; ..

* 지금까지 회원 인증 시스템과 글쓰기 기능의 구현을 완료했다. 이번 장에서는 등록한 포스트를 조회할 수 있는 기능을 구현해 보자. 포스트를 조회하는 기능은 두 가지가 있다. 첫 번째는 포스트 하나를 읽는 포스트 읽기 기능이고, 두 번째는 여러 포스트를 조회하는 포스트 목록 기능이다. * 이번 실습은 다음 흐름으로 진행된다. 1. 포스트 읽기 페이지 구현하기 * 작성한 포스트를 읽을 수 있는 페이지를 만들어 보자. (1) PostViewer UI 준비하기 * 서버에서 데이터를 받아 오기 전에 먼저 UI를 완성하자. 구현할 UI는 다음 정보를 보여 줄 것이다. * 포스트 제목* 태그 * 작성자 계정명* 제목 * 작성된 시간* 내용 * PostViewer 라는 컴포넌트를 만들어 이 정보들을 보여 줄 것이다...

(3) 글쓰기 API 연동하기 * 글쓰기에 관련된 상태들이 모두 리덕스에서 관리되고 있으니, 이제 글쓰기 API를 연동해 보자. 앞에서 회원 인증에 관련된 API를 요청하는 함수를 auth.js 라는 파일에 만들어 주었다. 이번에는 포스트에 관련된 API를 요청하는 함수를 posts.js 라는 파일에 작성해 보겠다. posts.js 파일을 lib/api 디렉터리에 생성하자. [lib/api/posts.js] import client from './client'; export const writePost = ({ title, body, tags }) => client.post('/api/posts', { title, body, tags }); * 다음으로 이 함수를 호출하는 리덕스 액션과 사가를 준비한다...

3. 리덕스로 글쓰기 상태 관리하기 * 글쓰기 관련 상태를 리덕스로 관리해 줄 차례이다. write 리덕스 모듈을 작성해 주자. [modules/write.js] import { createAction, handleActions } from 'redux-actions'; const INITIALIZE = 'write/INITIALIZE'; // 모든 내용 초기화 const CHANGE_FIELD = 'write/CHANGE_FIELD'; // 특정 key 값 바꾸기 export const initialize = createAction(INITIALIZE); export const changeField = createAction(CHANGE_FIELD, ({ key, value }) => ({ key, v..

2. 에디터 하단 컴포넌트 UI 구현하기 * 에디터 하단에 태그를 추가하는 컴포넌트와 포스트 작성을 완료하거나 취소하는 버튼을 보여 주는 컴포넌트를 만들어 보자. (1) TagBox 만들기 * 태그를 추가하는 컴포넌트 이름은 TagBox라고 하겠다. 이 컴포넌트를 다음과 같이 만들어 보자. [components/write/TagBox.js] import React from 'react'; import styled from 'styled-components'; import palette from '../../lib/styles/palette'; const TagBoxBlock = styled.div` width: 100%; border-top: 1px solid ${palette.gray[2]}; padd..

* 애플리케이션의 회원 인증 시스템이 모두 구현되었다. 이번에는 글쓰기 페이지 기능을 구현할 차례이다. 글쓰기에 관련된 컴포넌트들은 write라는 이름으로 분류할 것이다. * 이번 실습은 다음 흐름으로 진행된다. 1. 에디터 UI 구현하기 * 글을 작성하는 에디터는 Quill 이라는 라이브러리를 사용하여 구현할 것이다. yarn을 사용하여 해당 라이브러리를 설치해 주자. $ yarn add quill * 다음으로 components/write 디렉터리에 Editor 컴포넌트를 만들자. 이 컴포넌트에서는 제목과 내용을 입력할 수 있다. 제목은 input을 사용하고, 내용은 Quill 에디터를 사용해 볼 것이다. import React, { useRef, useEffect } from 'react'; imp..