자바스크립트 스타일 가이드

JS 코드스타일 가이드

변수

변수명 네이밍

is 로 시작하면 네이밍은 함수로 한다.

const isRoot = () => {} // 함수
const rooted = '' // 변수

네트워크 요청 함수명

네트워크 요청을 위한 함수는 ‘메소드명 + 동사 + 명사’ 형태로 이름을 정한다.

apis폴더에 관련 기능 폴더를 만들고 하위에 index.ts 파일을 생성한다.

index.ts파일에는 기능과 관련된 네트워크 요청함수가 들어있다.

// example
const getGetUserData = () => {}

export { getGetUserData };

이벤트 핸들러 이름

• handle ~ 동사 + 명사

  handleSubmitUser (O)
  handleUserSubmit (X)
  

• 이벤트 함수 자체는 파일 안에서 처리하고, 안에서 사용하는 로직이 중복되면 분리한다.

  import { reqeust } from 'util/request';
  
  const Form = () => {
  	const handleSubmitForm  = () => { request() };
  
  	return (
  		<form onSubmit={handleSubmitForm}>
  		</form>
  	)
  }

명시적인 매개변수 사용하기

줄여서 쓰지 말고 fullName 을 쓴다.

// X
map(e => e)
addEventListener(e)
catch(e)

// O
map(element)
addEventListene(event)
catch(error)

복수형

복수형의 경우 s 나 es 를 붙여 표시한다.

category => catgories
moive => moives
list => lists

// MovieList.vue

const { movies } = fetchMovie();
	movies.forEach((movie) => {
	movie ~~~~~
})

함수

---

화살표 함수

화살표 함수를 기본으로 사용한다. 특정 상황에서만 선언형 함수를 사용한다.

• 임시적인 변수를 사용하지 마라?

반환

return 은 마지막에만 사용한다. 한줄을 띄워 반환한다.

// Bad
function isValid() {
	let result = false;

	if (!valid) {
		return false;
	}
	result = true;
	return result;
}

// Good
function isValid() {
	let result = false;

	if (!valid) {
		result = false;
	}
	result = true;

	return result;
}

컴포넌트

---

props

바로 구조 분해 할당해서 사용한다.

cosnt Form = ({name, id}) => {

}

추가 코드 컨벤션

---

import 순서 (eslint룰 사용하기)

// 외부 라이브러리 위에
import { useState } from 'react' //리액트 라이브러리는 최상위에
import lodash from 'loadsh'

// 내부는 밑에
import Navigation from './components/Navigation'

메서드 사이 개행 추가하기

// Bad
class MyClass {
  foo() {
    //...
  }
  bar() {
    //...
  }
}

// Good
class MyClass {
  foo() {
    //...
  }

  bar() {
    //...
  }
}

타입 유틸

다음 코드의 경우 파일을 따로 만들어 관리하기

if (typeof value === 'string') {} 

[코딩컨벤션](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)

• 상수는 영문 대문자 스네이크 표기법(Snake case)를 사용한다.
• 변수, 함수에는 카멜 케이스을 사용한다.
• const를 let 보다 위에 선언한다.
• 변수의 초기화는 선언과 동시에 이루어져야 한다.
• 리터럴 표기법을 사용한다.
• 순회 문법은 forEach, map 등 ES6 문법 적극 사용한다.