나만보는개발공부블로그

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

개요 인터넷에 접속하는 거의 모든 사람들은 한 번쯤은 브라우저에 https://www.google.com을 입력한 적이 있는데, 엔터키를 누른 직후에 무슨 일이 일어나는지 궁금할것이다. 여러 사이트 및 블로그를 참고하며 정리해볼려고합니다. 브라우저는 무엇일까? 브라우저는 기본적으로 인터넷에 액세스할 수 있게 해주는 애플리케이션입니다. 일반적인 예로는 사람들이 많이쓰는 Google Chrome, Firefox, Vivaldi, Safari, Opera, Edge 등이 있습니다. 위에서 설명한 웹 브라우저에 https://www.google.com과 같은 URL(Uniform Resource Locator)을 입력하고 엔터키를 누르면 그 결과가 브라우저(사용자 화면)에 표시되기 전에 많은 작업이 발생할것입니..

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..