🙌🏻 논의 사항

코드 컨벤션 정하기

• snippets 확장 사용 - ES7+ React/Redux/React-Native snippets

  • rfc명령어로 컴포넌트 생성하면 됩니다.
  • import React from 'react';제거하는 방법.

  1. VSCode 'User Settings'(컨트롤 + ,)
  2. React Snippets 검색
  3. 'React Snippets > Settings: Import React On Top' 체크 해제
  

  

  installed ES7+ React/Redux/React-Native snippets, but i don't have _rfce

1. 변수명, 함수명
변수 / 함수 : camelCase
상수: SNAKE_CASE / 대문자
식별자/클래스/컴포넌트/인터페이스 : PascalCase

(ts 파일은 camelCase / tsx 파일은 PascalCase)
ts 파일 담은 디렉토리명 : camelCase
컴포넌트(tsx) 디렉토리명 : PascalCase

2. 함수, 컴포넌트 작성
pages 안 페이지 렌더링 파일들은 camelCase
컴포넌트 만들 때 export default 함수 명 앞에 붙인다.
함수 선언식 사용 function Button() {}
ex)
export function Button() {
	const handleClick = () => {}
	return <button onClick={handleClick }></button>
}

3. 이벤트핸들러
camelCase(handleLoginButtonClick / onClickLoginButton)

prop으로 넘겨주는 이벤트: on(onClick)
직접 처리하는 이벤트: handle(handleClick)
ex)
<Button onClick={handleClick} />
export function Button({ onClick }) {
	return <button onClick={onClick}></button>
}

4. import order
    - 리액트 훅
    - 라이브러리
    - 컴포넌트
    - 이미지
    - css
    
5. ESLint
{
  "extends": ["next/core-web-vitals", "prettier"]
}

6. Prettier
{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "jsxBracketSameLine": true,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "endOfLine": "auto"
}

참고. StyleLint
{
  "extends": [
    "stylelint-config-idiomatic-order",
    "stylelint-config-prettier-scss",
    "stylelint-config-standard-scss"
  ],
  "plugins": [
    "stylelint-scss",
    "stylelint-order"
  ],
  "ignoreFiles": [
    "@/src/styles/reset.scss"
  ],
  "rules": {
    "color-hex-length": "long",
    "selector-class-pattern": "^([a-z][a-zA-Z0-9]*)$",
    "scss/at-mixin-pattern": "^.[a-z]+(-[a-z0-9])*",
    "scss/dollar-variable-pattern": "^.[a-z]+(-[a-z0-9])*",
    "scss/percent-placeholder-pattern": "^.[a-z]+(-[a-z0-9])*"
  }
}

R&R

인증&프로필 - 1, 2 =>서인

상품 목록(홈) - 3 => 봉찬

상품 상세(기본) - 4.1, 4.4, 4.6 => 송은

상품 상세(공동 구매) - 4.2, 4.3, 4.5 => 민영

결제(주문서) + 장바구니 - 5, 6 => 지원

초기 세팅

봉찬: 폴더구조 / husky / github acrions

민영: prettier

서인: 깃허브 이슈, PR 템플릿

공통 컴포넌트

🙌🏻 제안 사항

데일리스크럼 형식 제안 ⇒ 회의 전에 미리 작성

이서인

• 완료한 일