본문 바로가기

전체 글54

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.
[바닥부터 만들기] 리액트 없이 리액트 사용하기 - 1 (하드코딩) 리액트 없이 리액트 만들어보기 대작전. 일단 리액트 없이 하드 코딩된 버전으로 “Hellow”를 브라우저에 띄어 봅시다. 만약 리액트 16.8 버전 기준 리액트 코드를 DOM으로 렌더링을 한다면 아래 코드처럼 많이 작성했을 거예요. (리액트 18 버전에서는 createRoot(element). render() 사용) const ReactDOM = {}; // import 했다고 가정합시당. 🥰 const element = Hello; const container = document.getElementById('root'); ReactDOM.render(element, container); JSX 코드 변환해 주기 const element = Hello; 이 부분은 바벨이 자바스크립트 코드로 변환해 줍니다.. 2023. 8. 3.
나도 오픈소스 기여를 ?!?! (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.

티스토리툴바