1. 코드 컨벤션
1.1 기본세팅
•
들여쓰기(tab) 2칸
•
prettier & eslint 사용
{
// env: 어떤 환경에서 스크립트를 실행할 것인지 설정
"env": {
"browser": true,
"es2021": true,
"node": true,
"commonjs": true,
"es6": true
},
"settings": {
"react": {
"version": "detect"
}
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
// ECMAScript 규격의 JSX 사용 여부: true
"ecmaFeatures": {
"jsx": true
},
// 사용할 ECMAScript 버전을 설정
"ecmaVersion": "latest",
// parser의 export 형태를 설정, react는 module 기반의 import, export 사용
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
// 들여쓰기 2칸만 허용
"indent": [
"error",
2
],
// var 키워드 사용 불가능
"no-var": "error",
// asynn 함수 내부에 await 키워드가 없으면 오류 발생
"require-await": "error",
// ==, != 대신에 ===, !== 사용
"eqeqeq": "error",
//프롭스 타입 무시
"react/prop-types": 0,
// 호출되지 않은 변수도 사용가능하게 설정
"no-unused-vars": "off"
}
}
HTML
복사
{
"bracketSpacing": true,
"jsxBracketSameLine": false,
"jsxSingleQuote": true,
"printWidth": 80,
"proseWrap": "preserve",
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"vueIndentScriptAndStyle": false
}
HTML
복사
1.2 네이밍 규칙
폴더명 | • camelCase |
파일명 | • REACT 컴포넌트 : PascalCase
• 이미지파일 : kebab-case (어쩌고저쩌고-image, lion-licat-image.png)
• JSX : PascalCase
• JS : camelCase
• 스타일드 컴포넌트 파일 : ~~Style.jsx로 표현 |
변수명 | • 일반적인 변수, 함수 : camelCase
-변수: ‘명사형'으로 작성. 무엇을 담고있는지 정확히 표현(예: numberOfPeople)
-불린형 변수: is~~로 표현
-함수 : ‘동사형'으로 작성. 무엇을 하는 함수인지 정확히 표현(예: getInputValue)
어떤 값으로부터 다른 값을 계산하는 함수 ⇒ get으로 시작 (ex: getToday)
이벤트 함수를 보내는 prop 이름은 on__으로 짓고, 이벤트 함수 이름은 handle__으로 짓는다
커스텀 훅의 이름은 use___ (ex: useGetWindowSize)
• 상수 : UPPER_SNAKE_CASE
• 생성자 함수, 클래스 : PascalCase |
1.3 그 외 규칙
•
JavaScript ES6+ 문법 사용
•
var 사용 금지
•
세미콜론 필수
•
작은 따옴표 사용
1.
커밋 컨벤션 ⇒ 정해놓은거
2.
코딩 컨벤션 ⇒ 이전기수꺼 참고
3.
네이밍 컨벤션 ⇒ 이전기수꺼 참고
4.
폴더&파일구조 컨벤션
src
ㄴ Assets (이미지, 폰트 등 에셋 저장)
ㄴ Images
ㄴ Fonts
ㄴ Components
ㄴ Header
ㄴ Header.jsx
ㄴ Button
ㄴ Button.jsx
ㄴ Pages
ㄴ HomePage
ㄴ HomePage.jsx
HTML
복사
