HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
육개짱 프론트엔드
육개짱 프론트엔드/
Code Convention
Code Convention
Code Convention

Code Convention

생성일
Feb 4, 2024 06:37 AM
태그
🐫
함수명, 변수명은 카멜케이스로 작성합니다. 상수명은 대 문자로 작성합니다 Ex) LEE_JONG_HYEOK 생성자명, Component명은 파스칼케이스로 작성합니다 Ex) Button , class Tree 스타일 컴포넌트명은 Styled 로 시작합니다. 타입 및 인터페이스명은 {Pascal Case}Type 형태로 작성합니다.
📏
이름의 길이는 20자 내외 로 제한합니다. 만약 4단어 이상 또는 20자 이상일 경우 팀원과 상의하여 결정합니다.
🚫
약어 사용은 지양 합니다. 부득이하게 사용해야할 경우 팀원과 상의하여 결정합니다. ex) index(o), idx(x) | count(o), cnt(x) | array(o), arr(x)
🚧
Component 내부에서의 코드 정의 순서는 아래와 같습니다. Hook 은 항상 최 상단! Variable 의 정의는 중간 Function 의 정의는 최 하단 에 작성합니다.
☝
가독성을 위해 의미별로 코드의 단위를 지정해 개행 처리를 해줍니다. 붙어있는 함수들에 대해서도 개행 처리를 해줍니다.
복수의 경우 s 대신 List를 사용 - ex) users → userList
복수의 경우 s 대신 List를 사용 - ex) users → userList

변수

☝
전역 변수❌의 사용을 되도록 지양합니다. - 필요한 경우 주석 필수
☝
항상 const 만을 우선 순위로 사용하고 어쩔 수 없는 경우 let 을 사용합니다

상수

☝
constants 폴더에서 index.ts 파일로 관리합니다.
☝
스타일 관련 상수는 styles 폴더에 theme.ts 파일을 정의해서 사용한다.

배열 & 객체

배열과 객체의 선언은 반드시 리터럴로 선언합니다.
배열과 객체의 선언은 반드시 리터럴로 선언합니다.
배열과 객체의 깊은 복사는 전개 연산자를 통해 사용합니다. ex) [ … list ]
배열과 객체의 깊은 복사는 전개 연산자를 통해 사용합니다. ex) [ … list ]
객체 내부의 함수 표현은 축약 메소드 표기방법을 사용합니다.
객체 내부의 함수 표현은 축약 메소드 표기방법을 사용합니다.
배열과 객체의 순회는 forEach를 우선적으로 사용합니다
배열과 객체의 순회는 forEach를 우선적으로 사용합니다

함수

⚒️
함수의 정의는 화살표 함수를 사용해 정의합니다.
⚒️
함수내부의 파라미터는 항상 괄호를 사용해 감싸줍니다.
⚒️
Event Handler의 경우 handle이름의 형식으로 정의합니다.
 

조건

🙌
조건문은 항상 early return을 사용하고 중첩 조건문 사용을 자제합니다.
🙌
조건문의 가독성을 위해 항상 중 괄호 { } 를 사용해 정의합니다. + 줄 바꿈 필수!
🙌
TypeScript에서 타입가드의 경우 원시값은 typeof 이외에는 모두 instanceof 를 사용합니다.
🙌
별 다른 특이 사항이 없다면 일치 연산자(===)를 사용합니다. - 동등 연산자(==) 사용시 주석 필수

주석

주석은 코드에 대한 설명이 필요한 경우에만 작성합니다.
주석은 코드에 대한 설명이 필요한 경우에만 작성합니다.
주석은 코드 상단에 작성합니다.
주석은 코드 상단에 작성합니다.
주석은 한 줄일때 // 를 이용 두 줄 이상시에 /* */ 을 이용합니다. main 브랜치에 병합시 모든 주석을 제거하고, dev, feature브랜치에는 주석을 유지합니다.
주석은 한 줄일때 // 를 이용 두 줄 이상시에 /* */ 을 이용합니다. main 브랜치에 병합시 모든 주석을 제거하고, dev, feature브랜치에는 주석을 유지합니다.
💬
전역에서 사용되는 유틸 함수나 API 함수의 경우, 해당 함수를 처음 사용해보는 다른 팀원들이 쉽게 사용할 수 있도록 JSDoc 을 작성합니다. 또한 코드 리뷰에 소요되는 시간을 줄이기 위해, 복잡한 로직을 가진 함수에 JSDoc 을 작성하여 다른 팀원들의 이해도를 높여주어도 좋습니다.
 
ex)
@brief : 간략하게 함수를 소개합니다. @details : 함수에 대해 상세하게 설명 합니다. 로직이 복잡한 경우 함수의 로직을 간단히 설명합니다. 해당 함수를 사용하며 주의 해야할 사항이 있다면 적어주는 것이 좋습니다. 매개변수와 리턴값에 대한 자세한 설명을 해도 좋습니다.
 
스니펫 설정 방법
저 같은 경우 매번 /** 를 치고 수정하기 귀찮아서 양식을 따로 스니펫으로 설정하였습니다!!
필요하신 분들만 하시면 될 것 같습니다
설정방법은 설정(>)에서 snippets(사용자 코드 조각 구성) → 새 전역 코드 조각 파일 → 파일이름 아무거나해서 스니펫 파일 생성 후
위와 같이 jsdoc 을 통해 자동완성을 하도록 했습니다!
각 속성은 필수 키워드가 아닙니다. 간단히 /** */ 를 사용하여 키워드 없이 작성해도 좋습니다.

경로

🧙🏻
//경로별칭은 src하위와 src하위의 폴더들까지만 적용하고, @를 사용합니다.

타입

  • any 는 최대한 사용 지양하기
    • 피치 못하게 사용해야 할 경우 unknown 으로 대신하기
  • 타입 별칭
    • 기본적으로 파스칼 케이스로 작성하면서, 의미를 파악하기 쉬운 명칭 사용하기
    • 접두사로 T , I 사용 지양하기
    • 타입명은 DB의 테이블명과 가급적 동일하게 사용(ERD 확인)
    • 함수 parameter의 타입을 지정할 경우 타입명은 함수명+Payload
    • 타입 단언은 지양하기
      • 단언을 사용하지 않고 해결할 방법이 있는지 먼저 찾아보기
    • TS 기능 활용하기
      • Ex) Omit extends Pick satisfied
    • 코드 상에서 추론이 잘 되었다면, 가급적 재지정 하지 않기
  • 기본적으로는 interface 사용, type 선언이 더 적합할 경우 type 사용
    • interface와 type의 차이 숙지하기
      • interface와 type의 차이

컴포넌트 작성

  • 하나의 파일에서 하나의 컴포넌트만 선언하기
  • 컴포넌트는 const 키워드를 통해 선언
  • 컴포넌트는 파일 최하단에 export default 키워드를 통해 내보내기
  • 컴포넌트 props의 타입명은 컴포넌트명+Props 로 통일
    • 위치는 컴포넌트가 선언부의 바로 위에 작성
 

네이밍

  • 컴포넌트들어있는 폴더명, 파일명, 컴포넌트명, 스타일 컴포넌트 명은 모두 PascalCase
  • 메서드, 훅, 변수,함수는 camelCase
  • 상수는 대문자
  • path, asset 파일명은 모두 소문자
  • 타입 파일명은 카멜케이스.ts
 
const listData = []
const listFunction = () => {
	// ...
}

const userData = []
const setUser = () => {

}
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  }
};
// Good
function someFunction() {
  ...

  // statement에 관한 주석
  statements
}
// 최소 숫자
const minNumber = 0
/**
 * @brief 전체 사용자 목록을 불러옵니다.
 * @details 디폴트 값은 offset = 0, limit = 10 입니다.
 * 반드시 {} 중괄호 내부에 offset, limit 설정해야 합니다.
 */
export const getUsers = async ({
  offset = 0,
  limit = 10,
}: GetUserListRequestType): Promise<UserType[] | never> => {
  ...
};
/**
 * @brief
 * @details
 */

const getFrom = (num1: number, num2: number) => {
  return num1 + num2
}

export default getFrom
{
	"JSDoc Custom Template": {
		"prefix": "jsdoc",
		"body": [
			"/**",
			" * @brief",
			" * @details",
			" */"
		],
		"description": "Custom JSDoc template"
	}
}
interface user (x)

interface IUser (x)

interface User (o)

const Component = () => {
	return <div></div>
}
//개행 필수
export default Component


interface ComponentProps {
	a: string
}
//개행 필수
const Component = (x : ComponentProps) => {
	return <div></div>
}
//개행 필수
export default Component

interface ComponentProps {
	width: string
	height: string //관련도가 높은 속성일 경우 붙여서 작성
	n : number
}