미니 블로그 만들기 - 01

미니 블로그 기획해보기

• 필요한 기능

  • 글 목록 보기 기능 (리스트 형태)
  • 글 보기 기능
  • 댓글 보기 기능
  • 글 작성 기능
  • 댓글 작성 기능

• 주요 컴포넌트 구성하기

  • 글 목록 보기 기능 : MainPage, PostList, PostListItem
  • 글 보기 기능 : PostViewPage
  • 댓글 보기 기능 : CommentList, CommentListItem
  • 글 작성 기능 : PostWritePage
  • 댓글 작성 기능 : CommentWrite

---

레이아웃 디자인 짜보기 - Figma

Figma와 같은 Tool을 활용해 와이어프레임을 그려봅니다.

---

UI 컴포넌트 구현

웹 사이트에 필수적으로 필요한 UI 컴포넌트를 먼저 구현해보겠습니다.

프로젝트 설계는 Top Down 방식으로 큰 틀부터 기획한 후 작은 부분을 구체화합니다.
프로젝트 구현은 Bottom Up 방식으로 작은 요소(UI 컴포넌트 등)부터 구현한 후 모아서 큰 부분을 완성합니다.

• 폴더 구성하기

  src

  component

  ui

---

Material-UI

참고 : MUI

MUI를 사용하면 이미 잘 설계된 컴포넌트를 사용하여 개발 시간을 줄일 수 있으며, 일관된 디자인을 적용할 수 있습니다.

가장 큰 장점은 기능적인 UI를 제공하면서 다양하게 커스터마이징을 할 수 있다는 점입니다.

• 설치

  // MUI + emotion
  npm install @mui/material @emotion/react @emotion/styled
  

---

index.js 파일 수정

앞으로 MUI를 사용하기 위해 index.jsx 파일을 작성하겠습니다.

• CssBaseline : reset.css 대신 MUI에서 사용하는 CSS reset

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import CssBaseline from "@mui/material/CssBaseline";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <>
    <CssBaseline />
    <App />
  </>
);

---

버튼 컴포넌트 구현

MUI를 활용해 글 작성하기, 글 작성 완료, 뒤로 가기 등에서 사용할 버튼 컴포넌트를 구현해보겠습니다.

props로 title 값을 받아 버튼 안에 출력하겠습니다.

색상은 MUI에서 제공해주는 기본 색상인 primary로 설정하고 variant의 값을 contained로 설정해 안을 채워주겠습니다.

MUI의 Button Component API는 MUI-Button API에서 확인할 수 있습니다.

import * as React from "react";
import { Button } from "@mui/material";
import { styled } from "@mui/material/styles";

const StyledButton = styled(Button)`
  padding: 8px 16px;
  border-radius: 8px;
  border-width: 1px;
  font-size: 8px;
  font-family: sans-serif;
  font-weight: 600;
  cursor: pointer;
`;

export default function BasicButton(props) {
  const { title, onClickItem } = props;

  return (
    <>
      <StyledButton onClick={onClickItem} variant="contained" color="primary">
        {title}
      </StyledButton>
    </>
  );
}

---

TextInput 컴포넌트 구현

글이나 댓글 작성 시 제목과 내용 등을 입력할 TextInput 컴포넌트를 구현해보겠습니다.

버튼 컴포넌트와 유사하게 MUI의 TextField 컴포넌트를 import한 후 커스터마이징해서 사용해보곘습니다.

Button API처럼 TextField API를 확인한 후 사용해줍니다.

import * as React from "react";
import { TextField } from "@mui/material";
import { styled } from "@mui/material/styles";

const StyledTextInput = styled(TextField)`
  width: 100%;
  font-size: 16px;
  line-height: 20px;
`;

const TextInput = (props) => {
  const { rows, value, onChange, placeholder } = props;

  return (
    <>
      <StyledTextInput
        value={value}
        onChange={onChange}
        id="content"
        label={placeholder}
        multiline={rows > 1 && true}
        rows={rows}
        variant="filled"
      />
    </>
  );
};

export default TextInput;

커스터마이징 후 생성한 컴포넌트에 rows, value, onChange, placeholder 속성값으로 주었습니다.

• rows

  생성할 텍스트필드가 화면에 나타낼 행의 수를 의미하며 1이 아닐 때 입력값이 넘어갈 경우 스크롤로 내려갑니다.

• value

  입력하는 문자열을 말하며 onChange를 통해 변화를 감지합니다.

• onChange

  value가 변화했을 때 실행될 함수입니다.
  TextInput 컴포넌트를 사용하는 상위 컴포넌트에서 받아오겠습니다.

• placeholder 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 의미합니다.

---

정리

반복적으로 사용할 UI 컴포넌트를 먼저 구현했습니다.

다음에는 UI 컴포넌트를 실제로 사용할 list 컴포넌트를 구현해보곘습니다.