데브코스 SNS 프로젝트: MUI, commit tool, postman,git reset, read me 작성팁

material UI / MUI

템플릿, 컴포넌트, 아이콘 등을 제공하여 간편하게 UI를 만들 수 있도록 도와주는 부트스트랩과 비슷한 라이브러리. 태크 내에서 기본값을 조절할 수 있으며, styled component와 비슷하게 클래스값을 따로 설정할 수 있기 때문에 함께 사용하면 좋다. 링크

개인적으로 디자인은 딱 라이브러리 느낌이라 별로였지만, 컴포넌트 등을 사용할 때 hover, focus 등의 효과를 자동으로 넣어주는 것이 편리했고, material icon을 피그마에서도 플러그인으로 사용할 수 있다는 점이 가장 좋았다.

사용예시

import {
  makeStyles,
  Card,
  Avatar,
  Typography,
} from "@material-ui/core";
import { MoreVert } from "@material-ui/icons";

const useStyles = makeStyles((theme) => ({
  root: {
    justifyContent: "center",
    maxWidth: 560,
    padding: 0,
  },
  avatar: {
    backgroundColor: theme.palette.primary.light,
  },
  card: {
    marginTop: "7%",
    marginBottom: "12%",
  },
}));

const NoPostPage = () => {
  const classes = useStyles();

  return (
    <Container className={classes.root}>
          <Typography
            className={classes.postContent}
            variant="body1"
            color="textSecondary"
            component="p"
            align="center"
          >
            첫 글을 작성해보시겠어요?
          </Typography>
    </Container>

---

커밋 컨벤션과 gitmogi

커밋 메시지를 통일하기 위해 사용된 컨벤션과 깃모지. 커밋메시지를 깔끔하게 정리해준다.
쿡앱스 Conventional Commits

gitmogi

커밋 시 이모지를 이용하여 가독성을 높여준다. VSCODE의 gitmoji 플러그인을 사용하면 어떤 상황에서 사용하는 지 까지 보여주기 때문에 편리하다. 링크

---

postman

프로젝트를 진행하면서 API가 잘 되는지 테스트 해볼 때가 많았는데, 이때 편리하게 API를 테스트 해볼 수 있는 툴이다. 또한 팀원과 테스트 결과를 공유하는 등 API 개발의 생산성을 높여주는 기능도 있다고 한다. 링크

---

git reset

깃을 사용하면서 실수로 잘못된 커밋 혹은 푸쉬를 사용했을 때 사용하는 방법이다. 이번 프로젝트에서 실수로 다른 브랜치에서 푸쉬했던 것을 reset hard했는데, 3명이서 개발하는 조그만 토이프로젝트여서 사용했던 것이고, 왠만하면 아예 기록을 없애는 reset 보다는 기록을 남길 수 있는 revert를 하는 것이 좋다.

git reset을 하면서 많은 도움을 받았던 사이트: da-nyee, 쫄보의삽질

---

read me 작성팁

프로젝트 리드미를 작성할 때 참고하면 좋은 팁이다.

RichardLitt standard readme

RichardLitt 리드미 작성법 첫 리드미를 작성하느라 막막했었는데, 찾아본 리드미 작성법 중에서 가장 마음에 들었던 방법이다. 목차별로 나뉘어 있는 것이 좋았다.

마크다운 목차 링크넣기

마크다운 문법으로 [내용](링크) 형식이 아니라, [내용](#헤드 제목)을 넣으면, 클릭시 해당 헤드제목으로 휠이 이동된다. 이때 띄어쓰기는 "-"으로 넣어야 한다.

##배경 ##예시를 넣는다면 ##아무말... 등으로 헤드가 있을 때, [예시를 넣는다면](#예시를-넣는다면) 으로 작성하면, 예시를 넣는다면 클릭 시 해당 헤드로 화면이 이동하게 된다.

뱃지 만들기

깃허브에서 수많은 뱃지들로 장식한 read me를 볼 수 있는데, 이 뱃지들을 쉽게 만들 수 있는 사이트들이 있다. 사이트 별로 뱃지가 조금씩 다를 수 있는데, 나는 [simpleicon](https://simpleicons.org/)을 사용했는데, 디자인은 조금 아쉬웠지만 가장 편리했기 때문에 사용했다. 사용방법은 simpleicon 사이트에서 원하는 브랜드를 검색해서 값을 아래에 넣으면 된다. 이때, 컬러코드를 넣을때 #없이 넣어야 한다.

<a href="[연결할 링크]" target="_blank"><img src="https://img.shields.io/badge/[쓰고 싶은 텍스트]-[컬러 코드]?style=flat-square&logo=[브랜드 이름]&logoColor=white"/></a>

---

참고사이트 colorful-starts 벨로그