๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)

๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)

์šฐ๋ฆฌ๋Š” ํ›ˆ๋ จ์„ ์œ„ํ•œ ์ผ๋ จ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณ„์†ํ•ฉ๋‹ˆ๋‹ค.

์ธต

๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)

www.reddit.com/r/layer

๋ ˆ์ด์–ด(Layer)๋Š” ๋ˆ„๊ตฌ๋‚˜ ๊ณต์œ ํ•˜๋Š” '๋ณด๋“œ'์— ํ”ฝ์…€์„ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์ž…๋‹ˆ๋‹ค. ์›๋ž˜ ์•„์ด๋””์–ด๋Š” Reddit์—์„œ ํƒ„์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. r/Layer ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” ๋ชจ๋“  ์‚ฌ๋žŒ์ด ์ฐฝ์ž‘์ž๊ฐ€ ๋˜์–ด ๊ณตํ†ต์˜ ๋Œ€์˜์— ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ณต์œ  ์ฐฝ์˜์„ฑ์— ๋Œ€ํ•œ ์€์œ ์ž…๋‹ˆ๋‹ค.

๋‚˜๋งŒ์˜ ๋ ˆ์ด์–ด ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ๋ฐฐ์šฐ๊ฒŒ ๋˜๋Š” ๋‚ด์šฉ:

  • JavaScript ์บ”๋ฒ„์Šค ์ž‘๋™ ๋ฐฉ์‹ ์บ”๋ฒ„์Šค๋ฅผ ์ž‘๋™ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•„๋Š” ๊ฒƒ์€ ๋งŽ์€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ ์ค‘์š”ํ•œ ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ์ž ๊ถŒํ•œ์„ ์กฐ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•. ๊ฐ ์‚ฌ์šฉ์ž๋Š” ๋กœ๊ทธ์ธํ•˜์ง€ ์•Š๊ณ ๋„ 15๋ถ„๋งˆ๋‹ค ํ•œ ํ”ฝ์…€์„ ๊ทธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ฟ ํ‚ค ์„ธ์…˜์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

Squoosh

๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)
squoosh.app

Squoosh๋Š” ๋‹ค์–‘ํ•œ ๊ณ ๊ธ‰ ์˜ต์…˜์„ ๊ฐ–์ถ˜ ์ด๋ฏธ์ง€ ์••์ถ• ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค.

GIF 20MB๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)

๋‚˜๋งŒ์˜ Squoosh ๋ฒ„์ „์„ ๋งŒ๋“ค๋ฉด ๋‹ค์Œ ๋‚ด์šฉ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์ž‘์—… ๋ฐฉ๋ฒ•
  • Drag'n'Drop API์˜ ๊ธฐ๋ณธ ์‚ฌํ•ญ ์•Œ์•„๋ณด๊ธฐ
  • API ๋ฐ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์˜ ์ž‘๋™ ๋ฐฉ์‹ ์ดํ•ด
  • ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•˜๊ณ  ๋‚ด๋ณด๋‚ด๋Š” ๋ฐฉ๋ฒ•

์ฐธ๊ณ  : ์ด๋ฏธ์ง€ ์••์ถ•๊ธฐ๋Š” ๋กœ์ปฌ์ž…๋‹ˆ๋‹ค. ์ถ”๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์— ๋ณด๋‚ผ ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค. ์••์ถ•๊ธฐ๋ฅผ ์ง‘์— ๋‘˜ ์ˆ˜๋„ ์žˆ๊ณ  ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ณ„์‚ฐ๊ธฐ

์–ด์„œ ํ•ด๋ด์š”? ์ง„์ง€ํ•˜๊ฒŒ? ๊ณ„์‚ฐ์ž? ๋„ค, ์ •ํ™•ํžˆ๋Š” ๊ณ„์‚ฐ๊ธฐ์ž…๋‹ˆ๋‹ค. ์ˆ˜ํ•™ ์—ฐ์‚ฐ์˜ ๊ธฐ๋ณธ๊ณผ ํ•จ๊ป˜ ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋‹จ์ˆœํ™”ํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ์กฐ๋งŒ๊ฐ„ ์ˆซ์ž๋ฅผ ๋‹ค๋ฃจ์–ด์•ผ ํ•˜๋ฉฐ ๋น ๋ฅผ์ˆ˜๋ก ์ข‹์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)
jarodburchill.github.io/CalculatorReactApp

๋‚˜๋งŒ์˜ ๊ณ„์‚ฐ๊ธฐ๋ฅผ ๋งŒ๋“ค๋ฉด ๋‹ค์Œ ๋‚ด์šฉ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ˆซ์ž ๋ฐ ์ˆ˜ํ•™ ์—ฐ์‚ฐ ์ž‘์—…
  • ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ API ์—ฐ์Šต
  • ์š”์†Œ๋ฅผ ์ •๋ ฌํ•˜๊ณ  ์Šคํƒ€์ผ์„ ์ดํ•ดํ•˜๋Š” ๋ฐฉ๋ฒ•

ํฌ๋กค๋Ÿฌ(๊ฒ€์ƒ‰ ์—”์ง„)

๋ˆ„๊ตฌ๋‚˜ ๊ฒ€์ƒ‰ ์—”์ง„์„ ์‚ฌ์šฉํ•ด ๋ณธ ์ ์ด ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ž์‹ ๋งŒ์˜ ๊ฒ€์ƒ‰ ์—”์ง„์„ ๋งŒ๋“ค์–ด ๋ณด๋Š” ๊ฒƒ์€ ์–ด๋–จ๊นŒ์š”? ์ •๋ณด๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋ ค๋ฉด ํฌ๋กค๋Ÿฌ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์‚ฌ๋žŒ์ด ๋งค์ผ ์ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ์ด ๊ธฐ์ˆ ๊ณผ ์ „๋ฌธ๊ฐ€์— ๋Œ€ํ•œ ์ˆ˜์š”๋Š” ์‹œ๊ฐ„์ด ์ง€๋‚จ์— ๋”ฐ๋ผ ์ฆ๊ฐ€ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)
๊ตฌ๊ธ€ ๊ฒ€์ƒ‰ ์—”์ง„

์ž์‹ ๋งŒ์˜ ๊ฒ€์ƒ‰ ์—”์ง„์„ ๋งŒ๋“ค์–ด์„œ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ๋‚ด์šฉ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

๋ฎค์ง ํ”Œ๋ ˆ์ด์–ด(์Šคํฌํ‹ฐํŒŒ์ด, ์• ํ”Œ ๋ฎค์ง)

๋ชจ๋‘๊ฐ€ ์Œ์•…์„ ๋“ฃ์Šต๋‹ˆ๋‹ค. ์Œ์•…์€ ์šฐ๋ฆฌ ์‚ถ์˜ ํ•„์ˆ˜์ ์ธ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ํ˜„๋Œ€ ์Œ์•… ์ŠคํŠธ๋ฆฌ๋ฐ ํ”Œ๋žซํผ์˜ ๊ธฐ๋ณธ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ๋” ์ž˜ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ์Œ์•… ํ”Œ๋ ˆ์ด์–ด๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ 5๊ฐ€์ง€ ๋Œ€๋‹ดํ•œ ๊ต์œก ํ”„๋กœ์ ํŠธ(Layer, Squoosh, Calculator, Website Crawler, Music Player)
์Šคํฌํ‹ฐ ํŒŒ์ด

๋‚˜๋งŒ์˜ ์Œ์•… ์ŠคํŠธ๋ฆฌ๋ฐ ํ”Œ๋žซํผ์„ ๋งŒ๋“ค์–ด์„œ ๋ฐฐ์šธ ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • API๋กœ ์ž‘์—…ํ•˜๋Š” ๋ฐฉ๋ฒ•. Spotify ๋˜๋Š” Apple Music์˜ API ์‚ฌ์šฉ
  • ๋‹ค์Œ/์ด์ „ ํŠธ๋ž™ ์žฌ์ƒ, ์ผ์‹œ ์ •์ง€, ๋˜๊ฐ๊ธฐ ๋ฐฉ๋ฒ•
  • ๋ณผ๋ฅจ์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ•
  • ์‚ฌ์šฉ์ž ๋ผ์šฐํŒ… ๋ฐ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ก์„ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•

PS

๊ธฐ์ˆ ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ์Šค์Šค๋กœ "๋ณต์ œ"ํ•  ๊ฒƒ์„ ์ œ์•ˆํ•˜๋Š” ํ”„๋กœ์ ํŠธ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์ถœ์ฒ˜ : habr.com

์ฝ”๋ฉ˜ํŠธ๋ฅผ ์ถ”๊ฐ€