.prettier settings

// .prettierrc
{
  "singleQuote": false,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

• JS 표기법 : camelCase (첫 글자 소문자로)
• 상수표현 : SNAKE_CASE
• styled-components props : $붙일것. (ex: $isDone)
• css : rem(반응형 웹브라우저 만들 때 사용) = pixel / 10 (ex: 1rem = 10px)
• 폴더 이름 : 소문자 작성
• 컴포넌트 이름 : CamelCase (첫 글자 대문자로)
• 스타일 파일 이름: 컴포넌트.style.js
• styled-components import 가이드 - 모르겠으면 test 파일 참고
  • 예제 파일 (project 내에 src/components/test 폴더)

// src/components/test/test.style.js
import { styled } from "styled-components";

export const TestContainer = styled.div`
  width: 10rem;
  height: 10rem;
  background-color: red;
`;

// src/components/test/Test.jsx
// *로 불러오고 as로 별칭을 St로 사용한다.
import * as St from "./test.style";

function Test() {
          // St.스타일링된 컴포넌트 명으로 사용
  return <St.TestContainer>Test</St.TestContainer>;
}

export default Test;