Portfolio

변수명 변수명 네이밍 네트워크 요청 함수명 이벤트 핸들러 이름 명시적인 매개변수 사용하기 복수형 함수 화살표 함수 반환 컴포넌트 props 추가 코드 컨벤션 import 순서 (eslint룰 사용하기)메서드 사이 개행 추가하기 타입 유틸

변수명

변수명 네이밍

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


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

네트워크 요청 함수명

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

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

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


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

export { getGetUserData };

apis/user/index.ts

이벤트 핸들러 이름

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') {}

코딩컨벤션

코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가능)를 가지기 때문에 개발자 간 통일된 규약이 없다면 코드의 의도를 파악하거나 오류를 찾기 어렵다. 코딩 컨벤션을 준수하면 가독성이 좋아지고, 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄여준다. 특히 규모가 큰 프로젝트일수록 유지보수 비용을 줄이는 데 도움이 된다.

https://ui.toast.com/fe-guide/ko_CODING-CONVENTION

상수는 영문 대문자 스네이크 표기법(Snake case)를 사용한다.

변수, 함수에는 카멜 케이스을 사용한다.

const를 let 보다 위에 선언한다.

변수의 초기화는 선언과 동시에 이루어져야 한다.

리터럴 표기법을 사용한다.

순회 문법은 forEach, map 등 ES6 문법 적극 사용한다.

JS 규칙

변수명