๐Ÿ—“ 2019.10.14 ~ 2019.10.20


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

๐Ÿ‡ฐ๐Ÿ‡ท ์ด๋ ฅ์„œ - 1๋ถ„์˜ ์‹ธ์›€

  • ์ข‹์€ ๊ฐœ๋ฐœ์ž, ์ด๋ ฅ์„œ์˜ ๊ธฐ์ค€๊ณผ ์ด๋ ฅ์„œ๋ฅผ ์–ด๋–ป๊ฒŒ ์จ์•ผํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ธ€.
  • ์ด๋ ฅ์„œ๋ฅผ ์“ฐ๋Š” ์‚ฌ๋žŒ์˜ ์ž…์žฅ๋ณด๋‹ค, ๋ณด๋Š” ์‚ฌ๋žŒ์˜ ์ž…์žฅ์—์„œ ์–ด๋–ค ์‚ฌ๋žŒ์„ ๋ฝ‘๊ณ ์‹ถ์€์ง€ ์ž˜ ์ •๋ฆฌ๋˜์–ด์žˆ๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท ๋Œ€ํ•™์ƒ์ด ์‹ ์ž… ๊ฐœ๋ฐœ์ž๋กœ ๊ณต๊ฐœ ๊ตฌ์งํ•œ ํ›„๊ธฐ

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

๐Ÿ‡บ๐Ÿ‡ธ SPA SEO: A Single-Page App Guide to Googleโ€™s 1st Page

  • ์•ฝ 25๋ถ„ ๋ถ„๋Ÿ‰์˜ Google SEO๋ฅผ ์œ„ํ•œ SPA ๊ฐ€์ด๋“œ.
  • SEO Ranking, Best Practices, JS Framework ๋ณ„ SEO tip๊นŒ์ง€ ์ •๋ฆฌ๋˜์–ด์žˆ๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท ๋ฏธ๊ตญ์—์„œ ํ”„๋ก ํŠธ์•ค๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ธฐ

  • ๋‘๋‹ฌ๋™์•ˆ ๊ตฌ๊ธ€, ํŽ˜์ด์Šค๋ถ, ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ ๋“ฑ ๋ฏธ๊ตญ์˜ ์—ฌ๋Ÿฌ ํ…ŒํฌํšŒ์‚ฌ์— ์ธํ„ฐ๋ทฐ๋ฅผ ๋ณธ ํ›„๊ธฐ ๊ธ€.
  • ์ธํ„ฐ๋ทฐ๋Š” ์–ด๋–ค ๋ถ„์œ„๊ธฐ์˜€๋Š”์ง€, ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋กœ ์–ด๋–ค ๋ฌธ์ œ๊ฐ€ ๋‚˜์™”๋Š”์ง€ ์ ํ˜€์žˆ๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท ๋Šฅ๋ ฅ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๋Š” ์–ด๋–ป๊ฒŒ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋‚˜?

  • ๋Šฅ๋ ฅ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๋ฅผ ์•Œ์•„๋ณด๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์„ ๋“œ๋ผ์ดํผ์Šค ๋ชจ๋ธ์ด๋ผ๋Š” ๊ธฐ์ˆ  ์Šต๋“ ๋ชจํ˜•์— ๊ธฐ๋ฐ˜ํ•˜์—ฌ ์„ค๋ช…ํ•˜๋Š” ๊ธ€.
  • ๊ธ€์„ ์ญ‰ ์ฝ์–ด๋ณด๋‹ˆ ๋‚˜๋Š” ์•„์ง๋„ Novice์™€ Advanced Beginner ์‚ฌ์ด์— ์œ„์น˜ํ•˜๊ณ  ์žˆ์ง€ ์•Š๋‚˜ ๋Œ์•„๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท Inside AB180 #4 : ์—์–ด๋ธŒ๋ฆฟ์ง€ ํ”„๋ก ํŠธ์—”๋“œ๋Š” ์ด๋ ‡๊ฒŒ ์ผํ•œ๋‹ค

  • AB180 ์ด๋ผ๋Š” ํšŒ์‚ฌ์˜ ์ฑ„์šฉ ํ™๋ณด๊ธ€์ด์ž ํ”„๋ก ํŠธ์—”ํŠธ ํŒ€์˜ ๊ธฐ์ˆ  ์Šคํƒ๊ณผ ์ผํ•˜๋Š” ๋ฐฉ์‹, ๊ฐœ๋ฐœ์ž ๋ฌธํ™”์— ๋Œ€ํ•ด์„œ ์ ์€ ๊ธ€.

๐Ÿ‡บ๐Ÿ‡ธ Avoid 100vh On Mobile Web

  • ๋ชจ๋ฐ”์ผ์—์„œ CSS ํ”„๋กœํผํ‹ฐ 100vh ์‚ฌ์šฉ์„ ์ง€์–‘ํ•ด์•ผํ•˜๋Š” ์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๊ธ€.
  • ๋ช‡๋ช‡ ๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์Šคํฌ๋กค์„ ๋‚ด๋ฆด ๋•Œ ๋“ฑ ์ฃผ์†Œ์ฐฝ๊ณผ bottom navigation bar๊ฐ€ ์ž๋™์œผ๋กœ ์ˆจ๊ฒจ์ง€๋Š” ๊ธฐ๋Šฅ ๋•Œ๋ฌธ์— ์‹ค์ œ viewport์™€ ๋ณด์ด๋Š” ํ™”๋ฉด์˜ ํฌ๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค.
  • ๋•Œ๋ฌธ์— html, body { height: 100% }๋ฅผ ์“ฐ๋Š”๊ฒƒ์ด ์ข‹๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท ์ฐจ๋ณ„์ธ๊ฐ€, ์ฐจ๋ณ„์ธ๊ฐ€?

  • ์„ฑ, ์™ธ๋ชจ, ๋‚˜์ด. ํ•™๋ ฅ ๋“ฑ์— ๊ด€ํ•œ ์ฐจ๋ณ„์— ๋Œ€ํ•œ ๊ธ€.
  • ๊ฐœ๋ฐœ ๊ด€๋ จ ๊ธ€์€ ์•„๋‹ˆ์ง€๋งŒ ์‚ฌํšŒ์  ์ด์Šˆ์ด๊ธฐ๋„ํ•˜๊ณ  ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ƒ๊ฐํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ต‰์žฅํžˆ ์ข‹์€ ๊ธ€์ด๋‹ค.

๐Ÿ“ฐ ๋‰ด์Šค

๐Ÿ‡บ๐Ÿ‡ธ Headless CMS company Strapi raises $4 million

  • JavaScript๋กœ ์˜คํ”ˆ์†Œ์Šค Headless CMS๋ฅผ ๋งŒ๋“œ๋Š” Strpi๊ฐ€ 4๋ฐฑ๋งŒ ๋‹ฌ๋Ÿฌ ๊ทœ๋ชจ ํˆฌ์ž๋ฅผ ๋ฐ›์•˜๋‹ค.

๐Ÿ‡บ๐Ÿ‡ธ Latest macOS Catalina beta hints at new 16-inch MacBook Pro

  • MacOS Catalina ์—…๋ฐ์ดํŠธ์— 16์ธ์น˜ ๋‰ด๋งฅ๋ถ ํ”„๋กœ ๋ฃจ๋จธ์™€ ๊ด€๋ จ๋œ ์ด๋ฏธ์ง€๊ฐ€ ์ˆจ๊ฒจ์ ธ ์žˆ์—ˆ๋‹ค๊ณ  ํ•œ๋‹ค.
  • ESCํ‚ค๊ฐ€ ํ„ฐ์น˜๋ฐ”์—์„œ ๋‹ค์‹œ ๋ฌผ๋ฆฌํ‚ค๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์œผ๋ฉฐ, ๋‹ค์‹œ ๊ฐ€์œ„์‹ ํ‚ค๋ณด๋“œ๋กœ ๋Œ์•„๊ฐ„๋‹ค๊ณ ํ•œ๋‹ค. ์‹ค์ œ๋กœ๋Š” 15์ธ์น˜ ๋งฅ๋ถํ”„๋กœ์™€ ํฌ๊ธฐ๊ฐ€ ๋˜‘๊ฐ™์ง€๋งŒ ๋ฒ ์ คํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“ค์–ด์„œ ํ™”๋ฉด๋งŒ 16์ธ์น˜๋‹ค.
  • ์ถœ์‹œ ๋‚ ์งœ๋Š” 11์›”, ๋‚ด๋…„ 2๋ถ„๊ธฐ ๋“ฑ ์•„์ง ์—ฌ๋Ÿฌ ์ถ”์ธก์ด ๋งŽ๋‹ค.

๐Ÿ“น ์˜์ƒ

๐Ÿ‡ฐ๐Ÿ‡ท (36:21) 2019 Conference 01 : React/Vue๋ฅผ ๋„˜์–ด ์ด์   Svelte (๋ณ€๊ทœํ˜„) - [์–‘์žฌ๋™ ์ฝ”๋“œ๋žฉ]

  • W3C HTML5 Conference "React/Vue๋ฅผ ๋„˜์–ด ์ด์   Svelte"๋ผ๋Š” ์ œ๋ชฉ์˜ ๋ฐœํ‘œ ์˜์ƒ.
  • Svelte์˜ ํŠน์ง•๊ณผ ์•„์ด๋””์–ด์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•˜๊ณ , React์™€ ๋™์ผํ•˜๊ฒŒ ๋งŒ๋“  ์•ฑ์œผ๋กœ ์†๋„์™€ ๋ฉ”๋ชจ๋ฆฌ, ์šฉ๋Ÿ‰์ด ์–ผ๋งˆ๋‚˜ ์ฐจ์ด๊ฐ€ ๋‚˜๋Š”์ง€ ๋ฐ๋ชจ๋กœ ๋ณด์—ฌ์ค€๋‹ค.

๐Ÿ‡บ๐Ÿ‡ธ (35:10) [React Live 2019] 4. Kitze - Navigating the Hype Driven Frontend Development World - [Frontend Love]

  • Navigating the Hype Driven Frontend Development World๋ผ๋Š” ์ œ๋ชฉ์˜ React Live 2019 ์ปจํผ๋Ÿฐ์Šค ๋ฐœํ‘œ ์˜์ƒ.
  • ์ดˆ๋ฐ˜์—” React Hooks์™€ State Management ๋Œ€ํ•ด ์ž ๊น ์ด์•ผ๊ธฐํ•˜๊ณ , ์ค‘ํ›„๋ฐ˜ ๋ถ€์—๋Š” FOMO(Fear Of Missing Out)์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•œ๋‹ค. (์ด๋ฒˆ์ฃผ ์ถ”์ฒœ ์˜์ƒ!)

๐Ÿ‡บ๐Ÿ‡ธ (32:41) Full stack front-enders - [JAMstack Conf]

  • Chris Coyier์˜ Oopsโ€”I guess we're full-stack developers now๋ผ๋Š” ์ œ๋ชฉ์˜ JAMstack Conf ๋ฐœํ‘œ ์˜์ƒ.
  • LAMP, MEAN Stack๋ถ€ํ„ฐ JAM, STAR Stack ๋“ฑ๊นŒ์ง€ ์›น๊ฐœ๋ฐœ์˜ ๋งŽ์€ ์˜์—ญ์ด ๋ฐฑ์—”๋“œ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ์ชฝ์œผ๋กœ ์˜ฎ๊ฒจ๊ฐ€๊ณ ์žˆ๋‹ค๊ณ  ์ด์•ผ๊ธฐํ•œ๋‹ค.
  • ๋•๋ถ„์— Frontend ๊ฐœ๋ฐœ์ž๋“ค์€ ์ ์ ๋” full-stack ๊ด€๋ จ ์ผ์„ ํ•˜๊ฒŒ๋˜๊ณ , ์‹ค์ œ๋กœ ์•„๋งˆ์กด์—์„œ๋Š” Full Stack Front-End Developer๋ผ๋Š” ์ด์ƒํ•œ ์ง๊ตฐ์„ ๋ฝ‘๊ธฐ๋„ ํ•˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•œ๋‹ค.

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

roughViz

  • ์†์œผ๋กœ ๊ทธ๋ฆฐ๊ฒƒ๊ฐ™์€(sketch/hand-drawn) ๊ทธ๋ž˜ํ”„์™€ ์ฐจํŠธ๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋Š” D3๊ธฐ๋ฐ˜์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ.

greenboard

  • API ๋ฌธ์„œ๋ฅผ ์œ„ํ•œ Gatsby ํ…Œ๋งˆ.
  • Gatsby plugin ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•˜๋ฉฐ https://greenboard.surge.sh/์—์„œ ๋ฐ๋ชจ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

tinacms

  • React app์„ ์œ„ํ•œ Content Editing interface๋ผ๊ณ  ์†Œ๊ฐœํ•˜๋Š”๋ฐ, Real-Time ํ˜•ํƒœ์˜ CMS ํˆด.
  • ์—ญ์‹œ Gatsby plugin์„ ์ œ๊ณตํ•œ๋‹ค.

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

๐ŸŽจ simpleicons.org

  • ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ธŒ๋žœ๋“œ์˜ svg icon์„ ๋ชจ์•„์„œ ์ œ๊ณตํ•˜๋Š” ์‚ฌ์ดํŠธ.

๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป usethis.com

  • ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์–ด๋–ค ํ•˜๋“œ์›จ์–ด์™€ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์“ฐ๋Š”์ง€ ์ธํ„ฐ๋ทฐํ•˜๋Š” ํ”„๋กœ์ ํŠธ ์‚ฌ์ดํŠธ.
  • 1023๊ฐœ์˜ ์ธํ„ฐ๋ทฐ๊ฐ€ ์˜ฌ๋ผ์™€์žˆ๋‹ค.

๐Ÿ’ป free-for.dev

  • ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ๋ฌด๋ฃŒ ์„œ๋น„์Šค๋“ค ๋ชจ์Œ.