라이브러리

Auth.js(Next-Auth)의 useSession vs getSession

useSession()- 페이지 로딩없이 session을 업데이트 할 수 0- 만일 인수를 보내지 않으면 서버로부터 리로드 된다.- 만일 session에서 데이터를 변경하고 싶은 경우// pages/profile.tsximport { useSession } from "next-auth/react"export default function Page() { const { data: session, status, update } = useSession() if (status === "authenticated") { return ( Signed in as {session.user.name} {/* update함수를 사용해서 백엔드에 보냄 */} upda..

Avatar 컴포넌트 안에서 이미지 비율 안깨지게 하기 with Shadcn/ui

(Next.js app router, Shadcn/ui 라이브러리 사용중)Shadcn/ui 라이브러리에서 제공해주는 기본 Avatarimport { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"(...) CN 부모요소(Group) 추가 Shadcn/ui 는 기본적으로 tailwind CSS 를 사용할 수 있다. 부모 요소인 Avatar에 group을 지정해주고 image를 넣는 부분에는 'object-cover'을 적용해주면 사진이 비율 안깨지게 들어온다.  // size는 가로 세로 크기 CN // 이미지 alt

React-query를 이용한 무한 스크롤 구현 with react-intersection-observer

드디어 기획자님이 꼭 원하시던 무한 스크롤 구현을 끝냈다. 후기를 먼저 말하자면, 역시 강의를 보는 것과 직접 하는 것은 큰 차이가 있다. 제로초님의 next.14 강의중 react-query를 이용한 무한스크롤 구현을 봤을 때는 굉장히 쉽고 간단하게 느껴졌다. 그래서 직접 무한스크롤을 구현하려다 애를 먹고 있던 중 라이브러리를 사용하게 되었다. 하지만 강의 프로젝트의 세팅과 내 프로젝트의 세팅은 몇가지 차이가 있었다. 1. 강의는 app router를 사용하지만, 나는 pages router를 사용한다. 2. 강의의 무한 스크롤용 데이터는 쿼리로 cursor=number를 받아 몇 개씩 받아올지 넘기지만, 내 백엔드 api의 url은 쿼리로 base=number&limit=number 즉, base~l..

요즘 Redux 대신 React-Query(tanstack-query)가 대세인 이유

요즘 프로젝트에 무한스크롤을 구현하던 중이다. 이 프로젝트는 블로그 형식에 현재 상태관리로는 zustand를 사용하고 있으며 실제 출시(?)를 염두에 두고 있다. 그래서 나중에 트래픽이 많아질 것을 염려해 무한스크롤에 라이브러리를 쓰지않고 직접 구현하려고 시도했다. 하지만 실패했고, react-query를 궁금하던 찰라에 react-query의 InfiniteQuery를 무한스크롤에 많이 사용하기에 한번 조사해보았다. 도데체 왜 요즘에 react-query라는 말이 자주, 그리고 당연하게 들릴까? 1. redux는 컴포넌트간에 데이터를 공유하는 것이다. - 캐싱이 안됨 2. react-query는 서버 데이터를 가져오는 것이다. 1) 캐싱을 잘 해준다. -> 트래픽관리 -> 비용 감소 - 캐싱을 해놓고 ..

티스토리 hELLO 스킨 + overstackflow-dark highlight 스킨 적용기 | 라이트 모드일 때 바뀌는 폰트 컬러 수정

[hELLO스킨에서 글쓰기나 관리자페이지로 가려면 "Q"를 누르면 쉽게 갈 수 있다.] 구글링 할 때마다 자주 보이는 hELLO 티스토리 스킨이 탐나 나도 적용시켜 보았다. 스킨이 바꼈기 때문에 코드블럭 highlight를 다시 커스텀 해주어야했다. 이번에는 overstackflow-dark가 예뻐보여서 구글링해서 따라 적용했다. 그런데 문제가 생겼다. 아래를 보고 overstackflow-dark를 고른건데 구글링을 통해 적용한 내 블로그에는... 아래처럼 보라색으로 뜨는 것이다. 확인해보니 다크 모드를 누르면 내가 원했던 위의 코드 highlight가 나왔다. 라이트 모드에서 색상이 바뀌는 것을 확인하고 귀찮지만 개발자도구를 열었다. 여기서 프론트엔드 개발자의 면모가... 발휘되나,,,? 위의 보라색..

라이브러리 현재 트랜드 확인하는 사이트

-------------------------------------------------------------------------------------------------------------- 아래의 사이트에서 현재 많이 쓰이는 라이브러리들을 비슷한 기능을 가진 라이브러리들과 자동으로 비교를 할 수 있다. 뭐가 많이쓰이나? 이리저리 묻지 않고 이 사이트의 통계를 통해서 판단하면 될 것 같다. npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner..

MUI Tooltip custom 적용 안 될 때 | componentsProps

진짜 별 난리를 다했는데 … mui v5 에는 이 props를 사용하면 된단다… 찾은방법 : “How to custimize mui tooltip” 구글링 -> stack overflow에서 최신글 선택-> 댓글 열심히보기 (개발자는 영어를 가깝게 지내자… ) 이 답변을 가지고 바로 적용해봤다… 아무리 해도 안되던 font size 가 바꼈다… 한시간 반동안 찾았는데… styled, createStyle 겁나 분석했는데 아무리해도 기본 css가 박힌것 처럼 font css가 먹히지 않았었다. (아래 두개 사진 참고) 전체코드는 아래와 같다. import tw from "twin.macro"; import Tooltip from "@mui/material/Tooltip"; import Questionmar..

MUI Menu anchorEl 사용 이유

Mui menu 를 가져와서 쓰는데 매우 머리가 아프다... mui는 커스텀을 하려면 뭐 하나를 건드리기가 쉽지 않고 연결되어있어 결국은 그 전체를 다 파악해야한다... (이거 뭐 쉽게 가려고 라이브러리쓰다가 결국 다 공부해야되는 마법) anchorEl 이 자꾸 따라다니는데 한글 구글링이 없길래 슬쩍 남겨본다. mui menu 활용법은 다음 글에 파악해서 남겨놓을 예정...궁금한사람 있으면 좋아요공감꾸욱.. anchorEl은 Material-UI의 Menu 컴포넌트에서 메뉴를 나타내는 버튼이나 아이콘과 연결된 엘리먼트를 가리키는 React state 변수. 메뉴가 어디에서 열리는지 정의하고, 열린 메뉴의 위치를 결정하는 데 도움 보통 Menu 컴포넌트의 anchorEl prop에 이 변수를 할당한다. e..