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

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
const로 변수 선언할 땐 export default 하단에 작성한다.
컴포넌트 만들 때 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"
}

7. type
- interface 사용 / type X