Convention
.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
root: true,
extends: [
'airbnb',
'airbnb/hooks',
'plugin:prettier/recommended',
'plugin:react/jsx-runtime',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', 'react-hooks', 'jsx-a11y'],
rules: {
'no-unused-vars': 'warn',
},
};.prettierrc.cjs
/**
* Prettier 옵션
* - https://prettier.io/docs/en/options.html
*/
module.exports = {
printWidth: 80, // 한 줄 최대 문자 수
tabWidth: 2, // 들여쓰기 시, 탭 너비
useTabs: false, // 스페이스 대신 탭 사용
semi: true, // 문장 끝 세미콜론 사용
singleQuote: true, // 작은 따옴표 사용
trailingComma: "all", // 꼬리 콤마 사용
bracketSpacing: true, // 중괄호 내에 공백 사용
arrowParens: "avoid", // 화살표 함수 단일 인자 시, 괄호 생략
proseWrap: "never", // 마크다운 포매팅 제외
endOfLine: "auto", // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
};.prettierignore
node_modules/
1. npx install-peerdeps --dev eslint-config-airbnb
아래와 같이 eslint 관련 6개가 package.json > "devDependencies" 에 추가된다.
"devDependencies": {
"eslint": "^8.2.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
2. npm install -D eslint-config-prettier eslint-plugin-prettier
아래와 같이 eslint 관련 package.json > "devDependencies"에 2개가 추가된다.
"eslint-config-prettier": "^8.7.0", //eslint와 prettier간 충돌 규칙 비활성화
"eslint-plugin-prettier": "^4.2.1", // prettier 규칙을 생성하는 eslint 플러그인컨벤션 설정에 참고한 Airbnb JavaScript 스타일 가이드
https://github.com/airbnb/javascript
https://github.com/ParkSB/javascript-style-guide
Header.js Footer.jsx MainBanner.js BlogList.jsxmyUtilityFile.js cookieHelper.js fetchApi.jsclassName
<div className=""></div>
onClick, onSubmit
<div onClick="{}" onSubmit="{}"></div>className
<div className=""></div>
onClick, onSubmit
<div onClick="{}" onSubmit="{}"></div><button onClick={onClickHandler}>리셋 버튼</button>
// 이벤트명 + 동사 + Handler
// 만약 사용되는 이벤트 함수가 여러개 있을 경우,
// 어떤 기능을 가지고 있는지 유추할 수 있는 단어를 함께 작성해준다.
<button onClick={onClickResetHandler}>리셋 버튼</button>
<button onClick={onClickSubmitHandler}>제출 버튼</button>// 컴포넌트 이름은 PascalCase를 붙인다.
function Form() {
...코딩
return (
<form>
<input type="text" value="초기값" />
<input type="submit" value="제출" />
</form>
)
}// 컴포넌트 이름은 PascalCase를 붙인다.
function Form() {
...코딩
return (
<form>
<input type="text" value="초기값" />
<input type="submit" value="제출" />
</form>
)
}// 상수는 대문자로만 작성한다.
const URL = 'https://naver.com'
const MAXIMUM_COUNT = 99// bad
Feature/doyun/Login
// good
feature/doyun/login-상세기능명
feature/doyun/logout-상세기능명1. spread 연산자를 사용한다.
2. 구조 분해 할당을 사용한다.
3. let과 const만 사용한다. (var 사용금지)
4. 화살표 함수를 사용한다.
5. 직접 null을 체크하기 보다 optional chaining 연산자 (?.)를 사용한다.(필수)이모지 : "제목" 이슈번호 //제목(Subject)
(옵션)본문내용 //본문(Body)
(옵션)이슈 트래커 //꼬리말(Footer)- 여러 개의 이슈 번호를 적을 때는 쉼표로 구분
- Resolves -> 이슈를 해결했을 때 사용(이슈가 자동으로 closed)
- Ref -> 참고할 이슈가 있을 때 사용
- Related to -> 해당 커밋에 관련된 이슈번호(아직 해결되지 않은 경우)
📝 : "상세페이지로 이동" #38
상세페이지 기능 구현 완료
Resolves : #38 // resolves 를 사용하면 issue 가 자동으로 닫힘
https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode
@store : recoil을 사용하여 전역 상태 관리하는 폴더
assets : 폰트, 이미지, 동영상, json 등 프로젝트의 정적자산들을 관리하는 폴더
components : 컴포넌트를 관리하는 폴더
hooks : 커스텀 훅들을 관리하는 폴더
pages : 페이지를 관리하는 폴더
utils : API를 관리하는 폴더(axios, firebase 등)