프로젝트 (42) 썸네일형 리스트형 [NextJS] 이미지 로딩 애니메이션 구현하기 NextJS는 SSR을 제공하기 때문에 Image 컴포넌트를 사용하면 로딩이 조금 느리게 된다는 것을 체감할 수 있다. 사용자 입장에서는 클릭했는데 아무 변화가 없으니 다시 클릭해야 하나 어쩌나 헷갈릴 수도 있다. 그래서 간단하게 이미지 로딩 애니메이션을 구현해보기로 했다. 먼저, global.css 파일에 해당 코드를 추가해준다. .animation { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; transform-origin: 50%; margin-left: -21px; margin-top: -21px; border-radius: 50%; border: 4px solid plum; border-top-color: transp.. [NextJs & Recoil] NextJS에 Recoil 적용하여 전역 상태 관리하기 props drilling으로도 해결이 안되는 문제는 꼭 있다. 오늘 그 문제가 발견되었다. 테스트 중 일 때 즉 test id 별 라우팅 되어 testing 페이지를 보고 있을 때에 네비게이션 바에 있는 카테고리를 누르면 메인 페이지로 이동하여 카테고리 별 테스트 목록을 볼 수가 없었다. 해결해보려고 props drilling을 해볼까 라우팅 시 props를 전달해볼까 별의별 생각을 다해보았지만 결론은 하나였다. 카테고리를 전역 상태로 관리해서 어느 페이지에서도 카테고리를 변경하여 메인페이지로 이동할 수 있도록 해야 한다. 지난번 프로젝트에서도 이용했던 Recoil을 다시 한번 꺼내게 되었다. Recoil은 간단하고 빠르게 적용시킬 수 있다는게 매우 큰 장점인 것 같다. 실제로 이 프로젝트에 Recoi.. [React] 함수에 useCallback 사용하여 리팩토링 해보기 예전에 진행했던 맛피 프로젝트에서 팀원분의 코드를 보던 중, 팀원분께서 메서드에 useCallback을 사용하시는 것을 보았다. 그 팀원분이 왜 useCallback을 사용하는지 알아보고 나도 적용해보고 싶었는데, 그때 당시에는 시간도 너무 촉박했을 뿐더러 useCallback과 useMemo에 대해 대략적인 느낌만 알고 있었던 터라 사용해야겠다는 생각 자체를 못해서(?) 적용을 못해본채로 넘어가 아쉬웠었다. 기회가 된다면 코드를 다시 보고 useCallback을 사용할 수 있는 부분은 사용해보도록 리팩토링 하고 싶다(그래서 언제할건데^^?하긴 할거냐구.) 그래서 이번 프로젝트에서는 useCallback을 꼭 한 번 사용해보기로 했다. 작은 부분이라도! 먼저 useCallback이 무엇인지 알아보자. u.. [NextJS & Firestore] 인기 Top3 테스트 목록 보여주기 오늘은 조회수 별 인기 Top3인 테스트들을 보여주는 기능을 만들었다. 먼저 index.js의 getStaticProps에서 또 하나의 props를 추가했다. 처음엔 topLists를 lists를 활용하여 조회수 별 내림 차순을 하도록 만들었다. const lists = data.docs .map((doc) => ({ ...doc.data(), id: doc.id })) .sort((a, b) => b.id - a.id); // id별 내림차순 const topLists = lists .sort((a, b) => b.views - a.views) .slice(0, 3); 이렇게 했더니 무슨 이유인지 lists에도 영향이 가서...조회수가 높은 것부터 보여지기 시작했다. 이유는 모르겠다. 그래서 다음과 같.. [NextJS & Tailwind CSS] scroll smooth 적용하기(되는거야 뭐야?) 심리테스트 목록을 스크롤할 때 지금보다 부드럽게 스크롤 되었으면 하여 Tailwind CSS 홈페이지를 둘러보다가 'Scroll Behavior' 인덱스를 보게 되었다. html 태그의 className으로 지정해주도록 되어있어서 그런가 div 같은 다른 태그들의 className에 추가해주면 적용이 되지 않았다. 하지만 어디에 html 태그가 있는지 찾을 수 없었다. 있긴한건가? 나와 같은 고민을 했던 글도 찾았다. https://stackoverflow.com/questions/71125642/how-to-add-tailwind-css-scroll-smooth-class-to-next-js How to add Tailwind CSS scroll-smooth class to Next.js I want .. [NextJS] Image 컴포넌트 Legacy prop 리팩토링 처음에는 테스트 아이템 컴포넌트의 코드를 다음과 같이 구성하여 모든 컴포넌트에서 이미지가 차지하는 비율이 같도록 설정해주었다. 이렇게 짜도 정상적으로 작동은 되지만 경고 문구로 layout과 objectFit이 Legacy 코드라는 말이 계속 뜨고, VSCode에서도 해당 props에 자꾸 취소선이 그어져 나왔다. 이 경고 문구를 없애기 위해 다음과 같이 두 속성을 쓰지 않는 방향으로 코드를 리팩토링 하였다. paddigBottom을 통해 부모 요소가 이미지의 세로 비율을 고정시켜주는 부분이 상위 div로 옮겨졌고, 이미지 컴포넌트를 감싸는 div 컴포넌트를 하나 만들어 position을 absolute, inset-0 처리를 통해 부모 요소가 차지하는 자리에 이미지가 꽉 차게 들어설 수 있도록 했다. [warning] has "fill" but is missing "sizes" prop. Please add it to improve page performance NextJS를 쓰고 나서 Image 컴포넌트와 관련한 Warning이 많이 뜬다. 속도와 사용자 경험을 중시하는 느낌이랄까? Warning이 뜨는 곳은 Test Item 컴포넌트였다. 왜 이런 경고 문구가 뜨는지 바로 지피티에게 물어봤다. 컴포넌트에서 warning이 뜨는 이유는 sizes 속성이 없는 경우, 브라우저가 이미지를 로드할 때 모든 이미지 크기를 가져오기 위해 추가 요청을 보내야 하기 때문입니다. 이는 성능 저하를 유발할 수 있습니다. sizes 속성은 브라우저에게 이미지가 어떤 크기로 표시되는지 알려주는 역할을 합니다. 브라우저는 해당 정보를 통해 이미지를 최적으로 처리하고 필요한 크기만 요청하여 효율적인 로딩을 할 수 있습니다. 따라서, sizes 속성을 추가함으로써 브라우저에게 이미지 .. [NextJS] 카테고리 별 심리테스트 리스트 보이기 오늘은 카테고리 별 심리테스트 보여주기를 해볼 것이다. 규모가 큰, 백엔드 개발자 분들과 함께한 프로젝트였다면 카테고리를 누를 때마다 서로 다른 url로 요청이 가는 식으로 처리가 되었을텐데, 지금은 연습하는 토이프로젝트이니 전체 테스트 리스트에서 filter 처리를 해주는 방식으로 구현하였다. 원래는 Layout 컴포넌트에 헤더와 네비게이션 바 컴포넌트를 모두 넣었다가 index.js에서 카테고리 관련 state 관리를 해주기 위해 뺐다. 사실 그냥 Layout 컴포넌트에 있었어도 상관은 없었을텐데, 테스트 중일 때는 헤더만 보이는게 나을 것 같기도하고.. 해서 그냥 빼줬다. // layout.js import Header from "./header"; import Head from "next/head.. 이전 1 2 3 4 5 6 다음
