프론트엔드24 z-index와 Stacking context 목차 - z-index 없는 Stacking - z-index 있는 Stacking - Stacking context (중요 이것 때문에 씀) z-index 없는 Stacking z-index와 Stacking context를 알아보기 전에 z-index를 사용하지 않았을 때, element들이 어떻게 화면에 쌓이는지 알아봅시다. html 파일 안에 element들은 아래와 같은 순서로 차곡차곡 쌓입니다. 1. root element 2. position을 정의 안한 element 3. position을 정의 한 element 참고로 position를 명시 안하면 기본적으로 static이 부여됩니다. 샘플 화면을 보죠. 아래 그림을 보면 하얀 배경은 위의 규칙 1에 따라 가장 아래에 쌓여있습니다. 이후 .. 2023. 8. 16. dynamic 클래스가 안될 때 아래처럼 rotate-[${변수}deg] 이런 식으로 변수를 사용해서 tailwindCSS 클래스를 사용하려고 하면 안 됩니다. for (let i = 0; i < count; i++) { const element = ( ); list.push(element); } 안 되는 이유는 tailwindCSS가 빌드 타임에 검사를 하는데 안 쓰는 클래스들은 제거하기 때문입니다. 제가 해결한 방법은 사용할 클래스들을 미리 작성해 두고, watilwind.config.js 파일에서 해당 파일을 명시하는 것으로 해결했습니다. 일단 유틸 파일로 빼두고요. // size.ts // rotate deg export const ROTATE_DEG = [ 'rotate-0', 'rotate-1', 'rotate-2', 'ro.. 2023. 8. 9. 나도 오픈소스 기여를 ?!?! (with react-query) react-query v5가 나와서 nextjs연습할 때 호다닥 써봤는데 react-query-devtools를 사용하려니깐 안 됐었다.. 진짜 별의별짓을 했는데도 안돼서 "react-query-devtools is not working in nextjs v13" 안된다고 이슈 올렸더니 다음 버전에 고쳐진다고 한다. 코드를 기여한 것은 아니지만 새로운 경험을 했다. 사랑해요 lachlancollins 해당 이슈 링크 https://github.com/TanStack/query/issues/5671 react-query-devtools is not working in nextjs v13 · Issue #5671 · TanStack/query Describe the bug react-query-devtool.. 2023. 7. 15. Server mutate시 react-query cache 사라짐 현상 문제 발생 nextjs에서 sever mutate를 이용하려면 useRouter()를 사용하여 페이지를 refresh를 해줘야된다. 근데 나는 react-query와 같이 사용중이었는데 문제가 발생했다. useRouter().refresh()를 하면 react-query의 캐시 데이터가 모두 사라졌다. 아래 사진을 잘 보면 button 클릭시 데이터들이 모두 지워짐 아래는 코드이다. 'use client'; import { useQuery } from '@tanstack/react-query'; import { useRouter } from 'next/navigation'; async function fetchTest() { return fetch('/api/t', { method: 'get' }).th.. 2023. 7. 15. 이전 1 2 3 4 5 6 다음
