๐Ÿ—“ 2019.07.22 ~ 2019.07.28


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

๐Ÿ‡บ๐Ÿ‡ธ What's New In DevTools (Chrome 77)

  • Chrome 77์— ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ๋“ค์„ ์†Œ๊ฐœํ•˜๋Š” ๊ตฌ๊ธ€ ๋ธ”๋กœ๊ทธ ๊ธ€.
  • OS์˜ ๋‹คํฌ ํ…Œ๋งˆ๋ฅผ ๊ฐ์ง€ํ•ด์„œ Devtool๋„ ์ž๋™์œผ๋กœ ๋‹คํฌ ํ…Œ๋งˆ๋กœ ๋ณ€๊ฒฝ๋œ๋‹ค๊ณ  ํ•œ๋‹ค.
  • DOM Element ์˜ค๋ฅธ์ชฝํด๋ฆญ์œผ๋กœ selector, XPath ๋“ฑ์„ Copyํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์—ˆ๋Š”๋ฐ, ์ด๋ฒˆ์— Styles๋ฅผ Copyํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์ƒ๊ฒผ๋‹ค. ์›น์‚ฌ์ดํŠธ Clone ๊ฐ™์€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ• ๋•Œ ๊ต‰์žฅํžˆ ์œ ์šฉํ•ด๋ณด์ธ๋‹ค.

๐Ÿ‡ฐ๐Ÿ‡ท โ€œ์—ฌํ–‰ํ•˜๋ฉฐ ์ผํ•  ์ˆ˜๋Š” ์—†์„๊นŒ?โ€ ๋‹น์‹ ์ด ๋ชจ๋ฅด๋˜ ๋””์ง€ํ„ธ ๋…ธ๋งˆ๋“œ์˜ ์„ธ๊ณ„๋ฅผ ์•Œ๋ ค์ค€๋‹ค

  • ํฌ๋ฆฌ๋งˆ๋žฉ์ด๋ผ๋Š” ์Šคํƒ€ํŠธ์—…์—์„œ 3๋…„๊ฐ„ ๋””์ง€ํ„ธ๋…ธ๋งˆ๋“œ ์ƒํ™œ์„ ํ•˜๋ฉฐ ์›๊ฒฉ๊ทผ๋ฌด๋ฅผ ํ•œ ๊ฐœ๋ฐœ์ž๋ถ„์˜ ๊ฒฝํ—˜๋‹ด ๋ฐ ๊ฐ•์—ฐ ์ •๋ฆฌ๊ธ€.

๐Ÿ‡บ๐Ÿ‡ธ How to make your HTML responsive by adding a single line of CSS

  • col-sm-4, col-md-8๊ณผ ๊ฐ™์€ CSS ํ”„๋ ˆ์ž„์›Œํฌ ๋ฌธ๋ฒ•์ด๋‚˜ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ ์—†์ด CSS Grid, repeat, minmax, object-fit ๋“ฑ์„ ์ด์šฉํ•ด ๋ช‡ ์ค„๋กœ ์™„๋ฒฝํ•œ ๋ฐ˜์‘ํ˜• ์›น์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•œ๋‹ค.

๐Ÿ‡บ๐Ÿ‡ธ Understand the JavaScript SEO basics

  • ๊ตฌ๊ธ€ ๊ณต์‹๋ฌธ์„œ์—์„œ ์„ค๋ช…ํ•˜๋Š” JavaScript SEO ๊ฐ€์ด๋“œ.
  • ๊ณต์‹๋ฌธ์„œ์—์„œ๋„, ๊ตฌ๊ธ€ ํฌ๋กค๋Ÿฌ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, SSR์ด๋‚˜ Prerendering์€ ์—ฌ์ „ํžˆ ์‚ฌ์šฉ์ž๊ฒฝํ—˜๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์—†๋Š” ํฌ๋กค๋Ÿฌ๋ฅผ ์œ„ํ•ด ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ํ•œ๋‹ค.

๐Ÿ‡บ๐Ÿ‡ธ line-clamp

  • CSS ์†์„ฑ line-clamp์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•˜๋Š” ๊ธ€.
  • ๊ธด ํ…์ŠคํŠธ๋ฅผ ์ผ์ • ์ค„ ์ˆ˜๋กœ ์ œํ•œํ•˜๊ณ  ์ƒ๋žต๋œ ๋ถ€๋ถ„์„ ellipsis ๋ถ€ํ˜ธ(...)๋กœ ํ‘œ์‹œํ•˜๋Š” ๊ธฐ๋Šฅ์„ ํ•œ๋‹ค.
  • ๋Œ€๋ถ€๋ถ„์˜ ์—๋ฒ„๊ทธ๋ฆฐ๋ธŒ๋ผ์šฐ์ €(์•ฝ 90%)๊ฐ€ ์ง€์›ํ•˜๊ณ ์žˆ๋Š”๋ฐ, ์ „ํ˜€ ๋ชฐ๋ž๋˜ ์†์„ฑ์ด์—ˆ๋‹ค. Post Description ๊ฐ™์€ ๊ณณ์— ์œ ์šฉํ•  ๊ฒƒ ๊ฐ™๋‹ค.

๐Ÿ“ฐ ๋‰ด์Šค

๐Ÿ‡บ๐Ÿ‡ธ Microsoft invests $1 billion in OpenAI in new multiyear partnership

  • MS๊ฐ€ OpenAI์— 10์–ต๋‹ฌ๋Ÿฌ(์•ฝ 1์กฐ)๋ฅผ ํˆฌ์žํ–ˆ๋‹ค. MS Azure ์ชฝ์„ ๊ฐ•ํ•˜๊ฒŒ ๋ฐ€๊ณ ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

๐Ÿ‡บ๐Ÿ‡ธ CircleCI closes $56M Series D investment as market for continuous delivery expands

  • CircleCI๊ฐ€ 5600๋งŒ๋‹ฌ๋Ÿฌ ๊ทœ๋ชจ์˜ Series D ํˆฌ์ž๋ฅผ ๋งˆ์ณค๋‹ค๊ณ  ํ•œ๋‹ค.

๐Ÿ“น ์˜์ƒ

๐Ÿ‡บ๐Ÿ‡ธ (10:26) I didn't know that - Stefan Judis - [NDC Conferences]

  • ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด "์ด๊ฑด ๋ชฐ๋ž๋„ค?" ํ• ๋งŒํ•œ ์ •๋ณด/ํŒ๋“ค์„ ๋ชจ์•„๋†“์€ ์‚ฌ์ดํŠธ๋ฅผ ์†Œ๊ฐœํ•˜๋Š” ์งง์€ ๋ผ์ดํŠธ๋‹ ํ† ํฌ ์˜์ƒ. (์›น์‚ฌ์ดํŠธ : I didn't know that)
  • ์˜์ƒ์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ๊ด€๋ จ๋œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์˜์™ธ์˜ ๊ตฌํ˜„๋“ค์„ ์†Œ๊ฐœํ•œ๋‹ค.
  • global์— ๋‹ฌ๋ ค์žˆ๋Š” isNaN๊ณผ Number.isNaN์˜ ๊ตฌํ˜„์ด ๋‹ค๋ฅด๋‹ค๋Š”๊ฑด ์ข€ ์‹ ๊ธฐํ–ˆ๋‹ค. ๊ทธ์™ธ์—๋„ ๋ชฐ๋ž๋˜ ๊ฒƒ๋“ค์ด ๋งŽ๋‹ค.

๐Ÿ‡บ๐Ÿ‡ธ (3:30) Reduce image size: use the correct format โ€” PNG or JPEG - [Google Chrome Developers]

  • ์›นํŽ˜์ด์ง€์— ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•  ๋•Œ, ์ƒํ™ฉ์— ๋”ฐ๋ผ ์–ด๋–ค ํฌ๋งท(png, jpg, webp, svg)์„ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ์ ์ ˆํ•œ์ง€ ์„ค๋ช…ํ•˜๋Š” ์งง์€ ๊ตฌ๊ธ€ ๊ณต์‹ ์œ ํŠœ๋ธŒ ์˜์ƒ.

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

proposal-optional-chaining

  • ECMAScript optional chaining ์ œ์•ˆ์ด 7์›” 26์ผ์ž๋กœ Stage 3์— ์˜ฌ๋ผ๊ฐ”๋‹ค.
  • TypeScript 3.7.0 milestone์—๋„ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค. (๐ŸŽ‰์ถ•์ œ์˜ํ˜„์žฅ)

A-to-Z-Resources-for-Students

  • ํ•™์ƒ๋“ค์„ ์œ„ํ•œ, ํ•™์ƒ๋“ค์—๊ฒŒ ์œ ์šฉํ•œ ๊ฐœ๋ฐœ๊ด€๋ จ ์ž๋ฃŒ๋“ค์„ ๋ชจ์•„๋†“์€ repo. (๋ฒˆ์—ญ๋„ ์žˆ๋‹ค)

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

๐Ÿ“Š heap.io

  • ์›น, ์•ฑ ์œ ์ € ํ–‰๋™ ์ด๋ฒคํŠธ๊นŒ์ง€ ํŠธ๋ž˜ํ‚นํ•  ์ˆ˜ ์žˆ๋Š” Analytics ์†”๋ฃจ์…˜.

๐Ÿ’ฌ console.chat

  • Devtool console ํƒญ์—์„œ ์ฑ„ํŒ…์„ ํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ดํŠธ. (์‹ ๊ธฐํ•˜๋‹ค..!)