보안 규칙
•
.env.local 파일 로컬에서 만들기 - 최상위 위치(gitignore와 같은 위치)
•
gitignore에 .env.local 추가
•
.env.local에 들어갈 내용 - 슬랙 캔버스
함수
•
Arrow function
const Component = ({}: Props) => {
}
TypeScript
복사
// good
const A = () => {}
// bad
const A = function A(){}
TypeScript
복사
함수명 - ‘handle~’
const handleAAAClick = () => {}
const handleAAAChange = () => {}
JavaScript
복사
event는 e로 쓰기
const handleOnKeyPress = (e) =>
JavaScript
복사
Typescript 규칙
types.d.ts 파일 이용하기
•
여러 컴포넌트에서 계속 쓰이는 type만 types.d.ts 파일에 선언해서 쓰기
•
이렇게 선언한 type은 따로 import하지 않아도 여러 파일에서 쓸 수 있습니다.
•
type보단 interface 쓰기
// TodoItem type
declare interface TodoItem {
id: string;
title: string;
content: string;
isDone: boolean;
}
JavaScript
복사
Naming
•
변수, 함수 : camelCase
•
queryKey : SNAKE_CASE
•
페이지 폴더 : 소문자
•
일반 폴더: PascalCase
•
컴포넌트: PascalCase
Prettier
.prettierrc 파일 사용
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "auto",
"htmlWhitespaceSensitivity": "css",
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
}
JavaScript
복사
코딩 스타일
•
if문 사용
// good
if(true) {
return
}
// bad
if(true) return
TypeScript
복사
•
early return
// good
if(!a) {
console.log('not a')
return
}
console.log('a')
// bad
if(a) {
console.log('a')
} else {
console.log('not a')
}
TypeScript
복사
Tailwind css
•
tailwind css 사용하고싶은 이유
- 장 : 빌드시 기본 css로의 변환이 쉽다? 그래서 호환성이 좋다?, 반응형이 쉽다, css in js 사용시 SSR에서 hydrate시 생기는 문제를 방지할 수 있음
◦
단 : 코드 지저분
기타
•
사용하지 않는 import는 지웁니다. (option+shift+O) / (alt+shift+O)
•
import React 지우기