본문 바로가기
반응형

전체 글

 (501)
[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..
[NextJS & Firestore] NextJS에 Firestore 연동해보기 오늘은 더미데이터를 Firestore로 이동해주는 작업을 했다. Firestore를 이용한 이유는 쉽게 데이터베이스를 구축할 수 있기 때문이다. Firebase 8버전을 써봤다가 9버전을 써봤다가.. 계속 에러를 만났다. 결국 가장 최신 버전을 사용하는데 성공했고, 연동함에 있어 버벅임이 조금 있었지만 연동 후 데이터 자체를 받아오는 작업은 그리 어렵지 않았다. 먼저, Firebase 사이트에 들어가 Firestore Database를 만들고, 데이터를 임시로 하나만 입력해놓았다. 이제 나의 리액트 프로젝트와 이 데이터베이스를 연동해야 한다. 프로젝트에 FirebaseConfig.js(이름은 아무거나 하면 됨)라는 파일을 하나 만들고, 다음과 같은 코드를 삽입해준다. 아래 코드는 프로젝트 설정에 들어가..
[Tailwind CSS] 테스트 상세/결과 컴포넌트(feat. SweetAlert2 & MUI Icon) 오늘은 테스트 상세 페이지 & 결과 컴포넌트를 다듬었다. 가운데로 정렬해주고, 텍스트를 감싸는 div에도 width를 설정해주어 글자가 넘치면 줄바꿈 되도록 하였다. 그래도 몇 일 tailwind를 썼다고 처음보다는 덜 뚝딱대는 모습을 보여 뿌듯했다. 익숙해지기만한다면 tailwind처럼 편한 방법이 또 있을까 싶다. 참고로 아이콘은 Mui Icon을 사용해서 빠르게 넣어주었다. 공유하기 기능에 적용시킬 예쁜 alert창 라이브러리를 찾았다. 공유하기 버튼을 누르면 url이 클립보드로 복사되도록 구현했다. const handleCopyURL = () => { const currentURL = window.location.href; navigator.clipboard .writeText(currentURL..
반응형

티스토리툴바