๋ฌธ์ ์ํฉ 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..
์ํฉ next.js์์๋ SSR์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ url์ ์๋ query๋ฅผ ๋ฐ์์ฌ ์๊ฐ ์๋ค. ํด๊ฒฐ 1 next page์์ getServerSideProps ํจ์๋ฅผ ์ด์ฉํด query๋ฅผ ๋ฐ์์ฌ ์ ์๋ค. const Page: NextPage = ({ params }) => { } export async function getServerSideProps (context) { const req = context.req; const params = new URLSearchParams(req._parsedUrl.query); return { props: { params } }; }โ ํด๊ฒฐ 2 ํด๊ฒฐ 1์ ๋ฐฉ๋ฒ์ผ๋ก page ๋ด๋ถ์์๋ url parameter๋ฅผ ์ฌ์ฉํ ์ ์๋ค. ํ์ง๋ง _app.tsx์ ๊ฐ์ด ne..
์ ํ์ ์ถฉ๋ ์ /*css*/ .special{ color: blue; } p{ color: red; } css๋ cascade์ specificity๋ผ๊ณ ๋ถ๋ฆฌ๋ rule์ ๊ฐ์ง๊ณ ์๊ณ , ํด๋น rule์ ๋ฐ๋ผ ์ถฉ๋ ์ ๋ ๊ฐํ ์ ํ์๊ฐ ์ ์ฉ๋๋ค. cascade rule : ๋ค์ ์ ์ฉ๋ ์คํ์ผ์ด ์์ ์คํ์ผ์ ๋ฎ์ด์ด๋ค. specificity rule : ์์๋ฅผ ๋ ํน์ ํ๋ ์ ํ์๊ฐ ์คํ์ผ์ ์ฐจ์งํ๋ค. ๋ฐ๋ผ์ ์์ ์์ ์์ specificty rule์ ์ํด color๋ blue๊ฐ ๋๋ค. specificity specificity๋ 4๊ฐ์ง์ ๋จ์๋ก ์ธก์ ๋๋ค. Thousands : style ์์ฑ ๋ด์ ์ ์๋์ด ์๋ style(inline style)์ผ ๊ฒฝ์ฐ Hundreds : ID selector๋ฅผ ์ฌ์ฉํ์ฌ..
๋ง์ผ Typescript๋ก ๊ฐ๋ฐํ๋ ์ค์ ์์ฃผ ์ ์์ฑ๋ JS ๋ชจ๋์ ๊ฐ์ ธ์์ ์ฐ๊ณ ์ ํ๋ค๋ฉด, ํด๋น ๋ชจ๋ ๋ด์ ํจ์๋ typescript๋ก ์ ์๋์ด์์ง ์๊ธฐ ๋๋ฌธ์ ์ปดํ์ผ ๊ณผ์ ์์ ์ค๋ฅ๊ฐ ๋ฌ๋ค. ๋ชจ๋์ด ํด๋น ์์ฑ์ ๊ฐ์ง๊ณ ์์์๋ type์ด ์ ํด์ ธ์์ง ์์์ ๊ฐ์ง๊ณ ์์ง ์๋ค๊ณ ํด์ํ๋ ๊ฒ์ด๋ค. ๋ค์๊ณผ ๊ฐ์ด declare ํค์๋๋ฅผ ์จ์ ์ ์ํด๋๋ฉด type์ด ์ธ์๋์ด typescript compiler๊ฐ ํด์ํ ์ ์๊ฒ ๋๋ค. declare let module: any ๊ฐ๋จํ ๋งํด์ ์ปดํ์ผ๋ฌ์๊ฒ "์ด๊ฑด ์ด๋ฏธ ์กด์ฌํ๊ณ ๋ค๋ฅธ ์ฝ๋์์ ์ฐธ์กฐํ ์ ์๋ค."๋ผ๊ณ ์ค๋ช ํ๋ ๊ฒ์ด๋ค.
๋ฐฐ๊ฒฝ ํจ์๋ค๋ผ๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ๊ณต์ ํ๊ณ ์ถ๋ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น? ์ ์ญ ์ค์ฝํ์ ํด๋น ๋ฐ์ดํฐ๋ฅผ ๋๋ค๋ฉด ๋ค๋ฅธ ๋ด๋ถ ์์์ ์ํด ๋ง๊ฐ์ง ์๋ ์๊ณ , ์์๊ฐ ๋ค์์ผ ์ ์ญ ์ค์ฝํ์ ์์๊ฐ ์กด์ฌํ์ง ์์ ์๋ ์๋ค. ๋ฐ๋ผ์ ๋ชจ๋์ด๋ผ๋ ๋ฐฉ์์ ์ด์ฉํ๋ฉด ๊ฐ๊ฐ ํ์ํ ๋ชจ๋์ importํ์ฌ ์ฌ์ฉํจ์ผ๋ก์จ ์ด๋์์ ์๋ฌ๊ฐ ๋๋์ง ํ์ ํ๊ธฐ ์ฝ๋ค. ๋ชจ๋์ ๋ง๋ค๊ณ import, export ํ๋ ์์คํ ์ ๋ชจ๋ ์์คํ ์ด๋ผ ํ๋๋ฐ ํ์ฌ 2๊ฐ์ง์ ๋ชจ๋ ์์คํ ์ด ํ๋ฐํ๊ฒ ์ฌ์ฉ๋๊ณ ์๋ค. CommonJS ES modules ์ฐจ์ด์ ๊ธฐ์ด ๋ฌธ๋ฒ CommonJS const module = require('์ด์ฉ๊ตฌ'); const { func } = require('์ด์ฉ๊ตฌ'); module.exports = '์ด์ฉ๊ตฌ'; // default export..
๋ฌธ์ ์ํฉ React context ์ฌ์ฉ ์ ๊ธฐ์กด ์ฝ๋ ๊ตฌ์ฑ์ด context ๋ด๋ถ ์์๊ฐ ๋์ด๋ ์๋ก ๋ณต์กํด์ ธ์ ๋ฆฌํฉํ ๋งํ๋ ค ํ๋ค. ๊ธฐ์กด ๊ตฌํ // ๊ตฌ์ฑ const UserContext = createContext({}); const SignInContext = createContextvoid>(()=>{}); export const UserContextProvider = ({ children }) => { const [user, setUser] = useState(); const signIn = () => {}; return ( {children} ); } export function useUserState() { const context = useContext(UserContext); return c..
๋ฌธ์ : ๋๋ฉ์ธ(B)์ด ๋ณธ ์๋น์ค ๋๋ฉ์ธ(A)์์ ๋ถ๋ฆฌ๋์ด ๋์จ ์ํฉ์์ ์ ๋๋ฒ์ ๋งํฌ๊ฐ ์ค๋์. ์๋ ์ฌ์ฉ์์ ์ ํธ์ ๋ฐ๋ผ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์์ ์ด๋๋๊ฑฐ๋ ์ฑ์ ๋์์ผ ํ๋๋ฐ, ๋ฌด์กฐ๊ฑด ์ฑ์ผ๋ก ์ฐ๋๋๋ ํ์ ๋ฐ์. ์์ธ : ์ ๋๋ฒ์ ๋งํฌ๋ ๋ค๋ฅธ ๋๋ฉ์ธ์ ๋ํด ๋ฌด์กฐ๊ฑด ์ฑ์ผ๋ก ์ฐ๋๋๊ฒ ์ฒ๋ฆฌํ๋ค. ํด๊ฒฐ : ์ ๋๋ฒ์ ๋งํฌ๋ฅผ ๋ค๋ฅธ ๋๋ฉ์ธ์ ๋ํด ์ฒ๋ฆฌํ ์ ์๋ค๋ฉด ๊ทธ๋ ๊ฒ ์ฒ๋ฆฌ. ์๋๋ผ๋ฉด URI scheme์ ์ด์ฉํ์ฌ ์๋ฌ ์ ๋์์ ๊ตฌํํ๋ ์์ผ๋ก ์์ . ๋ฅ๋งํฌ ๋ฅ๋งํฌ๋ ํน์ ์ฃผ์ or ๊ฐ์ ์ํด ์ฌ์ฉ์๊ฐ ์ฑ ๋ด์ ํน์ ํ๋ฉด์ผ๋ก ์ด๋ํ๋ ๊ธฐ๋ฅ์ ๋งํ๋ค. ๋ฅ๋งํฌ๋ 3๊ฐ์ง ๋ฐฉ์์ผ๋ก ๊ตฌ๋ถ๋๋ค. URI scheme : ์ฑ์ URI scheme ๊ฐ์ ๋ฑ๋กํ๋ ๋ฅ๋งํฌ ํน์ scheme ๊ฐ์ ์ ๋ ฅํ๋ฉด (ex_ ohouse:/..
Comment