💥 작업 시 주의사항

SSAB 중요하다

// 손님 브랜치
feCustomer-feature-camelCase

// 사장님 브랜치
feSeller-feature-camelCase

1. 시작 전 반드시 git pull
2. 현재 브랜치 확인 ( git branch로 현재 브랜치 확인 가능 )
3. git switch fe 로 'fe' 브랜치로 이동
4. 'fe' 브랜치로 이동 후에 하위 브랜치 생성 ( git checkout -b fe-feature-기능명 )
5. 작업 후 JIRA와 연동하기
	MR 요청 할 때 JIRA 이슈번호 함께 기재
	~~아래와 같이 commit 하면 JIRA에서 '진행중'으로 변경된다.
	(예시) git commit -m '[FE][Feat] #S10P22D201-이슈번호 작업내용'
	(예시) git commit -m '[FE][Feat] #S10P22D201-이슈번호 #in-progress 작업내용'
	JIRA 이슈에 대한 작업을 완료했을 경우에는 다음과 같이 commit 한다.
	(예시) git commit -m '[FE][Feat] #S10P22D201-이슈번호 #done 작업내용'~~
5. 작업후엔 git push origin 브랜치명
6. gitlab에서 merge 하기전에 다른 front 인원에게 aprove 받기 ( 코드 리뷰 )

📌 파일, 컴포넌트 이름 규칙

# 컴포넌트로 활용되는 확장자명은 .tsx로
UserName.tsx
# 그 외에는 .ts로
YourApi.ts

# 컴포넌트명은 파스칼 케이스로 (첫글자, 중간글자 대문자)
TodayFood.tsx

# 폴더명은 소문자로
src/components
src/public
src/api

# 커스텀 훅을 사용하는 경우
use + 함수명 ( useFindUser )

📌 컴포넌트에 코드 작성시 아래와 같이 통일

const 앱이름 = () => {
	return (    // return에 붙이는 괄호는 자유
	
	
	)
}

export default 앱이름 
// export default function 앱이름 <-- 한줄로 작성하지 않고
// export default 앱이름 으로 개별로 작성

📌 명명 규칙

# ✨문장 종료시 반드시 세미콜론 ';' 작성✨

# 환경변수 설정
VITE_YOUR_NAME="필요한 환경변수 데이터"

# 환경변수 불러올 때
const YOUR_NAME = import.meta.env.VITE_YOUR_NAME

# 배열 : 복수형 이름으로 사용
const datas = [];

# 이벤트 핸들러: 'on'으로 시작
const onChange = () => {};

# 반환 값이 불린인 경우: 'is'로 시작
const isLoading = false;

# Fetch함수(axios 요청 포함?): method(get, post, put, del)로 시작
const getEnginList = () => {...}

📌 블록 구문

# ✨한 줄 짜리 블록이더라도 '{}' 사용하기✨

if (true) {
  return 'hello'
}

📌 함수 설정

# ✨함수는 '화살표 함수'로 선언한다✨

const fnName = () => {};

---------------------------------------------------------------

# ✨바로 return 하는 경우 'return' 을 생략한다✨

const foo = () => "bar";

---------------------------------------------------------------

# ✨네이밍 설정✨
// props의 경우 on으로 시작한다
// 함수의 경우 handle로 시작한다
ex) <Component onclick={handleClick} />

📌 부모-자식 컴포넌트 관계

React - 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

# ✨데이터 여러개 받더라도 props 로 통일 하여 사용✨

// Parents.tsx
import Children from "src/components/Children.tsx"
return (
	<>
		<Children
		name:{myName}
		age:{myAge}
		/>
	</>
)

// Children.tsx
const Children = ({ props }) => {
	return (
		<>
			{props.name}
			{props.age}
		</>
	)
}