프로젝트/오심테(오늘의 심리테스트) (24) 썸네일형 리스트형 [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.. [NextJS] Image 컴포넌트 warning Image 관련하여 다음과 같은 warning이 떴다. 나는 분명 Image에 width와 heigth를 잘 지정해준 것 같은데도 저런 경고가 뜨니 의아했다. Next Image has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio. 별거 별거 다 해봐도 해결이 안됐는데, 다음 글에 있는 답변을 보고 해결했다. https://github.com/vercel/next.js/issues/40762 [NEXT-649] n.. [NextJS & Firestore] getStaticPaths() 사용하여 동적 라우팅해주기 오늘은 각 테스트를 클릭 시 그 테스트의 세부사항을 가져올 수 있도록 동적 라우팅을 처리해줄 것이다! 물론 파이어스토어를 사용하여 데이터를 받아올 예정이다. 코드는 어제와 비슷하다. 다른 점은 딱 하나, getStaticPaths라는 메서드를 하나 더 썼다는 것이다. getStaticPaths 또한 NextJS에서 SSG를 위해 제공하는 메서드이다. 동적 페이지에 필요한 메서드이며 NextJS에게 어떤 동적 파라미터 value의 어떤 페이지가 pre-generate 되어야할지 알려준다. paths 프로퍼티의 값이 되는 배열의 요소인 객체의 params의 값에 해당하는 페이지를 미리 생성해둔다. 각각의 값 params은 페이지 이름에 사용된 파라미터와 일치해야 한다. fallback(필수)은 특정 path.. 이전 1 2 3 다음
