네이밍 컨벤션

네이밍 컨벤션 - 기본

폴더 네이밍

• 컴포넌트 파일이 들어있는 폴더의 경우 PascalCase를 사용합니다.
• 그 외엔 모두 camelCase를 적용합니다.

컴포넌트 파일

• 컴포넌트로 분리된 파일은 PascalCase를 적용합니다.

  ex) Header.tsx, Main.tsx

컴포넌트가 아닌 파일

• camelCase를 적용합니다.

  ex) authStore.ts

스타일 파일

• 스타일 시트를 적용할 파일명과 맞춰 작성합니다.
  • ex) Header.tsx ↔ Header.style.ts

네이밍 컨벤션 - 변수명

변수

• 변수는 기본적으로 camelCase와 영어 대소문자, 숫자를 사용합니다.

• 만일 변수의 타입이 boolean일 경우 is를 접두사로 붙입니다.

  • isLogin

• 축약어를 사용하지 않습니다. cnt (x) count(o)

• 변수명이 길어져도 괜찮습니다. 누구나 한 번에 이해할 수 있도록 작성해주세요.

  ex) isUserPermissionsForEditing

상수

• 상수는 전부 대문자로만 작성하고, 여러 단어를 합성할 경우 _ 를 사용해 단어 사이를 구분합니다.

  ex) const ROUTE = {} const BASE_URL = “”

함수명

• 이벤트 핸들러의 경우 handle + 이벤트 이름 + 기능 을 붙여 사용합니다.

  ex) <button onClick={handleClickLoginButton} />

• 일반 함수일 경우 반환하는 값을 기준으로 작성합니다.

  // 데이터에서 추출한 값을 리턴하는 경우
  const getUserIdFromLocalStorage = () => {}
  
  // boolean을 리턴하는 경우
  const hasEmail = () => {}

props로 핸들러를 받을 경우 props 이름

• on + ${핸들러 이름} 로 사용한다.

  const CommonButton = ({onClick}) => {
  	return <button onClick={onClick} />
  }
  
  const App = () => {
  
  	const handleClickLoginButton = () => {
  		alert("로그인 버튼 클릭");
  	}
  	
  	return <CommonButton onClick={handleClickLoginButton} />
  }

네이밍 컨벤션 - API 요청 함수

• HTTP 메서드 (GET, POST, PUT, DELETE) + 데이터명 구조를 사용합니다.

  const postSignUp = () => {}
  const getUserInfo = () => {}
  const putUserInfo = () => {}
  const deleteUserInfo = () => {}

네이밍 컨벤션 - 타입, 인터페이스

• 타입 선언의 경우 타입 이름 앞에 T를 붙입니다.

• 인터페이스 선언의 경우 인터페이스 앞에 I를 붙입니다.

  interface ILoginProps {}
  type TLogin = {}

cf) 타입과 인터페이스의 차이

• type: 유니온 타입이나 함수, 배열 타입을 정의하거나 더 복잡한 타입을 조합할 때 사용

• interface: 주로 객체의 구조를 정의할 때 사용

• 참고

  https://ykss.netlify.app/typescript/type_vs_interface/

네이밍 컨벤션 - 태그 (선택)

• styled-components를 사용하기 때문에 아래 네이밍 규칙을 준수합니다.

• 태그명이 길어지더라도 의미 전달과 명확성에 목적을 두어 작성합니다.

• 이름은 PascalCase를 사용합니다.

• Layout > Container > Box 순서로 사용합니다. 이는 필수 사항은 아니며, 유동적으로 조절 가능합니다.

  ex) Header의 경우

  const Header = () => {
  	return (
  		<HeaderLayout>
  			<RightContainer>
  				<div>
  					<GoBackButton></GoBackButton>
  					<BackIcon></BackIcon>
  				</div>
  			</RightContainer>
  			<LeftContainer>
  				<TitleBox>
  					<TitleText></TitleText>
  					<SubTitleText></SubTitleText>
  				</TitleBox>
  			</LeftContainer>
  		</HeaderLayout>
  	);
  }