거니의 velog

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..

(3) 로그아웃 기능 구현 * 이번에는 로그아웃 기능을 구현해 보자. 로그아웃 기능을 구현하는 것은 간단하다. 로그아웃 API를 호출하고, localStorage 안의 값을 없애 주면 된다. * 먼저 lib/api/auth.js 파일을 열어서 logout 함수를 만들어 주자. import client from './client'; // 로그인 export const login = ({ username, password }) => client.post('/api/auth/login', { username, password }); // 회원가입 export const register = ({ username, password }) => client.post('/api/auth/register', { user..

(2) 로그인 상태를 보여 주고 유지하기 * 로그인 페이지에서 로그인에 성공하면 헤더 컴포넌트에서 로그인 중인 상태를 보여 주고, 새로고침을 해도 이 상태가 유지되도록 해 보자. [1] 로그인 상태 보여주기 * 먼저 헤더 컴포넌트에 리덕스를 연결시켜 보자. containers 디렉터리에 common 디렉터리를 만들고, 그 안에 HeaderContainer 컴포넌트를 작성해 보자. import React from 'react'; import { useSelector } from 'react-redux'; import Header from '../../components/common/Header'; const HeaderContainer = () => { const { user } = useSelector(..

3. 헤더 컴포넌트 생성 및 로그인 유지 (1) 헤더 컴포넌트 만들기 * 헤더 컴포넌트를 만들기 전에 Responsive 라는 컴포넌트를 작성할 것이다. 반응형 디자인을 할 때 더 편하게 작업하기 위해서이다. Responsive 컴포넌트는 추후 다양한 컴포넌트에서 사용할 수 있게 때문에 common 디렉터리로 분류한다. import React from 'react'; import styled from 'styled-components'; const ResponsiveBlock = styled.div` padding-left: 1rem; padding-right: 1rem; width: 1024px; margin: 0 auto; /* 중앙 정렬 */ /* 브라우저 크기에 따라 가로 사이즈 변경 */ @me..

(5) 로그인 구현 * 회원가입을 구현할 때와 비슷하게 로그인 기능도 구현해 보겠다. LoginForm 컴포넌트를 다음과 같이 수정해 보자. [containers/auth/LoginForm.js] import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { withRouter } from 'react-router-dom'; import { changeField, initializeForm, login } from '../../modules/auth'; import AuthForm from '../../components/auth/AuthForm'; import { check ..

(4) 회원가입 구현 * 바로 회원가입 기능을 구현해 보자. 오류 처리는 나중에 할 것이므로, 지금은 신경 쓰지 말고 코드를 작성해 보자. [containers/auth/RegisterForm.js] import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { changeField, initializeForm, register } from '../../modules/auth'; import AuthForm from '../../components/auth/AuthForm'; const RegisterForm = () => { const dispatch = useDispatch..

(3) API 연동하기 * 이제 API를 연동해 보자. axios를 사용하여 API를 연동해 보자. 그리고 리덕스에서 비동기 작업을 쉽게 관리하기 위해 redux-saga와 이전에 만들어서 사용했던 createRequestSaga 유틸 함수를 이용해 보겠다. * 먼저 필요한 라이브러리를 설치해 주자. $ yarn add axios redux-saga { "name": "blog-frontend", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.19.0", // axios 추가 "immer": "^3.1.3", "react": "^16.8.6", "react-dom": "^16.8.6", "react-redux": "^7.1.0",..

(2) 리덕스로 폼 상태 관리하기 * 이번에는 리덕스로 회원가입과 로그인 폼의 상태를 관리하는 방법을 알아보자. 이전에 만들어 놓았던 auth 모듈을 다음과 같이 수정해 보자. [modules/auth.js] import { createAction, handleActions } from 'redux-actions'; import produce from 'immer'; const CHANGE_FIELD = 'auth/CHANGE_FIELD'; const INITIALIZE_FORM = 'auth/INITIALIZE_FORM'; export const changeField = createAction( CHANGE_FIELD, ({ form, key, value }) => ({ form, // register..