코드 서식 정리하기

1. 코드 서식 알아보기
   1) 코드 서식이 무엇일까요?
   👉 코드 서식이라 함은, 코드의 형식(Format)이라고 보아도 좋습니다!
   성하는 방식을 말하는데요, 이는 [코딩 스타일(Coding Style)]이라고도 합니다. 이러한 코드 서식은 생각보다 별것 아닌것 같지만, 오랜 시간동안 전세계의 개발자들의 화두에 오르내리는 주제입니다!

코드 서식의 무엇이 문제길래 전세계의 개발자들 사이에서 논쟁이 많은걸까요?

1. 개발자들은 'Space, Tab'으로도 싸운다.
2. 줄바꿈을 '특정 위치에서 하냐 마냐'로도 싸운다.
3. 코드 한 줄의 길이가 '몇자 이상을 넘어가면 된다 안된다'로도 싸운다.

이 외에도 특정 상황에서 중괄호를 사용하냐 마냐, 세미콜론을 쓰냐 마냐... 등 사소해 보이는 부분으로도 많은 의견 차이가 있답니다
2) 코드 서식을 일관적으로 관리하면 무엇이 좋을까요?
Case 1
sock.on("BUY", (data) => {
const emitData = {
...data,
date: new Date().toISOString(),
};

io.emit("BUY_GOODS", emitData);
});
Case 2 (한 줄에 모든 코드 작성)
sock.on("BUY", (data) => {
io.emit("BUY_GOODS", { ...data, "date": new Date().toISOString() });
});
Case 3 (객체 리터럴 내의 프로퍼티를 개행으로 구분)
sock.on("BUY", (data) => {
io.emit("BUY_GOODS", {
...data,
date: new Date().toISOString(),
});
});
Case 4 (문자열 리터럴 사용, 화살표 함수 괄호 생략)
sock.on('BUY', data => {
io.emit(BUY_GOODS, { ...data, date: new Date().toISOString() });
});

2. Prettier
   1) 코드 서식 관리 도구 Prettier(프리티어)가 무엇인지 알아보기
   어떤 규칙들을 제공하는지 살펴보기
   const config = {
   trailingComma: "es5", // ES5에서 제원하는 위치에 쉼표를 추가합니다.
   tabWidth: 4, // Tab의 너비를 4 스페이스로 설정합니다.
   semi: false, // 세미콜론을 사용하지 않습니다.
   singleQuote: true, // 따옴표를 작은 따옴표(')를 사용합니다.
   };

export default config;
Prettier 규칙에 대해 조금 알아보기
trailingComma: "es5"
// 원래 코드
const items = [
'item1',
'item2'
];

// Prettier 규칙을 적용한 후
const items = [
'item1',
'item2',
];
tabWidth: 4
// tabWidth: 2
function foo() {
console.log('Hello, world!');
}

// tabWidth: 4
function foo() {
console.log('Hello, world!');
}
semi: false
// semi: true
const x = 10;
const y = 20;

// semi: false
const x = 10
const y = 20
singleQuote: true
// singleQuote: false
const greeting = "Hello, world!";

// singleQuote: true
const greeting = 'Hello, world!';
arrowParens: "always"
// arrowParens: "avoid"
const square = x => x * x;

// arrowParens: "always"
const square = (x) => x * x;
6) 정리하자면
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"arrowParens": "always"
}