์›น์ด ๋‚˜์•„๊ฐˆ ๊ธธ์„ Sonarwhal๋กœ ๊ฒ€์‚ฌํ•˜์ž


์ €์ž: Stephanie Drescher ์›๋ฌธ: https://24ways.org/2017/lint-the-web-forward-with-sonarwhal/

๋ช‡ ํ•ด ์ „, ํ•„์ž๊ฐ€ ๋Œ€ํ•™ ์กธ์—…๋ฐ˜์ผ ๋•Œ ์›น ๊ฐœ๋ฐœ ๊ณผ์ •์€ ๋‘ ๊ฐ€์ง€์˜ ๊ธฐ์ˆ ์— ์ดˆ์ ์„ ๋‘์—ˆ๋‹ค. ํ•œ๊ฐ€์ง€๋Š” ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ๋“ค ์ฆ‰, HTML๊ณผ CSS, ๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ ํ•œ ๊ฐ€์ง€๋Š” Adobe Flash์˜€๋‹ค. ํ•„์ž๋Š” ํฌํŠธํด๋ฆฌ์˜ค์— ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด Action Script3.0๋กœ ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋Š”๋ฐ ๋งŽ์€ ์‹œ๊ฐ„์„ ๋“ค์˜€๋‹ค. ๋Œ€ํ•™์„ ์กธ์—…ํ•œ ๋’ค ๋ช‡ ๊ฐœ์›”์ด ์ง€๋‚˜, ํ•„์ž๋Š” Flash๋กœ ๊ณ ๊ฐ์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์—ˆ๊ณ  ๊ทธ๊ฒƒ์ด ์ฒ˜์Œ์ด์ž ๋งˆ์ง€๋ง‰์ด์—ˆ๋‹ค. Flash๋Š” ์ฃฝ์–ด๊ฐ€๊ณ  ์žˆ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ•„์ž์˜ ์ด๋ ฅ์„œ๋‚˜ ํฌํŠธํด๋ฆฌ์˜ค์—์„œ๋„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ๋ฐ”๋€Œ๋Š” ๊ธฐ์ˆ ์˜ ๋ณ€ํ™” ์†๋„์— ๋Œ€ํ•œ ์ฒซ ๋ฒˆ์งธ ๊ตํ›ˆ์ด์—ˆ๊ณ , ์กธ์—… ํ›„ ์ด์ œ ๋ง‰ ์‹ค๋ฌด๋กœ ๋›ฐ์–ด๋“œ๋Š” ์‚ฌ๋žŒ์—๊ฒŒ๋Š” ๋งค์šฐ ๋‘๋ ค์šด ๊นจ๋‹ฌ์Œ์ด์—ˆ๋‹ค. ๊ทธ ํ›„ 7๋…„ ํ›„์ธ ์ง€๊ธˆ, ํ•„์ž๋Š” Microsoft EdgeํŒ€์—์„œ ๋””์ž์ธ์„ ๋•๊ณ , ํ•„์ž๊ฐ€ ๋Š๊ผˆ๋˜ ๋ถˆ์•ˆ๊ฐ์„ ์ค„์—ฌ์ค„ ๋„๊ตฌ(Sonarwhal)๋ฅผ ๊ฐœ๋ฐœํ•œ๋‹ค.

Sonawhal์€ ํ•œ ์›น ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๋งŒ๋“  ๊ฒ€์‚ฌ ๋„๊ตฌ์ด๋‹ค. ์˜คํ”ˆ์†Œ์Šค์ด๋ฉฐ JS Foundation ์œ„์—์„œ ์‚ด์•„๊ฐ€๊ณ  ์žˆ๋‹ค. ์ด ๋„๊ตฌ๋Š” ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ์—๊ฒŒ ๊ณ„์†๋˜๋Š” ๋ณ€ํ™”์— ๋ฐœ์„ ๋งž์ถœ ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ฐ”๊พธ๋ฉด ์ข‹์„์ง€ ์ง€์†์ ์œผ๋กœ ์•Œ๋ ค์ค€๋‹ค.

nellie

Sonarwhal ๋งˆ์Šค์ฝ”ํŠธ์ธ "Nellie"

์›น ๊ฐœ๋ฐœ์„ ์ž˜ ํ•˜๊ธฐ๋ž€ ํž˜๋“  ์ผ์ด๋‹ค. HTML, CSS JavaScript๋งŒ์ด ์ „๋ถ€๋Š” ์•„๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋“ค์€ ์ ‘๊ทผ์„ฑ, ์„ฑ๋Šฅ, ๋ณด์•ˆ, ์ƒˆ๋กœ ์ƒ๊ธฐ๊ณ  ์žˆ๋Š” ํ‘œ์ค€, ๊ทธ ์ด์ƒ์˜ ๊ฒƒ๋“ค์„ ์ดํ•ดํ•ด์•ผ ํ•œ๋‹ค. ๋ช‡ ๊ฐœ์›” ๋งˆ๋‹ค ์ด ๋ชจ๋“  ๊ฒƒ์— ๋Œ€ํ•œ ์ง€์‹์ด ์ƒˆ๋กœ์›Œ์ง„๋‹ค. ๋ฐฐ์›Œ์•ผ ํ•  ๊ฒƒ์ด ๋ฌด๊ถ๋ฌด์ง„ํ•˜๋‹ค.

์›น ๊ฐœ๋ฐœ์€ ์–ด๋ ต๋‹ค

ํ•ญ์ƒ ์ตœ์‹ ์˜ ์ง€์‹์œผ๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ด ํƒ์ง€ ๋„๊ตฌ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ฒŒ ํ•œ ์›๋™๋ ฅ์ด๋‹ค. ๋‹น์‹ ์ด ๊ฐ“ ์‹œ์ž‘ํ•œ ๊ฐœ๋ฐœ์ž๊ฑด, ํ•™์ƒ์ด๊ฑด, 10๋…„ ์ด์ƒ์˜ ๊ฒฝํ—˜์ด ์žˆ๊ฑด SonarwhalํŒ€์€ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž˜ ๋™์ž‘ํ•˜๋Š” ๋‹น์‹ ์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ๋•๋Š”๋‹ค.

ํ˜„์žฌ Sonarwhal์€ 5๊ฐœ์˜ ๋ชจ๋ฒ” ์‚ฌ๋ก€ ๋ฒ”์ฃผ๋ฅผ ํ™•์ธํ•œ๋‹ค. ์ ‘๊ทผ์„ฑ, ์ƒํ˜ธ ์šด์šฉ์„ฑ, ์„ฑ๋Šฅ, Progressive Web Apps, ๋ณด์•ˆ์ด๋‹ค. ๊ฐ๊ฐ์˜ ๊ฒ€์ฆ ์กฐ๊ฑด์€ ๊ทœ์น™(rule)์ด๋ผ๊ณ  ๋ถˆ๋ฆฐ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์€ ์ž์‹ ๋งŒ์˜ ๊ทœ์น™์„ ๋งŒ๋“ค์–ด์„œ ํ”„๋กœ์ ํŠธ์— ํŠนํ™”๋œ ์ง€์นจ์„ ๋”ฐ๋ฅด๋„๋กํ•  ์ˆ˜ ์žˆ๋‹ค. (์˜ˆ๋ฅผ๋“ค์–ด ํ†ต๊ณ„ ์ง€ํ‘œ ๊ฒ€์ฆ์ด๋‚˜, ํŽ˜์ด์ง€์˜ ํ˜•ํƒœ ๋“ฑ ์ด ์žˆ๋‹ค.)

Sonarwhal ์‚ฌ์šฉ์—๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

  1. ์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ ๋ฒ„์ „. ๊ณต๊ฐœ๋œ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ๊ฒ€์‚ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  2. ๋ช…๋ น์ค„ ๋„๊ตฌ (์ดํ•˜ CLI). ๊ฒ€์‚ฌ์˜ ์„ค์ •์„ ์›ํ•˜๋Š” ๋Œ€๋กœ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜, ๊ฐœ๋ฐœ๊ณผ์ •์— ํฌํ•จํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ

์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ๋Š” ๊ฐ„์†Œํ™”๋œ ์›น์‚ฌ์ดํŠธ ๊ฒ€์‚ฌ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค. URL์„ ์ž…๋ ฅํ•˜๋ฉด ์—ฌ๋Ÿฌ๋ถ„์€ ์›น ํŽ˜์ด์ง€ ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๋ฅผ ์˜๊ตฌ์  ๋งํฌ๋กœ ๋ฐ›์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์ฃผ์†Œ๋ฅผ ์–ธ์ œ๋“  ๊ณต์œ ํ•˜๊ณ  ์žฌ๋ฐฉ๋ฌธํ•  ์ˆ˜ ์žˆ๋‹ค.

Sonarwhal ์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ

ํ•„์ž์˜ ํŒ€์ด ์ƒˆ๋กœ์šด ๊ทœ์น™์„ ์ถ”๊ฐ€ํ•  ๋•Œ ๊ทœ์น™์— ๋Œ€ํ•œ ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ์‹œ๊ฐ„๋ณด๋‹ค ๊ฐ ์ฃผ์ œ, ์†Œ์Šค์ฝ”๋“œ ๊ฒ€์ƒ‰, ๋ฌธ์„œํ™”์— ๋” ๋งŽ์€ ์‹œ๊ฐ„์„ ๋“ค์ธ๋‹ค. ๊ฒ€์‚ฌ์— ๋Œ€ํ•ด ๋‹จ์ˆœํžˆ ๊ฒฐ๊ณผ๋ฅผ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜์ง€๋งŒ, ์–ด๋–ค ๋ถ€๋ถ„์— ์˜ํ•ด์„œ ์‹คํŒจ๋œ ๊ฒƒ์ธ์ง€ ์ดํ•ด์‹œํ‚ค๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜๋‹ค. ์‹คํŒจํ•œ ๊ฐ๊ฐ์˜ ๊ทœ์น™๋“ค ์‚ฌ์ด์—์„œ ์—ฌ๋Ÿฌ๋ถ„์€ ์ƒ์„ธํ•œ ๋ฌธ์„œ์˜ ๋งํฌ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ์ด๋‹ค. ๊ทธ ๋ฌธ์„œ๋Š” ์™œ ์—ฌ๋Ÿฌ๋ถ„์ด ์ด ๊ทœ์น™์— ์ฃผ์˜ํ•ด์•ผ ํ•˜๋ฉฐ ํ…Œ์ŠคํŠธ๋Š” ์–ด๋–ป๊ฒŒ ์ด๋ฃจ์–ด์ง€๋Š”์ง€, ํ†ต๊ณผํ•œ ์˜ˆ์ œ๋Š” ์–ด๋–ค์ง€, ๋ฐ˜๋Œ€๋กœ ์‹คํŒจ๋œ ์˜ˆ์ œ๋Š” ๋ฌด์—‡์ธ์ง€, ์ด ๊ทœ์น™์— ๊ด€์‹ฌ์ด ์žˆ๋‹ค๋ฉด ๊นŠ์€ ์ดํ•ด๋ฅผ ์œ„ํ•ด ํ•„์š”ํ•œ ์œ ์šฉํ•œ ๋ฌธ์„œ ๋งํฌ๋„ ์ œ๊ณตํ•œ๋‹ค.

๋ฌธ์„œ๋ฅผ ์ฝ๊ณ , Sonarwhal์„ ์ง€์†์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ณผ์ •์—์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ตœ์‹  ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์ ์šฉ ํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž€๋‹ค. ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋‚˜๊ฐ€๋ฉด์„œ ๊ฑฐ๋“ญ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๊ณ  ์ธ์ง€ํ• ์ˆ˜๋ก, ๊ทธ๋“ค์€ ์ž์ฃผ ๋น ํŠธ๋ฆฐ ์—˜๋ฆฌ๋จผํŠธ๋‚˜, ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์ฝ”๋“œ๋ฅผ ๋จผ์ € ๊ณ ์น˜๊ธฐ ์‹œ์ž‘ํ•  ๊ฒƒ์ด๋‹ค. ์ด๊ฒƒ์€ ๋‹จ๋ฐฉํ–ฅ ์˜์‚ฌ์†Œํ†ต์ด ์•„๋‹ˆ๋‹ค. ๋ฌธ์„œ๋Š” Sonarwhal ์›น์‚ฌ์ดํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์ˆ˜์ •์„ ์œ„ํ•ด Github์—๋„ ์žˆ์œผ๋‹ˆ ๋” ์ข‹์€ ๋ฌธ์„œ๋ฅผ ์œ„ํ•ด ์šฐ๋ฆฌ๋ฅผ ๋„์™€์ฃผ๊ธธ ๋ฐ”๋ž€๋‹ค.

๊ฒ€์‚ฌ ๊ฒฐ๊ณผ

ํ˜„์žฌ Sonarwhal ์›น์‚ฌ์ดํŠธ์˜ ๊ฒ€์‚ฌ ์„ค์ •์€ ๋งค์šฐ ์—„๊ฒฉํ•œ ์ƒํƒœ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ, ์•„๋งˆ๋„ ์—ฌ๋Ÿฌ๋ถ„์˜ ๋งˆ์Œ์„ ์ƒํ•˜๊ฒŒ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. (ํ•„์ž์˜ ๊ฐœ์ธ ์›น์‚ฌ์ดํŠธ๋ฅผ ํ…Œ์ŠคํŠธ ํ•ด๋ดค์„๋•Œ๋Š” ๊ทธ๋žฌ๋‹ค.)๊ทธ๋Ÿฌ๋‚˜ CLI์—์„œ์ฒ˜๋Ÿผ ๋ชจ๋“  ๊ทœ์น™์˜ ์—„๊ฒฉํ•จ ์ˆ˜์น˜๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

Sonarwhal ๋ช…๋ น์ค„ ๋„๊ตฌ

CLI๋Š” Sonarwhal์— ๋Œ€ํ•œ ๋ชจ๋“  ์กฐ์ •์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. ์–ด๋–ค ๊ทœ์น™์„ ์‚ฌ์šฉํ•˜๋ฉฐ ์–ด๋–ป๊ฒŒ ๊ฐœ์กฐํ• ์ง€, ์–ด๋–ค ๋„๋ฉ”์ธ์œผ๋กœ ์ ‘์†ํ• ์ง€ ๋ชจ๋‘ ๊ฐ€๋Šฅํ•˜๋‹ค. NodeJs ๋ฒ„์ „์€ ์ตœ์‹  LTS(v8)๋‚˜ Stable(v9)์ด ํ•„์š”ํ•˜๋‹ค. ๊ทธ๋ฆฌ๊ณ  npm ๊ฐ™์€ ์—ฌ๋Ÿฌ๋ถ„์ด ์ฆ๊ฒจ ์‚ฌ์šฉํ•˜๋Š” ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋„ ํ•„์š”ํ•˜๋‹ค:

npm install -g Sonarwhal

์„ค์น˜๊ฐ€ ๋๋‚ฌ๋‹ค๋ฉด ์—ฌ๋Ÿฌ๋ถ„์€ ์ด์ œ ์–ด๋Š ๊ณณ์—์„œ๋“  ๋‹ค์Œ๊ณผ ๊ฐ™์ด Sonarwhal์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค:

Sonarwhal https://example.com

๋ช…๋ น์ค„ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ

๊ตฌ์„ฑ ์š”์†Œ๋Š” .sonarwhalrc ํŒŒ์ผ์„ ํ†ตํ•ด ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์‚ฌ์ดํŠธ๋ฅผ ๋ถ„์„ํ•  ๋•Œ๋Š” ํŒŒ์ผ์ด ์กด์žฌํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. ์ด๋•Œ๋Š” ํ”„๋กฌํ”„ํŠธ๋กœ ๋œจ๋Š” ๋ช‡ ๊ฐ€์ง€ ์งˆ๋ฌธ์— ๋‹ตํ•ด์•ผ ํ•œ๋‹ค:

  • What connector do you want to use? ์—ฐ๊ฒฐ์ž๋Š” ์›น์‚ฌ์ดํŠธ์— ์—ฐ๊ฒฐํ•˜๊ณ  ์‘๋‹ต, ์ž์›, HTML ๋“ฑ์˜ ๋ชจ๋“  ์ •๋ณด๋ฅผ ์ˆ˜์ง‘ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•œ๋‹ค. ํ˜„์žฌ jsdom๊ณผ Microsoft Edge, Google Chrome์ด ์ง€์›๋œ๋‹ค.
  • What formatter do you want to use?? ๊ฒฐ๊ณผ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„์ง€ ์ •ํ•œ๋‹ค. summary, stylish ๋“ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋ชจ๋“  ๊ฒฐ๊ณผ๋ฅผ ๋‹ค ๋ณด๊ณ  ์‹ถ๋‹ค๊ฑฐ๋‚˜, ๋น ๋ฅธ ์ˆ˜ํ–‰ ๊ณผ์ •์ด ํ•„์š”๋กœ ํ•  ๊ฒฝ์šฐ verbose๋‚˜ informative๊ฐ€ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.
  • Do you want to use the recommended rules configuration ๊ทœ์น™์€ ์šฐ๋ฆฌ๊ฐ€ ๊ฒ€์‚ฌํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. ๋ฌธ์„œ๋ฅผ ์ฝ๊ณ  ์–ด๋–ค ๊ทœ์น™์„ ์ ์šฉํ• ์ง€ ์•„๋Š” ๊ฒฝ์šฐ๋ฅผ ์ œ์™ธํ•˜๊ณ , ์ฒซ ์‚ฌ์šฉ์ž์ผ ๊ฒฝ์šฐ์—๋Š” ์ถ”์ฒœ ๊ทœ์น™์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
  • What browsers are you targeting? Sonarwhal์˜ ๋›ฐ์–ด๋‚œ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๊ทœ์น™์ด ๋ชฉํ‘œ ๋ธŒ๋ผ์šฐ์ €์˜ ์‘๋‹ต์— ๋ฐ˜์‘ํ•ด์„œ ๊ทœ์น™์„ ์ถ”๊ฐ€ํ• ์ง€, ์ œ๊ฑฐํ• ์ง€ ๊ถŒ์œ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Highest Document Mode๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ "X-UA-Compatible" ํ—ค๋”๋ฅผ IE10์ด๋‚˜ ๋” ๋‚ฎ์€ ๋ฒ„์ „์„ ์œ„ํ•ด ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜, IE10๋ณด๋‹ค ๋†’์€ ๋ฒ„์ „์„ ์œ„ํ•ด ์ œ๊ฑฐํ•˜๋ผ๊ณ  ์•Œ๋ ค์ค€๋‹ค.

Sonarwhal ํ™˜๊ฒฝ๊ตฌ์„ฑ ์ƒ์„ฑ๊ธฐ๊ฐ€ ์งˆ๋ฌธํ•˜๊ณ  ์žˆ๋‹ค

ํ•œ๋ฒˆ ์ด ์งˆ๋ฌธ๋“ค์— ๋‹ตํ•˜๋ฉด .sonarwhalrcํŒŒ์ผ์ด ์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ์„ฑ๋œ๋‹ค.

{
    "connector": {
        "name": "jsdom",
        "options": {
            "waitFor": 1000
        }
    },
    "formatters": "stylish",
    "rulesTimeout": 120000,
    "rules": {
        "apple-touch-icons": "error",
        "axe": "error",
        "content-type": "error",
        "disown-opener": "error",
        "highest-available-document-mode": "error",
        "validate-set-cookie-header": "warning",
        // ...
    }
}

๊ฒ€์‚ฌ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ๋‚œ ๋’ค ๋ช‡ ์ดˆ๊ฐ€ ์ง€๋‚˜๋ฉด ์—ฌ๋Ÿฌ๋ถ„์€ ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ๋ณด๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค. ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๋Š” ์–ด๋–ค ํฌ๋งคํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ƒ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ๋ณด์ด๋ฏ€๋กœ, ํ•œ ๊ฐœ์”ฉ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์—ฌ๋Ÿฌ๋ถ„์ด ๋” ์„ ํ˜ธํ•˜๋Š” ํฌ๋งคํ„ฐ๋กœ ๋ณ€๊ฒฝํ•˜๊ธธ ๋ฐ”๋ž€๋‹ค.

์›น ์‚ฌ์ดํŠธ Sonarwhal ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ด๊ณผ ๋™์‹œ์— ํ•„์ž์˜ ๋งˆ์Œ๋„ ์‚ฐ์‚ฐ ์กฐ๊ฐ์ด ๋‚ฌ๋‹ค๐Ÿ’”

์ด์ œ ์—ฌ๋Ÿฌ๋ถ„์€ ์˜ค๋ฅ˜ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ์ด๊ฒƒ์„ ํ†ตํ•ด ์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ์„ ํ•ด๋ณด์ž! ์•Œ์•„๋‘˜ ๊ฒƒ์€, ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฒ€์‚ฌํ•  ๋•Œ ํŽ˜์ด์ง€์— ์ถ”๊ฐ€๋œ ํ†ต๊ณ„์ง€ํ‘œ๋‚˜ ์–ด๋”˜๊ฐ€์—์„œ ๊ฐ€์ ธ์˜จ ๊ธ€์”จ์ฒด๋„ ๊ฒ€์‚ฌํ•œ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์ด ์ด ํŒŒ์ผ๋“ค์„ ์ˆ˜์ •ํ•˜์ง€๋Š” ๋ชปํ•˜์ง€๋งŒ CLI๋ฅผ ํ†ตํ•ด ์ด ํŒŒ์ผ๋“ค์˜ ๋„๋ฉ”์ธ์„ ๋ฌด์‹œํ•˜๋„๋ก ์„ค์ •ํ•ด์„œ ์—ฌ๋Ÿฌ๋ถ„์ด ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ํŒŒ์ผ๋“ค๋งŒ ๊ฒฐ๊ณผ์— ๋‚˜์˜ค๋„๋ก ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ œ๊ณต๋˜๋Š” ๋ฌธ์„œ๋Š” ์˜ค๋ฅ˜๋ฅผ ์–ด๋–ป๊ฒŒ ์ˆ˜์ •ํ• ์ง€์— ๋Œ€ํ•œ ์ถฉ๋ถ„ํ•œ ๊ธธ์žก์ด๊ฐ€ ๋  ๊ฒƒ์ด์ง€๋งŒ, ์ด๊ฒƒ๋งŒ์œผ๋กœ๋Š” ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ ์šฐ๋ฆฌ๋ฅผ ๋„์™€์„œ ์–ด๋–ป๊ฒŒ ์ˆ˜์ •ํ•˜๋ฉด ์ข‹์„์ง€ ์ œ์•ˆ์„ ๋ถ€ํƒํ•œ๋‹ค. ์ด๊ฒƒ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋…ธ๋ ฅ์ด๋ฉฐ, ์—ฌ๋Ÿฌ๋ถ„์ด ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ์„ ๊ถ๊ธˆํ•ดํ•  ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ผ์ด๋‹ค. ํ•„์ž์˜ ์›น์‚ฌ์ดํŠธ๋“ค์„ ๊ฒ€์‚ฌํ•˜๋ฉด์„œ Sonarwhal์€ ํ•„์ž์—๊ฒŒ Apple ํ„ฐ์น˜ ์•„์ด์ฝ˜์ด ์—†๋‹ค๊ณ  ๊ฒฝ๊ณ ํ–ˆ๋‹ค. ํ•„์ž๊ฐ€ Sonarwhal ๋ฌธ์„œ๋ฅผ ์ฐพ์•„๋ณด์ง€ ์•Š๊ณ  ์›น ๊ฒ€์ƒ‰์„ ํ–ˆ์„๋•Œ, ๊ฐ€์žฅ ์œ„์— ์žˆ๋Š” 3๊ฐœ์˜ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋Š” ํ•„์ž์—๊ฒŒ ์˜ค๋ž˜๋œ ์ •๋ณด๋ฅผ ์ฃผ์—ˆ๋‹ค. ํ•„์ž๋Š” ๋‹ค์–‘ํ•œ ์•„์ด์ฝ˜ ์น˜์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผํ•œ๋‹ค. ํ•˜์ง€๋งŒ ๋Œ€์‘ ๊ธฐ๊ธฐ์— ๋งž๋Š” ๋ชจ๋“  ์•„์ด์ฝ˜ ์น˜์ˆ˜๋“ค๊นŒ์ง€๋Š” ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค. ์ถฉ๋ถ„ํžˆ ํฐ 180px * 180px ํ•œ๊ฐœ์˜ ์น˜์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์˜ค๋ž˜๋œ ๊ธฐ๊ธฐ๋“ค์— ๋งž๊ฒŒ ์ถ•์†Œํ•ด์„œ ์ œ๊ณตํ•˜๋ฉด ๋œ๋‹ค.

๊ฐ€์žฅ ์œ„์— ์žˆ๋Š” ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ผ๋„ ํ•ญ์ƒ ์˜ณ์ง€๋Š” ์•Š์œผ๋ฉฐ, ์—ฌ๋Ÿฌ๋ถ„์ด ์˜ค๋ž˜๋œ ์ •๋ณด๋“ค์„ ๊ฒ€์ƒ‰ํ•˜์ง€ ์•Š๊ธธ ๋ฐ”๋ž€๋‹ค. Sonarwhal์˜ ๊ฐ€๋Šฅ์„ฑ์ด ๋” ํ™•์žฅ๋ผ์„œ, ์—ฌ๋Ÿฌ๋ถ„์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ํ•œ๊ณณ์—์„œ ์‹œ๋ฒ” ํ…Œ์ŠคํŠธ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์ด๋‹ค.

์ง€๊ธˆ๊นŒ์ง€์˜ ์—ฌ์ •, ๊ทธ๋ฆฌ๊ณ  ์•ž์œผ๋กœ๋Š”

Microsoft EdgeํŒ€์€, ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ฉ‹์ง„ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ฃผ๋Š”๋ฐ์— ๋ชฐ๋‘ํ•ด์žˆ๋‹ค. ๋งค์ผ ๋งŽ์€ ์›น์‚ฌ์ดํŠธ๊ฐ€ ์šฐ๋ฆฌ์˜ ์ด์Šˆ ์ถ”์  ์‹œ์Šคํ…œ์œผ๋กœ ๋“ค์–ด์˜ค๋Š” ๊ฒƒ์„ ๋ณด๊ณ  ์žˆ๋‹ค.(๊ทธ๋Ÿฐ ๋ฒ„๊ทธ๋“ค์„ ์ž‘์„ฑํ•ด ์ฃผ๋Š” ๊ฒƒ์— ๊ฐ์‚ฌ๋ฅผ ์ „ํ•œ๋‹ค. ๊ทธ๋“ค์€ Microsoft Edge๋ฅผ ๋”์šฑ๋” ์ข‹๊ฒŒ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค) ๊ณ„์†ํ•ด์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์Šˆ๋“ค์€ ์•ˆํƒ€๊นŒ์šด ์‹ค์ˆ˜์ด๊ฑฐ๋‚˜, ๋’ค๋–จ์–ด์ง„ '๋ชจ๋ฒ” ์‚ฌ๋ก€๋“ค'์ด๋ฉฐ ๋ฐ˜๋“œ์‹œ ํ”ผํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ์ด ๋„๊ตฌ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋ชจ๋‘๊ฐ€ ์›น์„ ๋” ์ข‹์€ ๋ชจ์Šต์œผ๋กœ ๋งŒ๋“ค๋„๋ก ๋•๊ณ  ์žˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ Sonarwhal์„ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ์„ ๋•Œ, ์šฐ๋ฆฐ ์‚ฌ๋žŒ๋“ค์ด ๋” ์ข‹์€, ์ตœ์‹  ๊ธฐ์ˆ ์˜ ์ฝ”๋“œ๋ฅผ ๊ทธ๋“ค์˜ ์›น ์‚ฌ์ดํŠธ์— ์‚ฌ์šฉํ•˜๊ธธ ๋ฐ”๋ž๋‹ค. Sonarwhal์ด ๋ˆ„๊ตฌ์—๊ฒŒ๋‚˜ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ผ๋ฏ€๋กœ, ์ดˆ๊ธฐ์— ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ–ˆ๋˜ 3๊ฐ€์ง€ ์ง€์นจ์„ ์ •ํ–ˆ๋‹ค:

  1. ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์˜ํ•ด ์ฃผ๋„๋œ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๊ฐ€์žฅ ํฐ ๊ด€์‹ฌ์‚ฌ๋ฅผ ์œ„ํ•ด ๊ฐœ๋ฐœํ•œ๋‹ค. ์›น์„ ๋ชจ๋‘์˜ ๊ฒƒ์ด๋ฉฐ ์ด ํ”„๋กœ์ ํŠธ ๋˜ํ•œ ๊ทธ๋ ‡๋‹ค. ์˜คํ”ˆ์†Œ์Šค์ด๊ธฐ ๋•Œ๋ฌธ๋งŒ ์•„๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋„ JS Foundation์— ๊ธฐ๋ถ€ํ•˜๊ณ  ์žˆ๊ณ , ๊ฐœ์ธ์ด๋‚˜ ๋‹จ์ฒด ๋ชจ๋‘์˜ ํ˜‘์—…์„ ํ™˜์˜ํ•˜๋Š” ํฌ๊ด„์ ์ธ ๊ด€๋ฆฌ ๋ชจ๋ธ๋„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
  2. ์‚ฌ์šฉ์ž ์ค‘์‹ฌ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ผ. ์‚ฌ์šฉ์ž๋ฅผ ์ค‘์‹ฌ์— ๋‘๊ณ  Sonarwhal์„ ์—ฌ๋Ÿฌ๋ถ„์ด ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ๋“ค์„ ์—ฌ๋Ÿฌ๋ถ„์˜ ๊ธฐ์ˆ  ์—ญ๋Ÿ‰์ด ์–ด๋–ป๋“  ๊ฐ„์— ์„ค์ •ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ธฐ๋ฅผ ์›ํ•œ๋‹ค.
  3. ํ˜‘์—…ํ•˜๋ผ. ์ด๋ฏธ ๋ฐœ๋ช…๋œ ๊ฒƒ์— ๋Œ€ํ•ด ์žฌ๋ฐœ๋ช…ํ•˜๋ ค ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ž˜์„œ ๊ธฐ์กด์— ์กด์žฌํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋„๊ตฌ์™€ ์„œ๋น„์Šค๋“ค๊ณผ ํ˜‘์—…ํ•œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์ž๋ฉด aXe, synk.io, Cloudinary ๋“ฑ์ด ์žˆ๋‹ค.

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

  • ์„ฑ๋Šฅ, ์ ‘๊ทผ์„ฑ, ๋ณด์•ˆ, Progressive Web Apps ๋“ฑ์„ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ์ƒˆ๋กœ์šด ๊ทœ์น™๋“ค
  • Visual Studio Code๋ฅผ ์œ„ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ: Sonarwhal์„ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์ด ๋” ๋‚˜์€ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ธธ ์›ํ•˜๋ฉฐ, ๊ทธ๊ฒƒ์ด ์—ฌ๋Ÿฌ๋ถ„์˜ ์—๋””ํ„ฐ๋ณด๋‹ค ์ข‹์„ ๊ฒƒ์ด๋‹ค.
  • ์˜จ๋ผ์ธ ์„œ๋น„์Šค๋ฅผ ์œ„ํ•œ ํ™˜๊ฒฝ ์„ค์ • ์˜ต์…˜: ๊ธฐ๋ฐ˜์‹œ์„ค์„ ๋ฏธ์„ธ ์กฐ์ •์„ ํ†ตํ•ด ์šฐ๋ฆฌ์˜ ์Šค์บ๋„ˆ ๊ทœ์น™ ์„ค์ •์ด ์ž ๊ฒจ์žˆ์ง€๋งŒ, ๋” ๋‚˜์•„๊ฐ€ CLI์˜ ์‚ฌ์šฉ์ž ์ •์˜ ์˜ต์…˜์„ ์˜จ๋ผ์ธ์—์„œ๋„ ์ง€์›ํ•˜๋ ค๊ณ  ์ค€๋น„ ์ค‘์ด๋‹ค.

์ด๊ฒƒ์€ ์›น ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์œ„ํ•œ, ์›น ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์˜ํ•œ ๋„๊ตฌ์ด๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์ด Sonarwhal์— ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ฑฐ๋‚˜, ๋” ์ข‹์€ ์›น์„ ๋งŒ๋“ค๊ณ  ์‹ถ๊ฑฐ๋‚˜, Sonarwhal์— ๊ธฐ์—ฌํ•˜๊ธฐ๋ฅผ ์›ํ•œ๋‹ค๋ฉด ์—ฐ๋ฝํ•˜๊ธธ ๋ฐ”๋ž€๋‹ค. ์šฐ๋ฆฌ์˜ ์ด์Šˆ ์ค‘ ๋ช‡ ๊ฐ€์ง€๋Š” ์—ฌ๋Ÿฌ๋ถ„์ด ๋„์šธ ์ˆ˜ ์žˆ์„์ง€ ๋ชจ๋ฅธ๋‹ค. Sonarwhal์„ ์•Œ๊ธฐ ์œ„ํ•ด Github organization๋„ ๋ฐฉ๋ฌธํ•˜๋Š” ๊ฒƒ๋„ ์žŠ์ง€ ๋งˆ๋ผ. PR์€ ์–ธ์ œ๋‚˜ ์—ฌ๋Ÿฌ๋ถ„์—๊ฒŒ ์—ด๋ ค์žˆ๋‹ค.

@NarwhalNellie Twitter๋กœ ์Šค์บ๋„ˆ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜๋Š”์ง€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์˜๊ฒฌ์„ ์•Œ๋ ค์ฃผ๊ธธ ๊ธฐ๋‹ค๋ฆฌ๊ฒ ๋‹ค. ์šฐ๋ฆฌ์™€ ํ•จ๊ป˜ ์›น์˜ ๋ฏธ๋ž˜๋ฅผ ๊ฒ€์‚ฌํ•˜์ž!

Weekly Magazine

Weekly Pick!

์›๋ฌธ : https://24ways.org/2017/lint-the-web-forward-with-sonarwhal/

์›น์ด ๋‚˜์•„๊ฐˆ ๊ธธ์„ Sonarwhal๋กœ ๊ฒ€์‚ฌํ•˜์ž


๋ช‡ ํ•ด ์ „, ํ•„์ž๊ฐ€ ๋Œ€ํ•™ ์กธ์—…๋ฐ˜์ผ ๋•Œ ์›น ๊ฐœ๋ฐœ ๊ณผ์ •์€ ๋‘ ๊ฐ€์ง€์˜ ๊ธฐ์ˆ ์— ์ดˆ์ ์„ ๋‘์—ˆ๋‹ค. ํ•œ๊ฐ€์ง€๋Š” ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ๋“ค ์ฆ‰, HTML๊ณผ CSS, ๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ ํ•œ ๊ฐ€์ง€๋Š” Adobe Flash์˜€๋‹ค. ํ•„์ž๋Š” ํฌํŠธํด๋ฆฌ์˜ค์— ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด Action Script3.0๋กœ ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋Š”๋ฐ ๋งŽ์€ ์‹œ๊ฐ„์„ ๋“ค์˜€๋‹ค. ๋Œ€ํ•™์„ ์กธ์—…ํ•œ ๋’ค ๋ช‡ ๊ฐœ์›”์ด ์ง€๋‚˜, ํ•„์ž๋Š” Flash๋กœ ๊ณ ๊ฐ์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์—ˆ๊ณ  ๊ทธ๊ฒƒ์ด ์ฒ˜์Œ์ด์ž ๋งˆ์ง€๋ง‰์ด์—ˆ๋‹ค. Flash๋Š” ์ฃฝ์–ด๊ฐ€๊ณ  ์žˆ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ•„์ž์˜ ์ด๋ ฅ์„œ๋‚˜ ํฌํŠธํด๋ฆฌ์˜ค์—์„œ๋„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ทธ๊ฒƒ์€ ๋ฐ”๋€Œ๋Š” ๊ธฐ์ˆ ์˜ ๋ณ€ํ™” ์†๋„์— ๋Œ€ํ•œ ์ฒซ ๋ฒˆ์งธ ๊ตํ›ˆ์ด์—ˆ๊ณ , ์กธ์—… ํ›„ ์ด์ œ ๋ง‰ ์‹ค๋ฌด๋กœ ๋›ฐ์–ด๋“œ๋Š” ์‚ฌ๋žŒ์—๊ฒŒ๋Š” ๋งค์šฐ ๋‘๋ ค์šด ๊นจ๋‹ฌ์Œ์ด์—ˆ๋‹ค. ๊ทธ ํ›„ 7๋…„ ํ›„์ธ ์ง€๊ธˆ, ํ•„์ž๋Š” Microsoft EdgeํŒ€์—์„œ ๋””์ž์ธ์„ ๋•๊ณ , ํ•„์ž๊ฐ€ ๋Š๊ผˆ๋˜ ๋ถˆ์•ˆ๊ฐ์„ ์ค„์—ฌ์ค„ ๋„๊ตฌ(Sonarwhal)๋ฅผ ๊ฐœ๋ฐœํ•œ๋‹ค.

Sonawhal์€ ํ•œ ์›น ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ๋งŒ๋“  ๊ฒ€์‚ฌ ๋„๊ตฌ์ด๋‹ค. ์˜คํ”ˆ์†Œ์Šค์ด๋ฉฐ JS Foundation ์œ„์—์„œ ์‚ด์•„๊ฐ€๊ณ  ์žˆ๋‹ค. ์ด ๋„๊ตฌ๋Š” ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ์—๊ฒŒ ๊ณ„์†๋˜๋Š” ๋ณ€ํ™”์— ๋ฐœ์„ ๋งž์ถœ ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ฐ”๊พธ๋ฉด ์ข‹์„์ง€ ์ง€์†์ ์œผ๋กœ ์•Œ๋ ค์ค€๋‹ค.

nellie

Sonarwhal ๋งˆ์Šค์ฝ”ํŠธ์ธ "Nellie"

์›น ๊ฐœ๋ฐœ์„ ์ž˜ ํ•˜๊ธฐ๋ž€ ํž˜๋“  ์ผ์ด๋‹ค. HTML, CSS JavaScript๋งŒ์ด ์ „๋ถ€๋Š” ์•„๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋“ค์€ ์ ‘๊ทผ์„ฑ, ์„ฑ๋Šฅ, ๋ณด์•ˆ, ์ƒˆ๋กœ ์ƒ๊ธฐ๊ณ  ์žˆ๋Š” ํ‘œ์ค€, ๊ทธ ์ด์ƒ์˜ ๊ฒƒ๋“ค์„ ์ดํ•ดํ•ด์•ผ ํ•œ๋‹ค. ๋ช‡ ๊ฐœ์›” ๋งˆ๋‹ค ์ด ๋ชจ๋“  ๊ฒƒ์— ๋Œ€ํ•œ ์ง€์‹์ด ์ƒˆ๋กœ์›Œ์ง„๋‹ค. ๋ฐฐ์›Œ์•ผ ํ•  ๊ฒƒ์ด ๋ฌด๊ถ๋ฌด์ง„ํ•˜๋‹ค.

์›น ๊ฐœ๋ฐœ์€ ์–ด๋ ต๋‹ค

ํ•ญ์ƒ ์ตœ์‹ ์˜ ์ง€์‹์œผ๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ด ํƒ์ง€ ๋„๊ตฌ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ฒŒ ํ•œ ์›๋™๋ ฅ์ด๋‹ค. ๋‹น์‹ ์ด ๊ฐ“ ์‹œ์ž‘ํ•œ ๊ฐœ๋ฐœ์ž๊ฑด, ํ•™์ƒ์ด๊ฑด, 10๋…„ ์ด์ƒ์˜ ๊ฒฝํ—˜์ด ์žˆ๊ฑด SonarwhalํŒ€์€ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž˜ ๋™์ž‘ํ•˜๋Š” ๋‹น์‹ ์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ๋•๋Š”๋‹ค.

ํ˜„์žฌ Sonarwhal์€ 5๊ฐœ์˜ ๋ชจ๋ฒ” ์‚ฌ๋ก€ ๋ฒ”์ฃผ๋ฅผ ํ™•์ธํ•œ๋‹ค. ์ ‘๊ทผ์„ฑ, ์ƒํ˜ธ ์šด์šฉ์„ฑ, ์„ฑ๋Šฅ, Progressive Web Apps, ๋ณด์•ˆ์ด๋‹ค. ๊ฐ๊ฐ์˜ ๊ฒ€์ฆ ์กฐ๊ฑด์€ ๊ทœ์น™(rule)์ด๋ผ๊ณ  ๋ถˆ๋ฆฐ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์€ ์ž์‹ ๋งŒ์˜ ๊ทœ์น™์„ ๋งŒ๋“ค์–ด์„œ ํ”„๋กœ์ ํŠธ์— ํŠนํ™”๋œ ์ง€์นจ์„ ๋”ฐ๋ฅด๋„๋กํ•  ์ˆ˜ ์žˆ๋‹ค. (์˜ˆ๋ฅผ๋“ค์–ด ํ†ต๊ณ„ ์ง€ํ‘œ ๊ฒ€์ฆ์ด๋‚˜, ํŽ˜์ด์ง€์˜ ํ˜•ํƒœ ๋“ฑ ์ด ์žˆ๋‹ค.)

Sonarwhal ์‚ฌ์šฉ์—๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

  1. ์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ ๋ฒ„์ „. ๊ณต๊ฐœ๋œ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ๊ฒ€์‚ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  2. ๋ช…๋ น์ค„ ๋„๊ตฌ (์ดํ•˜ CLI). ๊ฒ€์‚ฌ์˜ ์„ค์ •์„ ์›ํ•˜๋Š” ๋Œ€๋กœ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜, ๊ฐœ๋ฐœ๊ณผ์ •์— ํฌํ•จํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ

์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ๋Š” ๊ฐ„์†Œํ™”๋œ ์›น์‚ฌ์ดํŠธ ๊ฒ€์‚ฌ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค. URL์„ ์ž…๋ ฅํ•˜๋ฉด ์—ฌ๋Ÿฌ๋ถ„์€ ์›น ํŽ˜์ด์ง€ ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๋ฅผ ์˜๊ตฌ์  ๋งํฌ๋กœ ๋ฐ›์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์ฃผ์†Œ๋ฅผ ์–ธ์ œ๋“  ๊ณต์œ ํ•˜๊ณ  ์žฌ๋ฐฉ๋ฌธํ•  ์ˆ˜ ์žˆ๋‹ค.

Sonarwhal ์˜จ๋ผ์ธ ๊ฒ€์‚ฌ๊ธฐ

ํ•„์ž์˜ ํŒ€์ด ์ƒˆ๋กœ์šด ๊ทœ์น™์„ ์ถ”๊ฐ€ํ•  ๋•Œ ๊ทœ์น™์— ๋Œ€ํ•œ ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ์‹œ๊ฐ„๋ณด๋‹ค ๊ฐ ์ฃผ์ œ, ์†Œ์Šค์ฝ”๋“œ ๊ฒ€์ƒ‰, ๋ฌธ์„œํ™”์— ๋” ๋งŽ์€ ์‹œ๊ฐ„์„ ๋“ค์ธ๋‹ค. ๊ฒ€์‚ฌ์— ๋Œ€ํ•ด ๋‹จ์ˆœํžˆ ๊ฒฐ๊ณผ๋ฅผ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜์ง€๋งŒ, ์–ด๋–ค ๋ถ€๋ถ„์— ์˜ํ•ด์„œ ์‹คํŒจ๋œ ๊ฒƒ์ธ์ง€ ์ดํ•ด์‹œํ‚ค๋Š” ๊ฒƒ๋„ ์ค‘์š”ํ•˜๋‹ค. ์‹คํŒจํ•œ ๊ฐ๊ฐ์˜ ๊ทœ์น™๋“ค ์‚ฌ์ด์—์„œ ์—ฌ๋Ÿฌ๋ถ„์€ ์ƒ์„ธํ•œ ๋ฌธ์„œ์˜ ๋งํฌ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ์ด๋‹ค. ๊ทธ ๋ฌธ์„œ๋Š” ์™œ ์—ฌ๋Ÿฌ๋ถ„์ด ์ด ๊ทœ์น™์— ์ฃผ์˜ํ•ด์•ผ ํ•˜๋ฉฐ ํ…Œ์ŠคํŠธ๋Š” ์–ด๋–ป๊ฒŒ ์ด๋ฃจ์–ด์ง€๋Š”์ง€, ํ†ต๊ณผํ•œ ์˜ˆ์ œ๋Š” ์–ด๋–ค์ง€, ๋ฐ˜๋Œ€๋กœ ์‹คํŒจ๋œ ์˜ˆ์ œ๋Š” ๋ฌด์—‡์ธ์ง€, ์ด ๊ทœ์น™์— ๊ด€์‹ฌ์ด ์žˆ๋‹ค๋ฉด ๊นŠ์€ ์ดํ•ด๋ฅผ ์œ„ํ•ด ํ•„์š”ํ•œ ์œ ์šฉํ•œ ๋ฌธ์„œ ๋งํฌ๋„ ์ œ๊ณตํ•œ๋‹ค.

๋ฌธ์„œ๋ฅผ ์ฝ๊ณ , Sonarwhal์„ ์ง€์†์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ณผ์ •์—์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ตœ์‹  ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์ ์šฉ ํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž€๋‹ค. ๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋‚˜๊ฐ€๋ฉด์„œ ๊ฑฐ๋“ญ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๊ณ  ์ธ์ง€ํ• ์ˆ˜๋ก, ๊ทธ๋“ค์€ ์ž์ฃผ ๋น ํŠธ๋ฆฐ ์—˜๋ฆฌ๋จผํŠธ๋‚˜, ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์ฝ”๋“œ๋ฅผ ๋จผ์ € ๊ณ ์น˜๊ธฐ ์‹œ์ž‘ํ•  ๊ฒƒ์ด๋‹ค. ์ด๊ฒƒ์€ ๋‹จ๋ฐฉํ–ฅ ์˜์‚ฌ์†Œํ†ต์ด ์•„๋‹ˆ๋‹ค. ๋ฌธ์„œ๋Š” Sonarwhal ์›น์‚ฌ์ดํŠธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์ˆ˜์ •์„ ์œ„ํ•ด Github์—๋„ ์žˆ์œผ๋‹ˆ ๋” ์ข‹์€ ๋ฌธ์„œ๋ฅผ ์œ„ํ•ด ์šฐ๋ฆฌ๋ฅผ ๋„์™€์ฃผ๊ธธ ๋ฐ”๋ž€๋‹ค.

๊ฒ€์‚ฌ ๊ฒฐ๊ณผ

ํ˜„์žฌ Sonarwhal ์›น์‚ฌ์ดํŠธ์˜ ๊ฒ€์‚ฌ ์„ค์ •์€ ๋งค์šฐ ์—„๊ฒฉํ•œ ์ƒํƒœ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ, ์•„๋งˆ๋„ ์—ฌ๋Ÿฌ๋ถ„์˜ ๋งˆ์Œ์„ ์ƒํ•˜๊ฒŒ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. (ํ•„์ž์˜ ๊ฐœ์ธ ์›น์‚ฌ์ดํŠธ๋ฅผ ํ…Œ์ŠคํŠธ ํ•ด๋ดค์„๋•Œ๋Š” ๊ทธ๋žฌ๋‹ค.)๊ทธ๋Ÿฌ๋‚˜ CLI์—์„œ์ฒ˜๋Ÿผ ๋ชจ๋“  ๊ทœ์น™์˜ ์—„๊ฒฉํ•จ ์ˆ˜์น˜๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

Sonarwhal ๋ช…๋ น์ค„ ๋„๊ตฌ

CLI๋Š” Sonarwhal์— ๋Œ€ํ•œ ๋ชจ๋“  ์กฐ์ •์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. ์–ด๋–ค ๊ทœ์น™์„ ์‚ฌ์šฉํ•˜๋ฉฐ ์–ด๋–ป๊ฒŒ ๊ฐœ์กฐํ• ์ง€, ์–ด๋–ค ๋„๋ฉ”์ธ์œผ๋กœ ์ ‘์†ํ• ์ง€ ๋ชจ๋‘ ๊ฐ€๋Šฅํ•˜๋‹ค. NodeJs ๋ฒ„์ „์€ ์ตœ์‹  LTS(v8)๋‚˜ Stable(v9)์ด ํ•„์š”ํ•˜๋‹ค. ๊ทธ๋ฆฌ๊ณ  npm ๊ฐ™์€ ์—ฌ๋Ÿฌ๋ถ„์ด ์ฆ๊ฒจ ์‚ฌ์šฉํ•˜๋Š” ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋„ ํ•„์š”ํ•˜๋‹ค:

npm install -g Sonarwhal

์„ค์น˜๊ฐ€ ๋๋‚ฌ๋‹ค๋ฉด ์—ฌ๋Ÿฌ๋ถ„์€ ์ด์ œ ์–ด๋Š ๊ณณ์—์„œ๋“  ๋‹ค์Œ๊ณผ ๊ฐ™์ด Sonarwhal์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค:

Sonarwhal https://example.com

๋ช…๋ น์ค„ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ

๊ตฌ์„ฑ ์š”์†Œ๋Š” .sonarwhalrc ํŒŒ์ผ์„ ํ†ตํ•ด ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์‚ฌ์ดํŠธ๋ฅผ ๋ถ„์„ํ•  ๋•Œ๋Š” ํŒŒ์ผ์ด ์กด์žฌํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. ์ด๋•Œ๋Š” ํ”„๋กฌํ”„ํŠธ๋กœ ๋œจ๋Š” ๋ช‡ ๊ฐ€์ง€ ์งˆ๋ฌธ์— ๋‹ตํ•ด์•ผ ํ•œ๋‹ค:

  • What connector do you want to use? ์—ฐ๊ฒฐ์ž๋Š” ์›น์‚ฌ์ดํŠธ์— ์—ฐ๊ฒฐํ•˜๊ณ  ์‘๋‹ต, ์ž์›, HTML ๋“ฑ์˜ ๋ชจ๋“  ์ •๋ณด๋ฅผ ์ˆ˜์ง‘ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•œ๋‹ค. ํ˜„์žฌ jsdom๊ณผ Microsoft Edge, Google Chrome์ด ์ง€์›๋œ๋‹ค.
  • What formatter do you want to use?? ๊ฒฐ๊ณผ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณด์—ฌ์ค„์ง€ ์ •ํ•œ๋‹ค. summary, stylish ๋“ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋ชจ๋“  ๊ฒฐ๊ณผ๋ฅผ ๋‹ค ๋ณด๊ณ  ์‹ถ๋‹ค๊ฑฐ๋‚˜, ๋น ๋ฅธ ์ˆ˜ํ–‰ ๊ณผ์ •์ด ํ•„์š”๋กœ ํ•  ๊ฒฝ์šฐ verbose๋‚˜ informative๊ฐ€ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.
  • Do you want to use the recommended rules configuration ๊ทœ์น™์€ ์šฐ๋ฆฌ๊ฐ€ ๊ฒ€์‚ฌํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค. ๋ฌธ์„œ๋ฅผ ์ฝ๊ณ  ์–ด๋–ค ๊ทœ์น™์„ ์ ์šฉํ• ์ง€ ์•„๋Š” ๊ฒฝ์šฐ๋ฅผ ์ œ์™ธํ•˜๊ณ , ์ฒซ ์‚ฌ์šฉ์ž์ผ ๊ฒฝ์šฐ์—๋Š” ์ถ”์ฒœ ๊ทœ์น™์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
  • What browsers are you targeting? Sonarwhal์˜ ๋›ฐ์–ด๋‚œ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๊ทœ์น™์ด ๋ชฉํ‘œ ๋ธŒ๋ผ์šฐ์ €์˜ ์‘๋‹ต์— ๋ฐ˜์‘ํ•ด์„œ ๊ทœ์น™์„ ์ถ”๊ฐ€ํ• ์ง€, ์ œ๊ฑฐํ• ์ง€ ๊ถŒ์œ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Highest Document Mode๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ "X-UA-Compatible" ํ—ค๋”๋ฅผ IE10์ด๋‚˜ ๋” ๋‚ฎ์€ ๋ฒ„์ „์„ ์œ„ํ•ด ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜, IE10๋ณด๋‹ค ๋†’์€ ๋ฒ„์ „์„ ์œ„ํ•ด ์ œ๊ฑฐํ•˜๋ผ๊ณ  ์•Œ๋ ค์ค€๋‹ค.

Sonarwhal ํ™˜๊ฒฝ๊ตฌ์„ฑ ์ƒ์„ฑ๊ธฐ๊ฐ€ ์งˆ๋ฌธํ•˜๊ณ  ์žˆ๋‹ค

ํ•œ๋ฒˆ ์ด ์งˆ๋ฌธ๋“ค์— ๋‹ตํ•˜๋ฉด .sonarwhalrcํŒŒ์ผ์ด ์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ์„ฑ๋œ๋‹ค.

{
    "connector": {
        "name": "jsdom",
        "options": {
            "waitFor": 1000
        }
    },
    "formatters": "stylish",
    "rulesTimeout": 120000,
    "rules": {
        "apple-touch-icons": "error",
        "axe": "error",
        "content-type": "error",
        "disown-opener": "error",
        "highest-available-document-mode": "error",
        "validate-set-cookie-header": "warning",
        // ...
    }
}

๊ฒ€์‚ฌ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ๋‚œ ๋’ค ๋ช‡ ์ดˆ๊ฐ€ ์ง€๋‚˜๋ฉด ์—ฌ๋Ÿฌ๋ถ„์€ ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ๋ณด๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค. ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๋Š” ์–ด๋–ค ํฌ๋งคํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ƒ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ ๋ณด์ด๋ฏ€๋กœ, ํ•œ ๊ฐœ์”ฉ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์—ฌ๋Ÿฌ๋ถ„์ด ๋” ์„ ํ˜ธํ•˜๋Š” ํฌ๋งคํ„ฐ๋กœ ๋ณ€๊ฒฝํ•˜๊ธธ ๋ฐ”๋ž€๋‹ค.

์›น ์‚ฌ์ดํŠธ Sonarwhal ๊ฒ€์‚ฌ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ด๊ณผ ๋™์‹œ์— ํ•„์ž์˜ ๋งˆ์Œ๋„ ์‚ฐ์‚ฐ ์กฐ๊ฐ์ด ๋‚ฌ๋‹ค๐Ÿ’”

์ด์ œ ์—ฌ๋Ÿฌ๋ถ„์€ ์˜ค๋ฅ˜ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ์ด๊ฒƒ์„ ํ†ตํ•ด ์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ์„ ํ•ด๋ณด์ž! ์•Œ์•„๋‘˜ ๊ฒƒ์€, ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฒ€์‚ฌํ•  ๋•Œ ํŽ˜์ด์ง€์— ์ถ”๊ฐ€๋œ ํ†ต๊ณ„์ง€ํ‘œ๋‚˜ ์–ด๋”˜๊ฐ€์—์„œ ๊ฐ€์ ธ์˜จ ๊ธ€์”จ์ฒด๋„ ๊ฒ€์‚ฌํ•œ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์ด ์ด ํŒŒ์ผ๋“ค์„ ์ˆ˜์ •ํ•˜์ง€๋Š” ๋ชปํ•˜์ง€๋งŒ CLI๋ฅผ ํ†ตํ•ด ์ด ํŒŒ์ผ๋“ค์˜ ๋„๋ฉ”์ธ์„ ๋ฌด์‹œํ•˜๋„๋ก ์„ค์ •ํ•ด์„œ ์—ฌ๋Ÿฌ๋ถ„์ด ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ํŒŒ์ผ๋“ค๋งŒ ๊ฒฐ๊ณผ์— ๋‚˜์˜ค๋„๋ก ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ œ๊ณต๋˜๋Š” ๋ฌธ์„œ๋Š” ์˜ค๋ฅ˜๋ฅผ ์–ด๋–ป๊ฒŒ ์ˆ˜์ •ํ• ์ง€์— ๋Œ€ํ•œ ์ถฉ๋ถ„ํ•œ ๊ธธ์žก์ด๊ฐ€ ๋  ๊ฒƒ์ด์ง€๋งŒ, ์ด๊ฒƒ๋งŒ์œผ๋กœ๋Š” ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ ์šฐ๋ฆฌ๋ฅผ ๋„์™€์„œ ์–ด๋–ป๊ฒŒ ์ˆ˜์ •ํ•˜๋ฉด ์ข‹์„์ง€ ์ œ์•ˆ์„ ๋ถ€ํƒํ•œ๋‹ค. ์ด๊ฒƒ์€ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋…ธ๋ ฅ์ด๋ฉฐ, ์—ฌ๋Ÿฌ๋ถ„์ด ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ์„ ๊ถ๊ธˆํ•ดํ•  ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ผ์ด๋‹ค. ํ•„์ž์˜ ์›น์‚ฌ์ดํŠธ๋“ค์„ ๊ฒ€์‚ฌํ•˜๋ฉด์„œ Sonarwhal์€ ํ•„์ž์—๊ฒŒ Apple ํ„ฐ์น˜ ์•„์ด์ฝ˜์ด ์—†๋‹ค๊ณ  ๊ฒฝ๊ณ ํ–ˆ๋‹ค. ํ•„์ž๊ฐ€ Sonarwhal ๋ฌธ์„œ๋ฅผ ์ฐพ์•„๋ณด์ง€ ์•Š๊ณ  ์›น ๊ฒ€์ƒ‰์„ ํ–ˆ์„๋•Œ, ๊ฐ€์žฅ ์œ„์— ์žˆ๋Š” 3๊ฐœ์˜ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋Š” ํ•„์ž์—๊ฒŒ ์˜ค๋ž˜๋œ ์ •๋ณด๋ฅผ ์ฃผ์—ˆ๋‹ค. ํ•„์ž๋Š” ๋‹ค์–‘ํ•œ ์•„์ด์ฝ˜ ์น˜์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผํ•œ๋‹ค. ํ•˜์ง€๋งŒ ๋Œ€์‘ ๊ธฐ๊ธฐ์— ๋งž๋Š” ๋ชจ๋“  ์•„์ด์ฝ˜ ์น˜์ˆ˜๋“ค๊นŒ์ง€๋Š” ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค. ์ถฉ๋ถ„ํžˆ ํฐ 180px * 180px ํ•œ๊ฐœ์˜ ์น˜์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์˜ค๋ž˜๋œ ๊ธฐ๊ธฐ๋“ค์— ๋งž๊ฒŒ ์ถ•์†Œํ•ด์„œ ์ œ๊ณตํ•˜๋ฉด ๋œ๋‹ค.

๊ฐ€์žฅ ์œ„์— ์žˆ๋Š” ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ผ๋„ ํ•ญ์ƒ ์˜ณ์ง€๋Š” ์•Š์œผ๋ฉฐ, ์—ฌ๋Ÿฌ๋ถ„์ด ์˜ค๋ž˜๋œ ์ •๋ณด๋“ค์„ ๊ฒ€์ƒ‰ํ•˜์ง€ ์•Š๊ธธ ๋ฐ”๋ž€๋‹ค. Sonarwhal์˜ ๊ฐ€๋Šฅ์„ฑ์ด ๋” ํ™•์žฅ๋ผ์„œ, ์—ฌ๋Ÿฌ๋ถ„์˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ํ•œ๊ณณ์—์„œ ์‹œ๋ฒ” ํ…Œ์ŠคํŠธ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์ด๋‹ค.

์ง€๊ธˆ๊นŒ์ง€์˜ ์—ฌ์ •, ๊ทธ๋ฆฌ๊ณ  ์•ž์œผ๋กœ๋Š”

Microsoft EdgeํŒ€์€, ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ฉ‹์ง„ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ฃผ๋Š”๋ฐ์— ๋ชฐ๋‘ํ•ด์žˆ๋‹ค. ๋งค์ผ ๋งŽ์€ ์›น์‚ฌ์ดํŠธ๊ฐ€ ์šฐ๋ฆฌ์˜ ์ด์Šˆ ์ถ”์  ์‹œ์Šคํ…œ์œผ๋กœ ๋“ค์–ด์˜ค๋Š” ๊ฒƒ์„ ๋ณด๊ณ  ์žˆ๋‹ค.(๊ทธ๋Ÿฐ ๋ฒ„๊ทธ๋“ค์„ ์ž‘์„ฑํ•ด ์ฃผ๋Š” ๊ฒƒ์— ๊ฐ์‚ฌ๋ฅผ ์ „ํ•œ๋‹ค. ๊ทธ๋“ค์€ Microsoft Edge๋ฅผ ๋”์šฑ๋” ์ข‹๊ฒŒ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค) ๊ณ„์†ํ•ด์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์Šˆ๋“ค์€ ์•ˆํƒ€๊นŒ์šด ์‹ค์ˆ˜์ด๊ฑฐ๋‚˜, ๋’ค๋–จ์–ด์ง„ '๋ชจ๋ฒ” ์‚ฌ๋ก€๋“ค'์ด๋ฉฐ ๋ฐ˜๋“œ์‹œ ํ”ผํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ์ด ๋„๊ตฌ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋ชจ๋‘๊ฐ€ ์›น์„ ๋” ์ข‹์€ ๋ชจ์Šต์œผ๋กœ ๋งŒ๋“ค๋„๋ก ๋•๊ณ  ์žˆ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ Sonarwhal์„ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ์„ ๋•Œ, ์šฐ๋ฆฐ ์‚ฌ๋žŒ๋“ค์ด ๋” ์ข‹์€, ์ตœ์‹  ๊ธฐ์ˆ ์˜ ์ฝ”๋“œ๋ฅผ ๊ทธ๋“ค์˜ ์›น ์‚ฌ์ดํŠธ์— ์‚ฌ์šฉํ•˜๊ธธ ๋ฐ”๋ž๋‹ค. Sonarwhal์ด ๋ˆ„๊ตฌ์—๊ฒŒ๋‚˜ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ผ๋ฏ€๋กœ, ์ดˆ๊ธฐ์— ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ–ˆ๋˜ 3๊ฐ€์ง€ ์ง€์นจ์„ ์ •ํ–ˆ๋‹ค:

  1. ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์˜ํ•ด ์ฃผ๋„๋œ๋‹ค. ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๊ฐ€์žฅ ํฐ ๊ด€์‹ฌ์‚ฌ๋ฅผ ์œ„ํ•ด ๊ฐœ๋ฐœํ•œ๋‹ค. ์›น์„ ๋ชจ๋‘์˜ ๊ฒƒ์ด๋ฉฐ ์ด ํ”„๋กœ์ ํŠธ ๋˜ํ•œ ๊ทธ๋ ‡๋‹ค. ์˜คํ”ˆ์†Œ์Šค์ด๊ธฐ ๋•Œ๋ฌธ๋งŒ ์•„๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋„ JS Foundation์— ๊ธฐ๋ถ€ํ•˜๊ณ  ์žˆ๊ณ , ๊ฐœ์ธ์ด๋‚˜ ๋‹จ์ฒด ๋ชจ๋‘์˜ ํ˜‘์—…์„ ํ™˜์˜ํ•˜๋Š” ํฌ๊ด„์ ์ธ ๊ด€๋ฆฌ ๋ชจ๋ธ๋„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
  2. ์‚ฌ์šฉ์ž ์ค‘์‹ฌ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ผ. ์‚ฌ์šฉ์ž๋ฅผ ์ค‘์‹ฌ์— ๋‘๊ณ  Sonarwhal์„ ์—ฌ๋Ÿฌ๋ถ„์ด ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ๋“ค์„ ์—ฌ๋Ÿฌ๋ถ„์˜ ๊ธฐ์ˆ  ์—ญ๋Ÿ‰์ด ์–ด๋–ป๋“  ๊ฐ„์— ์„ค์ •ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ธฐ๋ฅผ ์›ํ•œ๋‹ค.
  3. ํ˜‘์—…ํ•˜๋ผ. ์ด๋ฏธ ๋ฐœ๋ช…๋œ ๊ฒƒ์— ๋Œ€ํ•ด ์žฌ๋ฐœ๋ช…ํ•˜๋ ค ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ž˜์„œ ๊ธฐ์กด์— ์กด์žฌํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋„๊ตฌ์™€ ์„œ๋น„์Šค๋“ค๊ณผ ํ˜‘์—…ํ•œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์ž๋ฉด aXe, synk.io, Cloudinary ๋“ฑ์ด ์žˆ๋‹ค.

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

  • ์„ฑ๋Šฅ, ์ ‘๊ทผ์„ฑ, ๋ณด์•ˆ, Progressive Web Apps ๋“ฑ์„ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ์ƒˆ๋กœ์šด ๊ทœ์น™๋“ค
  • Visual Studio Code๋ฅผ ์œ„ํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ: Sonarwhal์„ ํ†ตํ•ด ์—ฌ๋Ÿฌ๋ถ„์ด ๋” ๋‚˜์€ ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ธธ ์›ํ•˜๋ฉฐ, ๊ทธ๊ฒƒ์ด ์—ฌ๋Ÿฌ๋ถ„์˜ ์—๋””ํ„ฐ๋ณด๋‹ค ์ข‹์„ ๊ฒƒ์ด๋‹ค.
  • ์˜จ๋ผ์ธ ์„œ๋น„์Šค๋ฅผ ์œ„ํ•œ ํ™˜๊ฒฝ ์„ค์ • ์˜ต์…˜: ๊ธฐ๋ฐ˜์‹œ์„ค์„ ๋ฏธ์„ธ ์กฐ์ •์„ ํ†ตํ•ด ์šฐ๋ฆฌ์˜ ์Šค์บ๋„ˆ ๊ทœ์น™ ์„ค์ •์ด ์ž ๊ฒจ์žˆ์ง€๋งŒ, ๋” ๋‚˜์•„๊ฐ€ CLI์˜ ์‚ฌ์šฉ์ž ์ •์˜ ์˜ต์…˜์„ ์˜จ๋ผ์ธ์—์„œ๋„ ์ง€์›ํ•˜๋ ค๊ณ  ์ค€๋น„ ์ค‘์ด๋‹ค.

์ด๊ฒƒ์€ ์›น ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์œ„ํ•œ, ์›น ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์˜ํ•œ ๋„๊ตฌ์ด๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์ด Sonarwhal์— ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ฑฐ๋‚˜, ๋” ์ข‹์€ ์›น์„ ๋งŒ๋“ค๊ณ  ์‹ถ๊ฑฐ๋‚˜, Sonarwhal์— ๊ธฐ์—ฌํ•˜๊ธฐ๋ฅผ ์›ํ•œ๋‹ค๋ฉด ์—ฐ๋ฝํ•˜๊ธธ ๋ฐ”๋ž€๋‹ค. ์šฐ๋ฆฌ์˜ ์ด์Šˆ ์ค‘ ๋ช‡ ๊ฐ€์ง€๋Š” ์—ฌ๋Ÿฌ๋ถ„์ด ๋„์šธ ์ˆ˜ ์žˆ์„์ง€ ๋ชจ๋ฅธ๋‹ค. Sonarwhal์„ ์•Œ๊ธฐ ์œ„ํ•ด Github organization๋„ ๋ฐฉ๋ฌธํ•˜๋Š” ๊ฒƒ๋„ ์žŠ์ง€ ๋งˆ๋ผ. PR์€ ์–ธ์ œ๋‚˜ ์—ฌ๋Ÿฌ๋ถ„์—๊ฒŒ ์—ด๋ ค์žˆ๋‹ค.

@NarwhalNellie Twitter๋กœ ์Šค์บ๋„ˆ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜๋Š”์ง€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์˜๊ฒฌ์„ ์•Œ๋ ค์ฃผ๊ธธ ๊ธฐ๋‹ค๋ฆฌ๊ฒ ๋‹ค. ์šฐ๋ฆฌ์™€ ํ•จ๊ป˜ ์›น์˜ ๋ฏธ๋ž˜๋ฅผ ๊ฒ€์‚ฌํ•˜์ž!

๋ฐ•์ •ํ™˜2017.12.12
Back to list