className, 상수, 변수 명 컨벤션

• className : 소문자 + hyphen case

//bad
<div className="userProfile"></div>

//good
<div className="user-profile"></div>

• 상수 데이터 : 대문자 + snake case

//예시 : 변하지 않는 sensor list data 상수를 선언할 때

//bad
const sensorListData = [0,1,2];

//good 
const SENSOR_LIST_DATA = [0,1,2];

• 변수 데이터 : camelCase

//예시 : state 선언할 때

//bad
const [usernickname, serusernickname] = useState('jack');

//good 
const [userNickname, setUserNickname] = useState('jack');

commit, PR, branch, file 명 컨벤션

• commit, PR
• branch
• File

theme.js - playkeyboard 한정

//컬러예시 - 사용하고 싶은 styled-component에서
color: ${({ theme }) => theme.colors.grayText};

//미디어쿼리 예시 - 사용하고 싶은 styled-component에서
@media ${({ theme }) => theme.responsive.tablet} {
    .category-container {
      width: 100%;
    }
  }

라이브러리

• axios
  • https://axios-http.com/kr/docs/intro
• styled-components

  • https://styled-components.com/

  • global styled-component로 공통 스타일 관리 참고 블로그 : https://velog.io/@hinyc/Styled-Component-reset-CSS

  • 스타일드 컴포넌트 import

    import styled from 'styled-components';
    

  • vscode extentions 설치 필요!

    - vscode-styled-components (코드 컬러 색상)
    - styled-components-snippets (자동 완성)
    

import 순서

• 노션 참고 https://www.notion.so/wecode/c44dfdcce6bb4db8a08f10dd7c329caa

  1-1. import 순서

  • import를 통해 해당 파일에서 어떤 것들이 필요한지 한 눈에 알아볼 수 있어야 합니다.
  • 가독성을 위해 import 분류별로 한 줄 띄우는 것도 GOOD!
  • 순서

• src폴더의 이미지 가져오기

  <img src={require('../../assets/image.jpg')} />
  

반응형 breakpoint (미디어쿼리 사용) - playkeyboard 한정