나만보는개발공부블로그

1. display:none 해당 요소는 렌더링 트리에서 제거되어 이벤트 동작이 불가능하다. HTML은 여전히 소스 코드에 있지만 공간을 차지하지 않는다. 아예 사라지게 하는 것 보이지도 않고 해당 공간도 존재하지 않게 된다. 1 2 3 2. visibility: hidden 렌더링 트리에 존재하므로 이벤트 동작은 가능하다. 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 1 2 3

Tailwind css 채택 이유? 이전에는 styled-components 를 사용하여서 프론트엔드 스타일링을 처리했는데 이번 nextjs doc를 살펴보면서 css-in-js에서는 server component에 지원되지 않는다고 하여서 nextjs에서 뭔가 밀어주고 있는듯하고 자체적인 config도 지원해주는 tailwind css를 새로운 사이드 프로젝트에 채택하기로 하였다. redit에서도 tailwind css를 사용해서 빠른 스타일링 개발을 할 수 있다고 개발자들이 이야기 하고 있다. https://www.reddit.com/r/nextjs/comments/14qhjmq/next_css_module_vs_tailwind/ From the nextjs community on Reddit Exp..

staleTime 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간 fresh 상태일때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않는다. 데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다. cacheTime 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간 쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime만큼 유지된다. cacheTime이 지나면 가비지 콜렉터로 수집된다. cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다. cacheTi..

Next.js 프로젝트 구성은 어떻게 될까? 프로젝트를 구성할때 nextjs에서 폴더 및 파일에 대해서 살펴보자면 최상단 폴더 구성 - app, page, public, src로 최상위 파일 폴더 이름으로 구성되어있다. 최상단 파일 구성 - next.config.js, package.json, instrumentation.ts, middleware.ts, .env 등으로 구성되어있다. next.config.js nextjs를 위한 구성 설정 파일 package.json 프로젝트 설치파일들 의존성 및 스크립트 실행 설정 파일 instrumentation.ts OpenTelemetry 와 Instrumentation을 구성하는 파일 - OpenTelemetry의 경우 nextjs의 성능 개선을 위한 모니터링..

create-next-app Nextjs를 구성할 때 앱을 구성하기 위한 기초 설정들(eslint, alias, tailswind css, typescript)를 편하게 설정해서 nextjs 앱을 만들어주는 CLI라고 할 수 있다. npx create-next-app@latest or yarn create next-app 대화형 설치 방식 위의 명령어를 실행하게 되면 아래와 같이 여러 기초 설정들을 설정할지에 대한 정보들을 알려준다. 그래서 더 간편하게 앱을 구성할 수 있다고 할 수 있다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Woul..

Observer란? 흔히 Observer패턴이라고 객체의 상태가 변화하는것을 관찰 및 감시하기 위한 것이라고 생각하면 된다. MuationObserver와 ResizeObserver? React에서의 컴포넌트에 height이나 width의 변화감지가 필요해 검색해본 결과 MutationObserver와 ResizeObserver를 발견할 수 있었다. MutationObserver의 경우 DOM(DOM 3)에서의 특정 노드에 대한 변화를 감지할 수 있는 Web API이라고 하고 값으로는 속성값, 텍스트, 자식노드변화가 있다. ResizeObserver의 경우는 DOM에서의 크기 변화에 특성화되 감지할 수 있는 Web API다. 크기 변화의 값에는 border-box, content-box, SVGEleme..