โฃ๏ธ๋ฒํท ํ๋ ์ด์คโฃ๏ธ์ ํฉ๋ฅํ ์ง ๋ฒ์จ ์ฝ 8๊ฐ์์ ์๊ฐ์ด ์ง๋ฌ์ต๋๋ค. ์๊ฐ์ด ์ ๋ง ๋น ๋ฅด๋ค์! ์ด๋ฒ์๋ 2022 ์คํ์คํฐ๋ฒ ๋ฐ์นญ ๊ธฐ๋ ์ผ๋ก ์ ์ฌ ํ 8๊ฐ์ ๊ฐ ์ด 6๊ฐ์ ์ด๋ฒคํธ๋ฅผ ์งํํ๋ฉฐ ๋ฐ์ ํ๋ ๊ฒฝํ์ ๋ํด ์ ๋ฆฌํด ๋ณด๋ ค๊ณ ํฉ๋๋ค. ์ ๊ฐ ๋ฐ์นญํ ์ด๋ฒคํธ๋ค์ ๋ณด๊ณ ์์๋ ์์ผ์ค๋ ๋๊ปด์ง๋ ๋์์ด๋ ๋ถ๋ค์ ๋ ธ๊ณ ..! ์ด๋ฒคํธ๋ค์ ์ ์ฑ์ค๋ ๋๋ด์ค๋ฉด์ ๋น์ฐํ ๋ฐ์ ํ ๊ฒ๋ ์๊ณ ์์ง ๋ชปํ ๊ฒ๋ ๋ง๊ณ ๋๋ ์ ๋ ๋ง์๋ฐ์, ๊ฐ๋งํ ๋๋ฉด ๋ ๊ธ์ ์์ด๋ฒ๋ฆด ๊น๋ด ๊ธ๋ก ์ ๋ฆฌํด๋ณด๋ ค ํฉ๋๋ค. ํ๋ก๋ฏธ~! ์ฒ์ ์ด๋ฒคํธ๋ฅผ ์์ํ ๋์ ๊ธฐ์ต์ด ์์ง๋ ์์ ํ๋ฐ์... github ์ ์ฅ์๋ถํฐ ๋ง๋ค๊ณ ํ๊ฒฝ ์ค์ ์ ์์ ํ์์ต๋๋ค. TLM(Team Lead&Manager)๋ถ๊ณผ ํจ๊ป ์์ ์ฒ์ ๊ตฌ์ฑ๋ถํฐ ์ปดํฌ๋ํธ ํ๋ํ๋ ์ง์ ๊ตฌํ ํด์์ ๊ทธ๋ฐ์ง..
์ค๋์ Next JS์์ Client Data fetching ์ฌ์ฉ ์ ๋ง์ฃผํ ์ ์๋ Anchoring ์ด์์ ๋ํด ์ ๋ฆฌํ๋ ค ํฉ๋๋ค. Next JS docs์์ ๊ถ์ฅํ๊ณ ์๋ ์ฝ๋ ์คํ์ผ์ ์ ์ฉํ์ ๋ ์๊ธธ ์ ์๋ ์ด์์ด๊ธฐ ๋๋ฌธ์, ๊ด๋ จ ์ด์๊ฐ ์๊ฒผ์ ๋ ์ ๋ ๋๋ฒ๊น ์ ์๊ฐ์ ๊ฝค๋ ์ผ์ต๋๋ค. ๋จผ์ Next JS์ Data fetching์ ๋ํ ์ง์์ด ์ ๋ฌดํ ๋ถ๋ค์ ์ํด ๊ฐ๋ ๋ถํฐ ์ ๋ฆฌํ๊ณ ์ด์์ ๋ํ ํด๊ฒฐ ๊ณผ์ ์ ์ฐจ๋ก๋ก ์ ์ด๋ณด๊ฒ ์ต๋๋ค. Data fetching Next JS๋ฅผ ์ด์ฉํ Data fetching์๋ ๋ค์๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์์ธํ ๋ด์ฉ์ ๊ณต์ ๋ฌธ์๋ฅผ ์ฐธ์กฐํด์ฃผ์ธ์! getStaticProps / getServerSideProps : Server Side์์ ๋ฏธ๋ฆฌ page h..
Sticky ์คํ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ ์คํ์ ํ์ํ ์กฐ๊ฑด์ ํ๋์ฉ ์ถ๊ฐํด๊ฐ๋ฉด์ ์ด๋ป๊ฒ ํด๊ฒฐํ ์ง๋ฅผ ๊ณ ๋ฏผํด๋ณด์. css์ poistion: sticky; ๋ฅผ ์ด์ฉํ์. ์ฐ์ Sticky๋์ด์ผ ํ๋ Element๊ฐ ์ต์๋จ์ ์์นํด์๋ค๋ฉด ์ฝ๋ค. css๋ฅผ ์ด์ฉํ๋ฉด position: relative; ์ธ ๋ถ๋ชจ์ ์๋จ์ ํด๋น Element๊ฐ sticky๋๋ค. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container๋ฅผ ๋ง๋ค์. ์ด๋ฒ์๋ sticky header(์ฒซ๋ฒ์งธ Sticky Element) ์๋์ sticky sub-header๊ฐ ์์นํด์ผ ํ๋ค๊ณ ์๊ฐํด๋ณด์...
Main Concepts ์ฒ์ React๋ฅผ ์์ํ ๋ ๊ฑฐ์ ์ดํด ๋ชปํ๊ณ practice ์ ๋๋ง ์ฐธ์กฐํ์ ๋ฏ ์ถ์ด์ ๋ค์ ์ฝ์ด๋ณด์๋ค. ๊ฐ๋ ์ ์ด๋ฒ์ ๋ช ํํ ํ๋ค๊ฑฐ๋ ์ฒ์ ๋ค์ด๋ณธ ๊ฒ๋ค์ ์ ๋ฆฌํด๋ณด์๋๋ฐ, Main concept์์๋ ๊ฝค๋ ๋ง์๋ค. ์ด๋ฒ ๊ธฐํ๋ก ํด๋น ์ ๋ฆฌ ๊ธ์ ์ฃผ๊ธฐ์ ์ผ๋ก ๋ณด๋๋ก ํด์ผ๊ฒ ๋ค ๐ Introducing JSX React๋ ๊ธฐ์กด์ html, js ์ ๊ฐ์ด ๊ธฐ๋ฅ ๋ณ๋ก ๋ฌธ์๋ฅผ ๋๋๋ ๋ฐ์์ ํ ์ปดํฌ๋ํธ ๋จ์๋ก ๋๋๊ฒ ํจ์ผ๋ก์จ js, html(jsx), css๋ฅผ ์ปดํฌ๋ํธ ๋จ์๋ก ๋ค๋ฃฐ ์ ์๊ฒ ํ์๋ค. JSX์ ๋ด๋ถ์ ๋ณ์๋ค์ ๋ ๋ ์์ ์ ์ด๋ฏธ ๋ฌธ์์ด๋ก ๋ณ๊ฒฝ ๋๋ฏ๋ก XSS ๊ณต๊ฒฉ์ ํผํ ์ ์๋ค. Rendering Elements React๋ก ๋ง๋ค์ด์ง ์ดํ๋ฆฌ์ผ์ด์ ์ ํ๋์ root DOM ๋ ธ๋๋ฅผ ..
๊ฐ๋ฐ์ ์งํํ๋ฉด์ ์๋๋ก์ด๋ OS์์ ๋ค์ด๋ฒ ์ฑ์ ์ฌ์ฉํ ๋ (ํน์ ์๋๋ก์ด๋ ๋ฒ์ - ์๋ง๋ 11 ์ด์ ์์๋ง) flex ๋ ์ด์์์ด ๊นจ์ง๋ ์ด์๊ฐ ๋ฐ์ํ์๋ค. css๋ฅผ ๋ค๋ฐฉ๋ฉด์ผ๋ก ๊ณ ์ณ๋ณด๋ฉด์ ํด๊ฒฐํด๋ณด์๋๋ฐ, ์์ธ์ 'flex-shrink๋ฅผ ์ง์ํ์ง ์๋ ๊ฒ'์ด์๋ค. (caniuse) ๋ฐ์ํ ์น์ ๊ตฌ์ถํ ๊ฒฝ์ฐ ํด๋น ์ฌ๋ก๋ฅผ ํผํ๊ธฐ ์ํด css ์ฝ๋์ flex-shrink ์ฌ์ฉ์ ์ง์ํ๋๋ก ํ์.
Open Graph๋? ์ด๋ค ์นํ์ด์ง๋ social graph์ ์ผ๋ถ๋ถ์ด ๋ ์ ์๋๋ก ํ๋ ํ๋กํ ์ฝ์ด๋ค. Metadata og:title : url ๊ณต์ ์ ์ ๋ชฉ์ผ๋ก ๋ค์ด๊ฐ๋ ์์ญ์ด๋ค. (์นด์นด์คํก ๊ณต์ ๋ title๋ง ๊ณต์ ๋๋ค.) og:type : object์ type์ด๋ค. (ex_ video.movie, website) og:image : url ๊ณต์ ์ ๋ํ๋๋ ์ด๋ฏธ์ง์ด๋ค. og:url : graph์์ id๋ก ์ฐ์ด๋ url์ด๋ค. og:audio, og:video : audio, video ํ์ผ์ url์ด๋ค. og:description: object์ ๊ดํ ์ค๋ช ์ด๋ค.์นด์นด์คํก ๊ณต์ ์์๋ ํ์๋์ง ์๊ณ ์ฌ๋ ๊ณต์ , ๋ธ๋ก๊ทธ์์๋ description๊น์ง ํ์๋๋ค. og:site_name : ๋ฐฉ๋ํ ์น์ฌ์ด..
๋ฌธ์ ์ํฉ next/link๋ฅผ ์ฌ์ฉํ GNB์ mouseEnter event๊ฐ ์๋ํ์ง ์์์ ๋ฉ์ธ ๋ฉ๋ด์ ๋ง์ฐ์ค๋ฅผ ์์ง์ฌ๋ subMenu๊ฐ ๋ฐ๋์ง ์๋ ์ด์๊ฐ ๋ฐ์ํ๋ค. ์์ธ GNB์์ ์ฌ์ฉํ๋ LinkContext์ SuperLink๋ฅผ next/link๋ก ์ฒ๋ฆฌํ๋๋ฐ, next 12 version์์ mouseHover ์ด๋ฒคํธ๊ฐ ์ ๋๋ก ์๋ํ์ง ์๋ ๋ฌธ์ ๊ฐ ์๋ค. fix(Link): Do not ignore onMouseEnter prop with absolute href by ericmatthys ยท Pull Request #32012 ยท vercel/next.js Fixes #22733 Regardless of whether it's recommended that Link be used with e..
์์ฝ css ๋ด๋ถ์ font asset์ ๋ฐ์์ค๋ path๋ฅผ ์ ๋๊ฒฝ๋ก๊ฐ ์๋ ์๋๊ฒฝ๋ก๋ก ๋ฐ๊พธ๋ฉด ๋๋ค. ๋ฌธ์ css์ url๋ก ์ ์ํด ๋ font asset์ด ๊ฐ๋ฐ๋ชจ๋(dev)์์๋ ์ ์ ์ฉ๋๋ค๊ฐ ์ค์๋ฒ(production)์์ ๋ฐ์๋์ง ์๋ ์ด์ ์ค์ ๊ตฌํ /* style.css */ @font-face { font-family: spoqaSansNeo; font-weight: 700; src:url('/font/SpoqaHanSansNeo-Bold.ttf'); src: url('/font/SpoqaHanSansNeo-Bold.otf') format("opentype"), url('/font/SpoqaHanSansNeo-Bold.ttf') format("truetype"); } /* next.config..
Comment