React/ReactJs

React - FrontEnd Project - 6

PostActionButtons 컴포넌트 포스트를 읽는 화면에서 포스트 작성자에게만 포스트 상단에 수정 버튼과 삭제 버튼이 나타나도록 렌더링 해보겠습니다. 이 버튼의 style은 common Button스타일과 다르므로 그냥 만들도록 하겠습니다. src/components/post/PostActionButtons.js import React from 'react'; import styled from 'styled-components'; import palette from '../../lib/styles/palette'; const PostActionButtonsBlock = styled.div` display: flex; justify-content: flex-end; margin-bottom: 2rem..

React - FrontEnd Project - 5

지금까지는 회원 인증 시스템과 글쓰기 기능의 구현을 완료했습니다. 이번에는 등록한 포스트를 조회할 수 있는 기능을 구현하겠습니다. 포스트를 읽는 것에는 두 가지가 있는데 첫 번째는 포스트 하나를 읽는 포스트 읽기 기능이고, 두 번째는 여러 포스트를 조회하는 포스트 목록 기능입니다. PostView UI src/components/post/PostView.js import React from 'react'; import styled from 'styled-components'; import palette from '../../lib/styles/palette'; import Responsive from '../common/Responsive'; const PostViewBlock = styled(Respo..

React - FrontEnd Project - 4

3까지 애플리케이션의 회원 인증 시스템이 모두 구현되었습니다. 이번에는 글쓰기 페이지 기능을 구현해 보겠습니다. 글쓰기와 관련된 컴포넌트들은 write라는 이름으로 분류하겠습니다. 에디터 UI구현하기 글을 작성하는 에디터는 Quill이라는 라이브러리를 사용하여 구현하겠습니다. src/components/write/Editor.js import React, { useRef, useEffect } from 'react'; import Quill from 'quill'; import 'quill/dist/quill.bubble.css'; import styled from 'styled-components'; import palette from '../../lib/styles/palette'; import Re..

React - React Router v6

라우팅이란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미합니다. 웹 애플리케이션을 만들 떄 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지를 구성할 수도 있겠지요 우리가 블로그를 만든다고 가정해봅시다. 블로그 애플리케이션은 주로 여러 페이지로 구성이 되어있습니다. 어떤 페이지가 필요한지, 한번 생각해 봅시다. 글쓰기 페이지 : 새로운 포스트를 작성하는 페이지입니다. 포스트 목록 페이지 : 블로그에 작성된 여러 포스트들의 목록을 보여주는 페이지입니다. 포스트 읽기 페이지 : 하나의 포스트를 보여주는 페이지 입니다. 라우팅 관련 기능을 리액트 라이브러리에서 공식적으로 지원하는 것이 아니라 써드 파티로서 제공되기 때문에 , 이 외에도 re..