๐Ÿ—“ 2019.08.19 ~ 2019.08.25


๐Ÿ“” ๋ธ”๋กœ๊ทธ

๐Ÿ‡ฐ๐Ÿ‡ท Homebrew ๋กœ Mac ํ•œ ๋ฐฉ์— ์…‹์—…ํ•˜๊ธฐ

  • Homebrew์˜ cask, mas๋ฅผ ์ด์šฉํ•˜์—ฌ brew๋ฅผ ํ†ตํ•ด ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋กœ๊ทธ๋žจ๋“ค์„ ํ•œ๋ฐฉ์— ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๋Š” ๊ธ€.
  • brew bundle dump ์ปค๋งจ๋“œ๋กœ ํ˜„์žฌ ๋งฅ์˜ ์„ค์น˜๋œ ๋ชจ๋“  ํ”„๋กœ๊ทธ๋žจ ๋ฆฌ์ŠคํŠธ๋ฅผ ๊ฐ€์ง„ Brewfile์„ ์ƒ์„ฑํ•œ ๋’ค, ์ด ํŒŒ์ผ์„ ์ƒˆ ๋งฅOS์— ์˜ฎ๊ฒจ์„œ brew bundle ์ปค๋งจ๋“œ๋กœ ๋ชจ๋“  ํ”„๋กœ๊ทธ๋žจ์„ ํ•œ๋ฒˆ์— ์„ค์น˜ ํ•  ์ˆ˜ ์žˆ๋‹ค .
  • brew์˜ ๋ชฐ๋ž๋˜ ๊ธฐ๋Šฅ์ธ๋ฐ, ์•ž์œผ๋กœ ์ด Brewfile์„ ์ฃผ๊ธฐ์ ์œผ๋กœ Github์— ๋ฐฑ์—…ํ•ด๋‘๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท 2๋…„ ๋™์•ˆ ๊ทผ๋ฌดํ–ˆ๋˜ ํšŒ์‚ฌ๋ฅผ ๋– ๋‚˜๋ฉฐ

  • ํ•ญ์ƒ ๊ณ ํ€„๋ฆฌํ‹ฐ์˜ ์ข‹์€ ๊ธ€์„ ์จ์ฃผ์‹œ๋Š” Evan Moon๋‹˜์˜ ํ‡ด์‚ฌ ํšŒ๊ณ ๊ธ€.
  • 2๋…„๊ฐ„ ์ง์›์ˆ˜๊ฐ€ 13๋ช…์—์„œ 50๋ช…๊นŒ์ง€ ๋Š˜๋ฉด์„œ ์–ป์€ ๊ฐ’์ง„ ๊ฒฝํ—˜๋“ค์„ ๊ณต์œ ํ•ด์ฃผ์…จ๋‹ค.

๐Ÿ‡บ๐Ÿ‡ธ What if we got aspect-ratio sized images by doing almost nothing?

  • ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€์˜ ์ข…ํšก๋น„๋ฅผ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ณดํ†ต padding-top ๊ฐ™์€ hack์„ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•˜๋Š”๋ฐ, ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋Š” img ํƒœ๊ทธ์˜ intrinsicsize ํ”„๋กœํผํ‹ฐ์™€ CSS์˜ aspect-ratio ์†์„ฑ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” css-tricks ๋ธ”๋กœ๊ทธ ๊ธ€.

๐Ÿ‡บ๐Ÿ‡ธ Prefetching, preloading, prebrowsing

  • link ํƒœ๊ทธ์˜ rel ์†์„ฑ ๊ฐ’ ์•ˆ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜๋“ค์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” css-tricks ๋ธ”๋กœ๊ทธ ๊ธ€.
  • dns-prefetch, preconnect, prefetch, subresource, prerender, preload ๋“ฑ์˜ ์†์„ฑ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•œ๋‹ค. ์ „ํ˜€ ๋ชฐ๋ž๋˜ ์†์„ฑ๊ฐ’๋„ ๋งŽ๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท ์‚ฌ๋žŒ๋“ค์ด ์ž˜ ์•ˆ์•Œ๋ ค์ฃผ๋Š” GitHub ํŒ

  • ์‚ฌ๋žŒ๋“ค์ด ์ž˜ ์•Œ๋ ค์ฃผ์ง€ ์•Š๋Š” Github ์‚ฌ์šฉ ํŒ๋“ค์— ๋Œ€ํ•œ ๊ธ€.
  • ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด forkํ•ด์„œ ๋ณด๋‚ด์ค€ PR ๋ธŒ๋žœ์น˜์— ๋Œ€ํ•œ ์“ฐ๊ธฐ ๊ถŒํ•œ์ด ์ƒ๊ฒจ์„œ ๊ทธ PR์„ ์ง์ ‘ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์€ ๋ชฐ๋ž๋˜ ๊ธฐ๋Šฅ์ด๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท ์‚ฌ๋žŒ์„ ์ฑ„์šฉํ•  ๋•Œ ๊ณ ๋ คํ•ด์•ผ ํ•  ์›์น™๋“ค

  • ๊ฐœ๋ฐœ์ž๋ฅผ ์ฑ„์šฉํ•  ๋•Œ ๊ณ ๋ คํ•ด์•ผ ํ•  ์›์น™ ๋ช‡ ๊ฐ€์ง€๋ฅผ ์ •๋ฆฌํ•œ ๊ธ€.

๐Ÿ‡บ๐Ÿ‡ธ Getting Netlify Large Media Going

  • Netlify์—์„œ Git Large File Storage๊ธฐ๋Šฅ๊ณผ ํ•จ๊ป˜ ์ด๋ฏธ์ง€์˜ ์‚ฌ์ด์ฆˆ๋‚˜ ํ™•์žฅ์ž ๋“ฑ์„ query parameter๋ฅผ ํ†ตํ•ด ๋™์ ์œผ๋กœ ๋ณ€ํ˜•์‹œ์ผœ์„œ ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€๋ฅผ ์„œ๋น™ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•˜๋Š” css-tricks ๋ธ”๋กœ๊ทธ ๊ธ€.

๐Ÿ‡ฐ๐Ÿ‡ท ์•ผ๋†€์ž๋ฅผ ๋– ๋‚˜๋ฉฐ... (feat. ๋ ˆ์ €ํ)

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

๐Ÿ“ฐ ๋‰ด์Šค

๐Ÿ‡ฐ๐Ÿ‡ท ์นด๋ฑ…, ๆœˆ์‚ฌ์šฉ์ž 600๋งŒ ๋ŒํŒŒโ€ฆ์€ํ–‰์•ฑ ์ œ์น˜๊ณ  1์œ„

  • ์˜คํ”„๋ผ์ธ ์€ํ–‰์ด ์ „ํ˜€ ์—†๋Š” ์นด์นด์˜ค๋ฑ…ํฌ๊ฐ€ ์‹œ์ค‘์€ํ–‰๋“ค์„ ๋ชจ๋‘ ์ œ์น˜๊ณ  ๋ชจ๋ฐ”์ผ๋ฑ…ํ‚น ์•ฑ ์›” ์‚ฌ์šฉ์ž 1์œ„๋ฅผ ์ฐจ์ง€ํ–ˆ๋‹ค๊ณ  ํ•œ๋‹ค.

๐Ÿ“น ์˜์ƒ

๐Ÿ‡บ๐Ÿ‡ธ (12:50) Ranking Hosting Providers for React Projects - [Ben Awad]

  • AWS, Azure, Firebase, Github, Netlify, Heroku, Now ๋“ฑ์˜ ํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค๋“ค์„ Static hosting์ธ์ง€, ์ธ์Šคํ„ด์Šค ์ž„๋Œ€์ธ์ง€ ๋“ฑ์˜ ๋ชฉ์ ์— ๋”ฐ๋ผ ์–ด๋–ค ํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค๊ฐ€ ๋” ์ข‹์€์ง€ ์ˆœ์œ„๋ฅผ ๋งค๊ธฐ๊ณ  ๋น„๊ต ์„ค๋ช…ํ•˜๋Š” ์˜์ƒ.

๐Ÿ’ป ์˜คํ”ˆ์†Œ์Šค

mackup

  • Mac, Linux ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ธํŒ…์„ ํด๋ผ์šฐ๋“œ ์Šคํ† ๋ฆฌ์ง€๋ฅผ ํ†ตํ•ด ์‹ฑํฌํ•ด์ฃผ๋Š” ํˆด.

chart.xkcd

  • ์†์œผ๋กœ ๊ทธ๋ฆฐ๊ฒƒ ๊ฐ™์€ ๋Š๋‚Œ์˜ ๊ทธ๋ž˜ํ”„, ์ฐจํŠธ ๋“ฑ์„ ๋งŒ๋“ค์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ.

monolith

  • ์›นํŽ˜์ด์ง€๋ฅผ ํ•˜๋‚˜์˜ HTML ํŒŒ์ผ๋กœ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ํˆด.
  • ์˜ค๋ฅธ์ชฝ๋ฒ„ํŠผ ํด๋ฆญ ํ›„ Save page as... ๋‚˜ wget๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ HTML ํŒŒ์ผ ์•ˆ์— inline์œผ๋กœ ํฌํ•จ๋œ asset๋“ค๊นŒ์ง€ ๋ชจ๋‘ fetchํ•ด์„œ ์ €์žฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์˜คํ”„๋ผ์ธ์—์„œ๋„ ๋™์ž‘ํ•˜๋Š” single HTML file์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ”— ๊ทธ ์™ธ ์œ ์šฉํ•œ ๋งํฌ

๐Ÿ’ป zorinos.com

  • ์™ธ๊ตญ์ธ Geek ์นœ๊ตฌ๊ฐ€ ์•Œ๋ ค์ค€ ๋ฆฌ๋ˆ…์Šค ๋ฐฐํฌํŒ OS์ธ ZorinOS.
  • ์‚ฌ์šฉํ•˜๋Š”๊ฑธ ๋ดค๋Š”๋ฐ ์ƒ๋‹นํžˆ ๊ดœ์ฐฎ์•„ ๋ณด์˜€๋‹ค. MacOS๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋ฉด Windows ๋Œ€์‹  ์‚ฌ์šฉํ•ด๋ด๋„ ๊ดœ์ฐฎ์•„ ๋ณด์ธ๋‹ค.

๐ŸŒŽ hover.com

  • Domain name service์ธ๋ฐ, ๋‹ค๋ฅธ ์„œ๋น„์Šค๋“ค ๋ณด๋‹ค ๋„๋ฉ”์ธ ๊ฐฏ์ˆ˜๊ฐ€ ๋งŽ๊ณ , ๋ฌด์—‡๋ณด๋‹ค ๋„๋ฉ”์ธ ๊ฒ€์ƒ‰ UX๊ฐ€ ์ข‹๋‹ค.