[1주차] 탐구 - Airbnb JavaScript Style Guide

# 들어가며

1주차 프리코스 미션이 시작되었습니다.

1주차 미션에 대한 회고는 1주차 미션이 끝난 뒤 작성해야 하기 때문에

오늘 1주차 미션을 하며 탐구했던 소재를 간단 리뷰해보려고 합니다.

바로 Airbnb JavaScript Style Guide입니다.

 

 

# Airbnb JavaScript Style Guide

결론부터 말하자면

Guide를 읽는 것 자체가 너무 재밌었고 파편화된 JS 지식들을 모아서 정리해 둔 느낌이 들어

이것마저.. '몰입'하여 정독해버렸습니다.

## CSS-in-Javascript Style Guide

airbnb javascript repository

우선 깃헙 첫인상에서 흥미로웠던 점은 css-in-javascript의 Style Guide도 있었던 것!

css-in-js 선호자로서 공식 문서 말고는 이런 가이드라인은 따로 찾아본 적이 없는데

프리코스가 끝나고 airbnb를 포함해서 여러 Guide를 한 번 정독해보고 싶은 마음이 들었습니다.

 

## 약 1시간의 몰입

프리코스 미션이 15시에 땡! 하고 발표되면 하이에나처럼 달려들 것이라 예상했지만

막상 프리코스 소개 글에 있던 처음 보는 스타일 가이드에 빠져서 1시간 동안 흥미롭게 읽고 있는 저를 볼 수 있었습니다.

읽으면서 느낀 건

이건 당연한 건데? 60%
아 이 부분도 컨벤션으로서 지키는구나 25%
새로 알게 된 내용 15%

이랬습니다.

생각보다 당연한(혹은 안 지키면 안 되는 줄 알았던) 점들에 대한 것이 절반 이상이었고

새로 알게 된 내용은 생각보다 적었습니다.

어쩌면 그만큼 대중성과 깔끔함을 모두 잡았기에 많은 사람들에게 언급되는 이유이기도 할 것 같네요.

 

## 느낀 점

물론 이게 정답도 아니고 컨벤션엔 정답이 없지만 95% 이상이 납득이 되는 규칙이었습니다.

그중 신선했다고 생각한 몇 가지를 뽑아봤습니다.

 

1. 10년 전만 하더라도 JS의 class를 지양했지만 이젠 오히려 prototype을 지양하고 class를 권장한다는 점

무엇이 이렇게 만들었을까요?

제 생각엔 (지금도 완전 아니라곤 못 하지만) 심각할 정도로 JS의 체계가 엉망이었던 과도기 시절에

이젠 객체지향의 대명사인 class까지 넣냐. 이미 prototype으로도 그와 비슷한 기능은 다 쓸 수 있는데..

라는 관점이 압도적이었을 것입니다.

왜냐하면 실제로 충격적 이게도 class는 prototype을 쓰기 좋게 만든 껍데기일 뿐이었으니까요.

하지만 시간이 지날수록 JS의 문법은 점점 발전했고 사용성과 활용도에서 굉장히 GOAT한 언어가 되었습니다.

그러자 자연스럽게

class처럼 쓰기도 좋고 보기도 좋은 문법이 있는데 굳이 복잡하게 prototype을 쓰냐..

의 관점으로 넘어온 것 같습니다. (제 주관적인 견해입니다.)

 

2. iterators를 지양하고 JS 고급함수(map, reduce 등)를 지향하라는 것

본문에선 '고급함수는 immutable 하기 때문에 사이드 이펙트 등을 고려할 필요가 없다'를 이유로 드는데, 저는 뭔가 이상했습니다.

const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

근데 for... of 문에 쓰이는 num과 numbers나

forEach에 쓰이는 num과 numbers나

쓰이는 변수도 똑같고 인덱싱 접근도 없는데 사이드 이펙트가 관련이 있나 싶었습니다.

심지어 가장 하단의 reduce 코드가 best라고 하는데

시간복잡도나 가독성이나 활용성 측면에서 첫 번째 for문이 가장 좋은 것 같다는 생각을 했습니다.

물론.. 제가 모르는 무언가가 있겠죠~ (진짜 모름)

 

3. true false 부분은 여전히 어지럽다;; 배열, 오브젝트, undefined, null, 0, ''...

*Conditional statements such as the if statement evaluate their expression using coercion with the ToBoolean abstract method and always follow these simple rules:

• Objects evaluate to true
• Undefined evaluates to false
• Null evaluates to false
• Booleans evaluate to the value of the boolean
• Numbers evaluate to false if +0, -0, or NaN, otherwise true
• Strings evaluate to false if an empty string '', otherwise true

이 부분은 정말 시간 내서 따로 공부를 해야 할 것 같습니다.

 

4. 주석 관련 컨벤션

Use /**... */ for multi-line comments. Include a description, specify types and values for all parameters and return values.

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...stuff...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */
function make(tag) {

  // ...stuff...

  return element;
}

multi-line 주석에서 저 asterisk를 세로로 이어서 bullet처럼 사용한 걸 처음 봤는데 정말 인상 깊었습니다.

뭔가 귀엽고.. 위에서 별이 쏟아져내리는 모양이라 마음에 들었습니다.

 

5. 세미콜론은 사용하자고 한다.

react를 다루며 prettier에서도 그렇고 세미콜론은 빼는 옵션으로 계속 코딩했는데 지금 생각해 보니 빼는 것에 정확한 이유가 없었습니다.

오히려 세미콜론을 빼지 말아야 할 이유는 조금이라도 있기 때문에 prettier 설정을 바꿔야 할 것 같습니다.

 

# 마치며

1주차 미션 코드를 작성하면서 이 Style Guide 컨벤션이 자꾸 마음에 걸렸습니다.

저 본문에선 중괄호{} 안 양끝엔 공백을 넣고, 대괄호[] 안 양끝엔 공백을 넣지 마라.

정도 수준까지로 나와 있었는데

저 모든 분량을 머릿속으로 기억할 순 없으니 이왕 지킬 거면 완벽히 지키면 좋겠는데,, 생각도 들었습니다.

내 코드가 특정 JS 컨벤션에 맞는지 맞춤법 검사기처럼 돌릴 수 있는 웹사이트가 있으면 좋겠다는 생각을 해봅니다..!

..

그럼 이만! 1주차 회고글에서 보아요

🐶