๐งข ์คํ ํผ์ ์ธํฐ๋ท ์ฃผ๊ฐ์ง #27
์ธํฐ๋ท ์ฃผ๊ฐ์ง #27์ ์ค์ ๊ฑธ ํ์ํฉ๋๋ค!
์๋ ํ ๊ณ์ธ์, ์ฌ๋ฌ๋ถ!
๋๋ ํด๊ฐ๋ฅผ ๋ณด๋ด๊ณ ๋์์๋ค!๊ทธ๊ณณ์ ๊ณณ๊ณณ์ ์ฐ๋ ๊ธฐ ์์ ๊ฑฐ ์ฌํ๊ณผ ์์คํ ๋ฅด๋ด์ ์ฅ๊ฑฐ๋ฆฌ ์ฐ์ฑ ์ด ์์๋ค.๋๋ ์ด ๋์์ ๋ถ์๊ธฐ๋ฅผ ์ ๋ง ์ข์ํ๋ค!์ด๊ฒ์ ๊ธด์ฅ์ ํ๊ณ ์คํธ๋ ์ค๋ฅผ ์ค์ด๋ ์๋ฒฝํ ์ฌํ์ด๋ค.๋์์ ๋๋ ๋ฐฑ์ ์ ํ ๋ ๋ง์๋ค!์ ์ ์ํ๊ฐ ๊ฐ๊น์์ง๊ณ ์์ต๋๋ค!๐
์ฐ๋ฆฌ๊ฐ ์ธํฐ๋ท์ ๋ค์ด๊ฐ๊ธฐ ์ ์
์ด๋ฒ ์ฃผ ์ธํฐ๋ท ์ฃผ๊ฐ์ง๋ ๋ค์๊ณผ ๊ฐ๋ค.
์ค๋น๋๋์?์์ ์ํค๋ค๊ฐ์!
ํผ๋๋ฐฑ์ด ๋ ์ข์ ํ์ง ์์
๋ง์ฝ ์ฐ๋ฆฌ๊ฐ
select
์์๋ฅผ ์ค๊ณํ ์ ์๋ค๋ฉด, ๊ทธ๊ฒ์ ๋งค์ฐ ์ข์ง ์์ต๋๊น?๋๋๊ฒ๋ ์ ์ฒด ๊ตฌ์ฑ ์์๋ฅผ ๋ค์ ์คํํ์ง ์์ผ๋ฉด ์ด๋ฅผ ํ ์ ์๋ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ด ์๋ค.๊ทธ๋ฌ๋ Melanie Richards๋ ํ์ฌ ์งํ ์ค์ธ ์ ์์ ๋ํ ํผ๋๋ฐฑ์ ์๊ตฌํ๋ค. ์๋ฅผ ๋ค์ด popup
์์์ CSS์ ํฌ์ง์
๋์ด๋ค.๐ Give feedback
๋ธ๋ผ์ฐ์ ๊ฐ ์ง๊ธ ํ ์ ์๋ ๋ชจ๋ ๊ฒ
๋คํธ์ํฌ์ ์๋ ๋ชฉ์ ์ ๋ฌธ์๋ฅผ ์ก์ธ์คํ๊ณ ๋ณด๋ ๊ฒ์ ๋๋ค.๊ทธ๊ฒ์ ์์ฃผ ์ค๋๋ ์ผ์ด๋ค.์ค๋ฆฌ์ ๋ณด์ (Julien Voisin)์ ๊ธฐ๋ณธ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ๊ณผ ๋ถํ์ํ ์๋ ์๋ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ์ ๋ํ ๋ค์ ์ ๋ํ ๊ธ์ ์ผ๋ค.๋น๋ก ๋๋ ๋ชจ๋ ๊ฒ์ด ์ค๋ฆฌ์์ด ๋ฌ์ฌํ ๊ฒ์ฒ๋ผ ์ธ๋ชจ์๋ค๊ณ ์๊ฐํ์ง๋ ์์ง๋ง, ์ด ๋ธ๋ก๊ทธ๋ ๊ฐ์น ์๋ ๊ฐ์ ์ ์ ๊ณตํ์ฌ ํ์ฌ์ ์ธํฐ๋ท์ ๊ฐ๋ฅ์ฑ์ ์ค๋ช ํ์๋ค.
๐ Learn about browser features
๋น์ ์ ๋ ๊ณ ๋ธ๋ก์ ์ค์บํ์ฌ ์ ์ ํ ์ ์ ์ค๋ช ์ ์ป์ผ์ธ์
Brickit๋ ์์ดํฐ ์ฑ์ผ๋ก ๋ ๊ณ ๋ธ๋ก์ ๋ชจ๋ ์ค์บํ๊ณ ์ง๋ น์ ๋ง๋ค์ด ๋ชจ๋ ๋ธ๋ก์ผ๋ก ์๋ก์ด ๋ฌผ๊ฑด์ ๋ง๋ค ์ ์๋ค.๋๋ ๋ ๊ณ ๋ธ๋ก ์ ํธ๊ฐ๊ฐ ์๋์ง๋ง, ์ฝ์ํ ๋๋ก ํจ๊ณผ๊ฐ ๋ํ๋๋ฉด ๋๋ฌด ๋ฉ์๋ค.
๐
๋ค๋ฅธ Mac ์ค์น ๊ฐ์ด๋
Swyx๋ Mac ์ค์น ๊ฐ์ด๋๋ฅผ ๊ณต์ ํ๊ณ ์ ๋ฐ์ดํธํ์ต๋๋ค.๋๋ ๋ค๋ฅธ ์ฌ๋๋ค์ด ์ฌ์ฉํ๋ ๊ฒ์ ๋ํด ๋ ๋ง์ด ์๊ธฐ ์ํด ์ด ๋ชฉ๋ก๋ค์ ์ฝ๋ ๊ฒ์ ์ข์ํ๋ค.๋ถํํ๊ฒ๋, Swyx์ ์ค์ ์ ์๋ํ๋ ๊ฒ์ด ์๋๋ค. (์คํฌ๋ฆฝํธ๋ฅผ ์คํํด์ ์ ์ปดํจํฐ๋ฅผ ์ค์นํ๋ ๊ฒ๋งํผ ๋ง์กฑ์ค๋ฌ์ด ๊ฒ์ ์๋ค.) ๊ทธ๋ฌ๋ ์๋ด์์๋ ์ข์ ๊ฒ์ด ๋ง๋ค.
๐ Find new tools
(VS ์ฝ๋ ํ์ฅ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ๋ ๋ฐฉ๋ฒ์ ์๊ณ ์ถ๋ค๋ฉดI have a post about that on my blog, too
๋ณต์ ๋ช ๋ น์ ์คํํ๋ ๊ธ๋ก๋ฒ $๋ช ๋ น
Swyx ์ค์ ์ ์ดํด๋ณด๋ he's using the undollar npm CLI package์ด ํจํค์ง์ ๋ชฉ์ ์ ๋ณต์ ๋ช ๋ น์ ์ฝ๊ฒ ์คํํ ์ ์๋๋ก ์์ฅ์๋ ๋ฌ๋ฌ ๊ธฐํธ๋ฅผ ๋จน๋ ๊ฒ์ ๋๋ค.
ํ์ฌ ํจํค์ง, ์ฌ์ง์ด ๋ ธ๋๋ฅผ ์ฌ์ฉํฉ๋๋ค.์ด๋ฐ ๊ฐ๋จํ ๊ธฐ๋ฅ์ ๋ํด ๋งํ์๋ฉด js๋ ๋๋ฌด ๋ง์ ๊ธฐ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.๋๋ ๋ ์ค์ ์ ธ ์คํฌ๋ฆฝํธ๋ก
$
๋ช
๋ น์ ์ด๋ป๊ฒ ์คํํ๋์ง ๊ณต์ ํ๋ค.๐ Add a dollar command
ํ๋ก์ธ์ค๊ฐ ์ด๋ป๊ฒ ๊ฐ์ ์ ์ด๋ํฉ๋๊น
์ ๋ฉฐ์น ๋์ ๋์ ์ต๊ด์ ์ธ ๊ฒ์์ ๊ทธ๋ฆฌ ๊ฐํ์ง ์์ง๋ง, ๋๋ ์ฌ์ ํ ๊ฑด๊ฐํ ์ต๊ด๊ณผ ๊ตฌ์กฐ๊ฐ ๋์ฑ ์ข์ ์ํ์ ๊ฐ์ ธ์ฌ ๊ฒ์ด๋ผ๊ณ ๋ฏฟ๋๋ค.Thomas Oppong์ ํ๋ก์ธ์ค๊ฐ ์ด๋ป๊ฒ ์ง๋ณด๋ฅผ ๊ฐ์ ธ์ค๋์ง ๊ณต์ ํฉ๋๋ค.
๐ Establish life processes
์ฐ๋ฆฌ๋ ์๋ก์ด ๋ทฐํฌํธ ๋จ์๋ฅผ ์ป์ ์ ์์ต๋๊น?
๋๋ ์ด์ ์ ์์, ํฐ, ๋์ ๋ทฐํฌํธ๋ฅผ ๋ค์ด ๋ณธ ์ ์ด ์์ง๋ง, ๋ถ๋ช ํ ์๋ค.๋ธ๋ผ์ด์ค๋ ํ ๋ฒ ๋ณด๊ณ
svh
์ dvh
๋ฑ ๋จ์๊ฐ ๋ฌด์์ ํ ์ ์๋์ง ์ค๋ช
ํ๋ค.๐ a new proposal aiming to clean up the messy viewport unit handling on its way
๋์ ๋ทฐํฌํธ ์ ์ดํด ํ๊ท ์์ ๋ํ ์ฌ๊ณ
๋๋
thanaverage.xyz
ํฉ๋ฆฌ์ ์ธ ์๊ฐ์ ๊ฐ์ง๊ณ ๋์๋ค.์ด๊ฒ์ ์ฌ๋ฏธ์๋ ์์ ์ฌ์ดํธ๋ก ์ด๋ํ๋'์ฌ์๊ณ ๋นํ๊ฑฐ๋ฆฌ๋ ์ผ๋ฃฉ'์ด ๋ง๋ค.๊ทธ๊ฒ์ ๋์๊ฒ ๊ฐ๋จํ ์/์๋์ค ๋ฌธ์ ๋ฅผ ๋ฌผ์ด๋ณผ ๊ฒ์ด๋ค.๋น๊ฒฐ: ๋ค๋ฅธ ์ฌ๋์ ํ๊ท ๋ต์์ ๋ณด์ฌ ์ค๋ค.ํฅ๋ฏธ๋ก์ด ๊ฒ์ 78%๊ฐ ์ผ๋ฐ์ธ๋ณด๋ค ์น๊ตฌ๊ฐ ์ ๋ค๊ณ ์๊ฐํ๋ ๊ฒ์ด๋ค.
๐
๋ค๊ฐ ํ๋ฒํ์ง ์๋์ง๋ฅผ ๋ด๋ผ npm ์ฌ์ฌ๊ฐ ํ๊ดด๋์์ต๋๊น?
๋ค๊ฐ ์ค๋ ์ธ์ ๋ฌ๋ฆฌ๊ธฐ๋ฅผ ํ๋ ์ง
npm install
npm๋ ๋ฌด์์ด ๋ง๋ก "๋์ ์ข
๋ชฉ์ ๋งค์ฐ ์ฝํ๋ค!"๋ผ๊ณ ๋งํ๋ ๊ฒ์ ์์์ฐจ๋ ธ์ ๊ฒ์ด๋ค.๋ฉ๋ชจ๋๋ ๋ฐฉ๊ธ ๋ด ์ฌ์ดํธ์์ ๊ทธ๊ฒ์ ์ดํํ๋ค. ์ด๊ฒ์ด ๋ฐ๋ก ๋ด๊ฐ ๋ณธ ํํธ์ด๋ค.found 9 vulnerabilities (1 low, 1 moderate, 7 high)
์ผ๊ณฑ ๊ฐ์ ๋์ ๊ตฌ๋ฉ?์ธ์์, ๋ด๊ฐ ํ๊ณ ์๋ ๋ชจ๋ ๊ฒ์ ๋ด๋ ค๋๊ณ ๋ฐ๋ก ๊ณ ์ณ์ผ ํด!๊ทธ๋ฌ๋ ๋ฑ๋ฑ, ์ด๊ฒ์ ๋ด ๋ก์ปฌ ๊ธฐ๊ธฐ๋ Netlify ์๋ฒ์ ์ธ์์ง ์ ์ ์ฌ์ดํธ์ด๋ค.์ ๋ง ๊ทธ๋ ๊ฒ ๊ธํ๊ฐ์?์ด๋ฐ ๊ฒ๋ค์ ๊ด์ฌ์ ๊ฐ์ ธ์ผ ํ๋์?๋จ ์๋ธ๋ผ๋ชจํ๋
npm audit
์ ๋ํ ๊ทธ์ ๊ฒฌํด๋ฅผ ๋๋ด๊ณ , ๋๋ npm audit
์ค๋์ ์
๋ฌด ๋ฐฉ์์ด ํ์คํ ๊นจ์ก๋ค๋ ๊ฒ์ ๋์ํ๋ค.๐
npm ์ฌ์ฌ ์ฌํ์ธ ๐ ์ก์ธ์ค ๊ฐ๋ฅํ ๊ตฌ์ฑ ์์์ ๊ด๋ฒ์ํ ๋ชฉ๋ก
ํ๋๋ ์ฑ ๊ฐํผ;๋ง์ฝ ๋น์ ์ด ์ ๊ทผ ๊ฐ๋ฅํ ์ ๋จ ๊ตฌ์ฑ ์์๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํด ๋ชจ๋๋ฅผ ์ฐพ๊ณ ์๋ค๋ฉด, Smashing ์ก์ง์ ๋นํ๋ฆฌ ํ๋ฆฌ๋๋ง (Vitaly Friedman) ์ ์๋ฐฑ ๊ฐ์ง ์์์ ์์งํ ๋๋์ ๊ธ์ ๋ฐํํ๋ค.๐)!
๐
๋ฐฉ๋ฌธ ๊ฐ๋ฅํ ์ฌ์ดํธ๋ฅผ ๋ง๋ค๋ค ํฐ ์๋ฆฌ๋ก ์ธ์น๋ค.๐
๋ง์ฝ ๋ค๊ฐ ๋์ ๋ธ๋ก๊ทธ๋ฅผ ๋ฐฉ๋ฌธํ๋ค๋ฉด, ๋๋ ์ด๋ฏธ ๋ณด์์ ๊ฒ์ด๋ค. ๋์ค ์ ฐ์ธ์๋(Nils Schฮฝnwald)๊ฐ ๊ฐ์ ธ๊ฐ ๊ฒI show the site's web vitals in the footer์ ํด๋์ ํ์ ์ด์ํด ๋ฐ์ํ๋ค.์ํ์ด!
๐ my
web-vitals
custom element React ํญ๋ชฉ์ ์น ์ค์ ์ ๋ณด ํ์ ์ธ ๊ฐ์ง ๊ฐ์น ์๋ ํญ๋ชฉ์ ๋ณผ ๋งํ๋ค
- Node์ ํจ๊ป JS ํ์ผ์ ๋ณด๋ ๋๋ค.์์ ์์ ์์ด์.
mongodb-js/boxednode - ๋ง์git ํ๋งค๋ฅผ ํ๋ช ํ๊ฒ ๊ด๋ฆฌํ๋ค.
nosarthur/gita-devops์ infradev๊ฐ ํฅ๋ฏธ๋ฅผ ๋๋ผ๋ ๋ฌด๋ฃ SaaS,PaaS,IaaS ์ ํ ๋ชฉ๋ก.
๊ฐ๋ฐ์ ๋ฌด๋ฃ ์๋ก์ด ์กฐ์
๋๋ ์ ์ ์๋ค.์ด๋ฒ ์ฃผ์ ๋๋ ์ด ์ฌ์ดํธ์ SVG Favicon์ ๋ง๋๋ ๋๊ตฌ๋ ํฌํจ๋์ด ์๋ค๋ ๊ฒ์ ๋ฐ๊ฒฌํ๋ค.๐ฒ
๐ RealFaviconGenerator
Generate SVG Favicons์์ ๋ ๋ง์ ๋จ์ผ ์ฉ๋ ์จ๋ผ์ธ ๋๊ตฌ ์ฐพ๊ธฐ
์กฐ์.๋๋ถ ์๊ฐํ ๋งํ ๋ง ํ๋ง๋
ํฌ๋ฆฌ์ค ์ฝ์ด๋ ๋ง 41์ธ ๋ฅผ ๋์์ ๋๊ณ ์๋ค.์ด ๊ธ์๋ ์ด๋ฒ ์ฃผ ์ธ์ฉ๋ฌธ์ด ํฌํจ๋์ด ์๋ค.
Every decision we make, big and small, short-term and long-term, is an effort to improve our mood.
๊ทธ๋ 40๋ ๋์์ ๊ฒฝํ๊ณผ ๊ตํ ๋ช ์ธ์๋ฅผ ๋ฐํํ๋ค ์ธ์ฝ๋ฉ์ ๋ฉ์ถ๋ผ๋ ๋ ธ๋
๋๋ ์ต๊ทผ์ ํฌ๋ฆฌ์ค ๋ฃจ๋ ธ๋ฅผ ๋ฐ๊ฒฌํ๋ค.๊ฑฐ์ ๋งค์ฃผ ๊ทธ๋ ์๋ฆ๋ค์ด ์ฅ์ ์์์ ์ค๋ด DJ ํ๋ก๊ทธ๋จ์ ๋ฐํํ๋ค.๋๋ ๊ทธ์ ์คํ์ผ์ ์ ๋ง ์ข์ํ๋ค!
๐
์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!
์ด๊ฒ์ ใ์ 27์ธํฐ๋ท์ฃผ๊ฐใ์ ์ด๊ฒฐ์ฐ์ด๋ค!๋ง์ฝ ๋ค๊ฐ ๋์ ์์ฌ ํต์ ์ ์ข์ํ๋ค๋ฉด, ๋๋ ๋ค๊ฐ ๋ค๋ฅธ ์ฌ๋์๊ฒ ์๋ ค์ค ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋ค.โฅ๏ธ
.
์์ ์ ์ฃผ์ํด๋ผ, ๋๋ ๋ค์ ์ฃผ์ ๋ค์ ๋์ ์ด์ผ๊ธฐํ๊ฒ ๋ค.๐ ๐
๊ทธ๋ฆฌ๊ณ ๋ฉ์ง ์์ด๋ค์ด RSS๋ฅผ ์ฌ์ฉํ๋ค๊ณ ๋ค์์ด์.์ฐพ์ ์ ์์ต๋๋คyou can change that.
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐งข ์คํ ํผ์ ์ธํฐ๋ท ์ฃผ๊ฐ์ง #27), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/stefanjudis/stefan-s-web-weekly-27-53ppํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค