거니의 velog

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

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