많은 것을 신경쓰면 리소스가 너무 드니 최소한으로만 정하기
생각나는대로 일단 다 적어봄
정할거 4가지
1.
커밋 메시지 컨벤션
2.
코딩 컨벤션
3.
네이밍 컨벤션
4.
폴더&파일 구조 컨벤션
커밋 메시지 컨벤션 정하기
•
미리 정해놓은거 쓰는건 어떨까??
코딩 컨벤션 정하기
•
전부 다 따지면 시간이 너무 많이 드니 아예 유명한 코딩 컨벤션(https://ui.toast.com/fe-guide/ko_CODING-CONVENTION 같은..)을 참고하는 것도 좋을지도?
강조해서 생각해볼만한 것들
1.
들여쓰기는 탭? 공백? 공백(토스트 컨벤션 참조)
2.
공백이라면 한칸 두칸? 공백 두 칸(토스트 컨벤션 참조)
3.
문장 끝에 세미콜론? ㅇㅇ(토스트 컨벤션 참조)
4.
쌍따옴표 홑따옴표? 홑따옴표
5.
ESlint랑 prettier 사용 미사용? 흠.. 쓰는것도 괜찮을지도..? ㅇㅇ
6.
삼항연산자 줄바꿈?
// 짧으면 한 줄
let result = (login) ? true : false;
// 길면 개행
// 조건을 맨 위에 쓰고
// ?와 true일때 실행할 내용을 내리고
// :와 false일때 실행할 내용 아래로 내리기 ?
// 코드가 길어지겠지만 삼항연산자 코드가 길어지면 가독성이 너무 안좋으니 가독성을 위해 ,, ?
let result = (조건)
? (
<>
<div>true</div>
</>
)
: (
<>
<div>false</div>
</>
)
JavaScript
복사
7.
for, if문의 코드가 짧을 경우 중괄호를 생략할 것인가? 가독성을 위해 중괄호 필수로 쓰기?
// 생략 안한 경우
if ( ) {
...
} else if ( ) {
...
} else {
...
}
for (let i = 0; i < 3; i++) {
console.log(i);
}
// 생략한 경우
if ( ) ...
else if ( ) ...
else ...
for (let i = 0; i < 3; i++) console.log(i);
JavaScript
복사
8.
import … from … 구문의 순서를 신경쓸 것인가? 만약 신경쓸 것이라면 어떤 기준으로?
a.
분류만 신경쓰기
// 만약 신경쓴다면 크게만 분류하는건 어떨까?
1. 패키지
import ... from react
import ... from react-router-dom
2. 컴포넌트
import Button from './Button'
3. 이미지
import HomeIcon from './image/home-icon.png'
// 예시
import ... from react
import ... from react-router-dom
import Button from './Button'
import HomeIcon from './image/home-icon.png'
HTML
복사
9.
CSS 속성 선언 순서는 신경쓸 것인가? 만약 신경쓸 것이라면 어떤 기준으로?
a.
일단 ㄴㄴ. 구현 먼저
// NHN 코딩 컨벤션 참고
// 만약 신경쓴다면 1, 2, 3, 4, 5만 신경쓰고 그 안의 속성들은 자유롭게 하는건 어떨까?
1. 레이아웃
- display
- visibility
- overflow
- float
- clear
- position
- top
- right
- bottom
- left
- z-index
2. Box
- width
- height
- margin
- padding
- border
3. 배경
- background
4. 폰트
- font,color
- letter-spacing
- text-align
- text-decoration
- text-indent
- verticalalign
- white-space
5. 기타
- 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함
- 밴더속성과 핵속성은 해당 속성 뒤에 선언
HTML
복사
10.
리액트 컴포넌트를 정의할때는 rfc 단축키로 할것인가?
a.
rafce
11.
js 확장자로? jsx 확장자로?
a.
jsx ㄱㄱ? ㄱㄱ ?? ㄱㄱㄱㄱㄱㄱㄱㄱㄱ
네이밍 컨벤션 (검색해서 사람들이 많이 쓰는대로 정리해봄)
1.
리액트 컴포넌트명 ⇒ 파스칼 케이스 (ex: MyComponents.jsx)
2.
변수, 자바스크립트 함수명, props, 커스텀 훅 ⇒ 카멜 케이스 (ex: var myComponents)
•
어떤 값으로부터 다른 값을 계산하는 함수 ⇒ get으로 시작 (ex: getToday)
•
이벤트 함수를 보내는 prop 이름은 on__으로 짓고, 이벤트 함수 이름은 handle__으로 짓는다
import { MouseEvent as ReactMouseEvent, useCallback, useState } from 'react'
function FunctionComponent() {
const [searchTerm, setSearchTerm] = useState('')
최대한! 화살표함수 사용하기 ?!
// 이벤트 핸들러 함수
const handleClickSearchButton = useCallback(e) => { ... })
const handleChangeSearchTerm = useCallback(e => { ... })
// 이벤트 핸들러 prop
return (
<>
<SearchInput onChange={handleChangeSearchTerm} />
<SearchButton onClick={handleClickSearchButton} />
</>
)
}
export default FunctionComponent
JavaScript
복사
•
커스텀 훅의 이름은 use___ (ex: useGetWindowSize)
3.
상수 ⇒ 대문자 스네이크 케이스 (ex: MY_COMPONENTS)
폴더&파일 구조 컨벤션 (검색해서 사람들이 많이 쓰는대로 정리해봄)
1.
컴포넌트를 만들때는 해당 컴포넌트의 성격(Components, Pages)에 맞는 폴더 안으로 들어간다.
•
그 안에 컴포넌트 폴더 생성
•
생성한 컴포넌트 폴더 안에 컴포넌트 파일 생성 (컴포넌트 파일명은 파스칼 케이스)
2.
페이지 이름은 ___Page (HomePage.jsx, LoginPage.jsx 등)
src
ㄴ assets (이미지, 아이콘, 폰트 등 에셋 저장)
ㄴ Images (여기 저장될 애들 파일명은 어쩌고-image.png / import할땐 어쩌고Image)
ㄴ Icons (여기 저장될 애들 파일명은 어쩌고-icon.png / import할땐 어쩌고Icon)
ㄴ Fonts
ㄴ components
ㄴ Header
ㄴ Header.jsx
ㄴ Button
ㄴ Button.jsx
ㄴ pages
ㄴ HomePage
ㄴ HomePage.jsx
Bash
복사
