`20.10.28_회의내용

변수 & 컴포넌트 이름 규칙

• 함수명, 변수명 등 축약하지 않기
• img(x), image(o)
• btn(x), button(o)
• wrapper vs container(✅)
• index
  • for문 안에서
    • i -> j -> k
    • for문은 최대한 지양
  • 고차함수의 인수
    • idx
    • forEach() reduce((acc, card, idx) => {})
  • 그 외 변수명
    • index
    • const selectedCardIndex = ...
• 그외는 리뷰를 통해서 고쳐나가기

컴포넌트 이름 규칙

기존 태그를 대체하는 것

• prefix : Custom을 붙인다.

• styled를 지정하는 변수명 = 기존 태그명 그대로 사용

  • CustomButton

  components
  --buttons
    -- CustomButton.js
    -- colors.js

  import OpenColor from 'open-color';
  // https://yeun.github.io/open-color/
  
  export default const colorStyle = {
  	default: {
  		background: OpenColor.white,
  		color: OpenColor.gray7
  	}
  }

  import React from 'react';
  import styled from 'styled-components';
  import PropTypes from 'prop-types';
  import color from './color';
  
  const Button = styled.button`
   width: fit-content;
   border-radius: 0.4rem;
   padding: 0.5rem;
   ${(props) => props.style};
  `;
  
  function CustomButton({ handleClick, children, style }) {
  	const colorStyle = colors.[style.color] || colors.["default"];
  	const fontSize = style.size === 'sm' ? 0.8rem : 1rem;
  	return <Button style = {'font-size': fontSize, ...colorStyle} onClick={handleClick}>{children}</Button>;
  }

복합적인 컴포넌트 구조를 구현할때

postfix:

xxContainer

— xxHeader

— xxBody

— xxItem

페이지 구현

• 한 페이지를 구현하는데 필요한 페이지 컴포넌트는 각 파일로 분리하고 같은 디렉토리로 모은다. (재사용되는 것 제외)
• routes/${page이름}

ERD 작업

• ERD도 어느정도 정해야 할 것 같다.
  • 백엔드에서 데모 API 구현과 프론트 작업이 같이 진행된다면 같은 시점에서 데이터 모델링이 필요하다고 생각됨.

https://dbdiagram.io/d/5f993bd73a78976d7b797efe

기타사항

Squash merge를 사용했을때 생길 수 있는 문제

rebase --onto

Git 사용 중 자주 만나는 이슈 정리