거니의 velog

* 애플리케이션의 회원 인증 시스템이 모두 구현되었다. 이번에는 글쓰기 페이지 기능을 구현할 차례이다. 글쓰기에 관련된 컴포넌트들은 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..

2. 회원가입과 로그인 구현 * 지금부터는 서비스에서 회원가입 기능과 로그인 기능을 구현한다. 먼저 UI부터 개발한 다음에 리덕스를 통한 상태 관리 및 API 요청을 구현할 것이다. (1) UI 구현하기 * 나중에 리덕스를 사용하여 컨테이너 컴포넌트를 만들고 상태 관리도 하겠지만, 지금 당장은 상태에 대해서는 신경 쓰지 않고 오직 UI만 개발하자. * 프레젠테이셔널 컴포넌트들은 components 디렉터리에 작성하고, 그 안에 기능별로 디렉터리를 새로 만들어서 컴포넌트를 분류할 것이다. 앞에서 Button 컴포넌트를 common이란 디렉터리에 만들었는데, 이미 설명했듯이 Button 컴포넌트는 여기저기서 재사용되는 컴포넌트이므로 common 디렉터리에 넣은 것이다. 회원 인증에 관련된 컴포넌트는 회원 인..

* 이 장에서는 리액트 프로젝트를 생성하여 지금까지 만든 서버에 연동해 볼 것이다. 프로젝트를 만들어 가면서 지금까지 배운 다양한 기술을 활용해 줄 것이다. 이 과정을 통해 실무에서 프로젝트를 개발할 때 어떤 방식으로 작업하는지 알 수 있다. * 프로젝트를 시작하기 전에 앞으로 어떤 기능을 개발하는 지 간략하게 살펴보자. (1) 회원가입/로그인 기능 (2) 글쓰기 기능 : 이 과정에서 Quill 이라는 WYSIWYG 에디터 라이브러리를 사용한다. * WYSIWYG 란 'What You See Is What You Get'의 약어이다. 사용자가 보는 대로 결과를 얻는다는 의미이며, '위지윅'이라고 읽는다. 위지윅 에디터에서는 글을 쓸 때 HTML을 직접 입력하면서 스타일을 설정하는 것이 아니라, 에디터에서..