본문 바로가기

분류 전체보기50

Tanstack query에서 Hydration - SSR Next.js로 프로젝트를 진행하다가 Tanstack query를 사용시 클라이언트 컴포넌트가 된다는 것을 알았다.Tanstack query를 쓰더라도 서버 컴포넌트로 만들 수 없을까? 하는 생각이 들었다. 그러다가 나는 왜 굳이 서버 컴포넌트를 고집하는가? 하는 생각이 들면서 다시 정리를 해봤다.  [ 서버 컴포넌트를 사용하는 이유 ]SEO 최적화서버에서 HTML을 생성해 클라이언트로 전달하면 검색 엔진 크롤러가 더 쉽게 페이지 내용을 인덱싱 가능. 이는 검색 엔진 최적화(SEO)에 도움이 됨.빠른 초기 로드 속도클라이언트에서 JavaScript가 실행되기 전에 미리 렌더링된 HTML을 제공함으로써 초기 로드 속도가 빨라짐. 사용자는 더 빠르게 콘텐츠를 확인 가능.데이터 페칭 효율성서버에서 데이터 페칭.. 2024. 7. 10.
캐러셀 캐러셀을 들어만 봤지, 한 번도 만들어본 적이 없었는데 이번 기회에 배워본다! 캐러셀(Carousel)은 웹 디자인과 사용자 인터페이스(UI) 디자인에서 흔히 사용되는 구성 요소 중 하나다. 캐러셀은 여러 콘텐츠 아이템(이미지, 텍스트, 카드 등)을 순서대로 표시하며, 사용자가 이전 또는 다음 버튼을 클릭하거나 자동으로 아이템이 순환되도록 하는 방식으로 작동한다. 캐러셀은 종종 이미지 슬라이더(Image Slider)라고도 불린다. 캐러셀의 주요 특징연속적인 순환: 캐러셀은 콘텐츠 아이템이 끝없이 순환되도록 설계된다. 사용자가 마지막 아이템에 도달하면, 다시 첫 번째 아이템으로 넘어간다.내비게이션 버튼: 사용자는 일반적으로 이전 또는 다음 버튼을 클릭하여 원하는 아이템으로 이동할 수 있다.자동 재생: 많.. 2024. 7. 9.
Firebase + Chat 웹 트러블슈팅 회원가입 후 자동으로 로그인이되면서 (firebase는 회원가입 시 바로 로그인이된다.)바로 채팅화면으로 넘어갈 시, 프로필 이미지랑 닉네임이 뜨지 않는 문제가 있었다.  회원가입이나 로그인을 하고 인증된 사용자가 존재하면채팅 페이지로 넘어가도록 구현하기로 생각했다. 회원가입, 로그인 컴포넌트는 따로 있고useAuth 훅을 만들어서 전체 컴포넌트를 감싸는 부모 컴포넌트인Layout 컴포넌트에 훅이 실행되도록 작성했다.  콘솔을 찍었을 때 user의 uid는 출력이되는데 프로필 이미지와 닉네임이 전혀 찍히지 않았다.useAuth 훅에서도 일단 user가 있으니까 인증된 사용자를 감지하고 채팅 페이지로 넘어가긴했지만프로필 이미지와 닉네임은 null값이어서 화면에 표시되지 않았다.  문제는 회원가입 로직에 있.. 2024. 7. 1.
Absolute로 지정된 요소의 부모는 Relative - CSS 레이아웃 이해하기 웹 개발을 하다 보면 다양한 CSS 속성을 사용해 요소를 배치하게 됩니다.그 중에서도 position 속성은 레이아웃을 조정하는 데 매우 중요한 역할을 합니다.이번 글에서는 absolute로 지정된 요소와 그 부모 요소가 relative일 때 어떻게 동작하는지에 대해 알아보겠습니다. Absolute와 Relative의 차이먼저 position 속성의 기본적인 개념을 살펴보겠습니다.relative: 요소 자신을 기준으로 위치를 조정합니다. 즉, 원래 위치를 기준으로 top, right, bottom, left 값을 이용해 이동할 수 있습니다.absolute: 가장 가까운 relative, fixed, sticky 속성이 적용된 조상 요소를 기준으로 위치가 결정됩니다. 만약 그런 조상 요소가 없다면 init.. 2024. 6. 19.

티스토리툴바