Skip to content

Latest commit

ย 

History

History

JavaScript

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
ย 
ย 

JavaScript ์ฝ”๋”ฉ ์Šคํƒ€์ผ

Style Guide

Airbnb์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋˜, ์šฐ๋ฆฌ ์ƒํ™ฉ์— ๋งž๊ฒŒ ์ผ๋ถ€ ๊ทœ์น™์„ ์˜ค๋ฒ„๋ผ์ด๋”ฉํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค. ๋ณ€๊ฒฝ๋œ ๊ทœ์น™์€ ์ด๊ณณ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

ES2015+

๊ถŒ์žฅ๋˜๋Š” ์ตœ์†Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒ„์ „์€ ES6(ECMAScript 2015)์ด๋‹ค. ํ•˜์œ„ ํ˜ธํ™˜์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋Š” Babel ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ๋ฅผ ํ†ตํ•˜์—ฌ ์ง€์›ํ•˜๋˜, ๊ฐ€๋Šฅํ•œ ์ตœ์‹ (latest) ๋ฌธ๋ฒ•์„ ํ™œ์šฉํ•  ๊ฒƒ. ES6์— ๋Œ€ํ•ด ๋“ค์–ด๋ณธ ์ ์ด ์—†๋‹ค๋ฉด, ๊ฐ„๋žตํ•œ ์†Œ๊ฐœ์™€ ES6 In Depth ์‹œ๋ฆฌ์ฆˆ ์†Œ๊ฐœ๊ธ€์„ ์ฝ์–ด๋ณผ ๊ฒƒ.

Linting

์ •์  ๋ถ„์„๊ธฐ๋กœ๋Š” ESLint๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. "์™œ ESLint ์ธ๊ฐ€?"์— ๋Œ€ํ•ด์„œ๋Š” JSLint, JSHint(ํ˜„์žฌ grunt์—์„œ ์‚ฌ์šฉ), JSCS ์™€ ๋น„๊ต๊ธ€ ์ฐธ๊ณ .

npm ์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด @ridi/eslint-config ํŒจํ‚ค์ง€๋ฅผ ํ†ตํ•ด ๋ฏธ๋ฆฌ ์„ค์ •๋œ ๊ทœ์น™์„ ์†์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

WebStorm, PhpStorm ์„ค์ •

Preference ๋ฉ”๋‰ด์—์„œ Editor > Code Style > Javascript ์„ ํƒ

  • Tab and Indents ํƒญ
    • Use Tab character ์ฒดํฌ ํ•ด์ œ
    • Indent 2

ESLint ์„ค์ •ํ•˜๊ธฐ

Languages & Frameworks > Javascript > Code Quality Tools > ESLint ์„ ํƒ

  • Enable ์ฒดํฌ
  • ESLint ํŒจํ‚ค์ง€ ์œ„์น˜ ์ง€์ •
  • (์„ ํƒ) .eslintrc ์œ„์น˜ ์ง€์ •

ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ (npm)

  • ํŒจํ‚ค์ง€ ์ด๋ฆ„(package.json์˜ name ํ•„๋“œ)์€ ridi ์Šค์ฝ”ํ”„๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
    • e.g. "name": "@ridi/my-package"
  • ํŒจํ‚ค์ง€ ๋ฒ„์ „(package.json์˜ version ํ•„๋“œ)์€ Semantic Versioning์„ ๋”ฐ๋ฅธ๋‹ค.
  • ํŒจํ‚ค์ง€ ๋ฐฐํฌ์‹œ npm์„ ์ด์šฉํ•œ๋‹ค.
    • ํ˜„์žฌ๋Š” ๊ณต๊ฐœ ๋ฐฐํฌ๋งŒ ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ npm publish --access public ๋ช…๋ น์œผ๋กœ ๋ฐฐํฌํ•œ๋‹ค.
    • npm์— ํ•œ๋ฒˆ ๋ฐฐํฌ๋œ ๋ฒ„์ „์€ ์‚ญ์ œ๋˜์–ด๋„ ๊ฐ™์€ ๋ฒ„์ „์œผ๋กœ ์žฌ๋ฐฐํฌ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. ๋”ฐ๋ผ์„œ ๋ฐฐํฌ ์ „ ๋กœ์ปฌ ์„ค์น˜๋ฅผ ํ†ตํ•ด ์ •์ƒ์ ์œผ๋กœ ํŒŒ์ผ๋“ค์ด ํฌํ•จ๋˜๋Š”์ง€ ํ™•์ธํ•  ๊ฒƒ.
  • ๋ฐฐํฌ ๊ถŒํ•œ์ด ์—†์„ ๊ฒฝ์šฐ @ridi/performanceํŒ€์— ์š”์ฒญํ•˜์—ฌ ridi organization์— ๊ณ„์ •์„ ๋“ฑ๋กํ•œ๋‹ค.