프론트엔드 코딩컨벤션

Intro

코딩 컨벤션?

코딩 컨벤션은 협업 시 유지보수 및 가독성, 코드 이해를 위해 지켜지는 개발자들 사이의 규칙이다. 효율적이고 관리하기 쉬운 코드를 만들기 위해(유지보수) 효율적으로 규칙을 정해야 한다.

• 사용하는 이유?

1. 의미있는 코드 : 웹표준과 접근성, 크로스 브라우징 등에 맞춘 의미있는 코드
2. 유지보수가 용이한 코드 : 시간과 비용 절약을 위해 타인이 봤을때도 금방 이해하고 수정하기 쉽게끔 작성
3. 일관된 코드 : 모든 개발자가 각자의 규칙을 가지고 있기때문에 하나의 규칙을 정해 일관된 코드로 작성

Eslint & Prettier

일반적으로 Eslint와 Prettier의 컨벤션을 따라 갑니다.

Eslint 자동 처리 컨벤션

• 들여쓰기
• 줄바
• 문자열
  • 작은 따옴표 표시
• space 처리

표기법

1. 스네이크 케이스(snake case)

언더바(_) 가 들어 있는 표현 방식을 뱀처럼 생겼다고 하여 스네이크 케이스라고 한다.

💡 const snake_case = ’ ’ ;

 

1. 파스칼 케이스(pascal case)

첫 글자와 중간 글자들이 대문자인 경우 파스칼 언어의 표기법과 유사하다고 하여 파스칼 케이스라고 한다.

💡 const PascalCase= ’ ’ ;

 

1. 카멜 케이스(camel case)

중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우에는 낙타와 모양이 비슷하다 하여 카멜 케이스라고 한다.

💡 const camelCase= ’ ’ ;

 

1. 케밥 케이스(Kebab Case)

대시(-) 가 들어 있는 표현 방식이 케밥이 꼬챙이에 꽃힌 모습처럼 생겼다고 하여 케밥 케이스라고 한다.

 💡 const kebab-case= ’ ’ ;

 

NAMING CONVENTIONS

1. 기본적으로 변수,함수명은 카멜케이스를 통해 정의한다.

const helloWorld = () => {}
const [state, setState] = useState()

 

1. JSX를 선언하는 함수의 경우 파스칼 케이스를 정의 한다.

💡 function LoginPage = () ⇒ … return( … ) export default LoginPage;

 

1. 폴더명은 카멜 케이스를 사용합니다.
2. components 안에 파일명은 파스칼 케이스를 사용합니다.

src/
└── components/
    ├── Header/
    │   ├── Header.tsx
    └── Footer/
         └──  Footer.tsx

1. 이외에 파일명은 카멜 케이스를 사용합니다.

src/
└── pages/
    ├── index.tsx
    ├── about.tsx
    └── contact.tsx

1. 이미지 파일은 케밥 케이스를 사용합니다.

<aside> 💡 ic-warning.png

</aside>

함수 컨벤션

let 대신 const이 기본이다

• 모든 참조에는 let 대신 const를 사용하는 것을 기본으로 한다.
• 다만 재할당을 해야 한다면 let을 사용한다.
• (참고) let과 const 모두 블록 스코프이다.

// const와 let은 선언된 블록 안에서만 존재합니다.
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

객체를 생성할 때는 리터럴 문법을 사용하자

// bad
const item = new Object();

// good
const item = {};

// bad
const items = new Array();

// good
const items = [];

import

• import 형식은 절대경로로 설정합니다.

// bad
import { TapBox } from '../common/tapBox';

// good
import { TapBox } from 'src/components/common/tapBox';

• 같은 폴더내에 컴포넌트는 상대 경로로 설정합니다.

// good
import DetailImage from './DetailImage';
./ 으로 표기 가능한 컴포넌트에 한해서 상대 경로 지정

스타일링

스타일링은 스타일컴포넌트를 지향합니다.

mui 적용시 sx와 mui스타일 컴포넌트를 사용합니다.

import { styled } from '@mui/material/styles';

const MyButton = styled('button')({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
});

const MyComponent: React.FC = () => (
  <MyButton>Click me</MyButton>
);

타입

그외

1. Destructing

 

• Use object destructuring when accessing and using multiple properties of an object.
  • 단일 오브젝트의 여러 프로퍼티에 접근하는 경우 Destructing을 사용합니다.
  • 이를 통해 프로퍼티를 위한 임시적인 참조를 줄일 수 있습니다.

// badfunction getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// goodfunction getFullName(obj) {
  const { firstName, lastName } = obj;
  return `${firstName} ${lastName}`;
}

// bestfunction getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}
// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

 

참고 문헌

https://github.com/airbnb/javascript