거니의 velog

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