Next.js2 [TIL] 로딩 상태 구현이 안될 때 (async/await의 중요성) 🚨문제: 로그인이 되어 있고 구독한 인플루언서가 있는데 렌더링 시 "로그인 정보가 없습니다."와 "구독한 인플루언서 정보가 없습니다." 안내문 모두 렌더링이 되고 마지막에 실제 정보가 뜸 ❓고민1. 데이터를 fetch로 가져올 때 useQuery를 쓰면 데이터를 더 빨리 가져오지 않을까 싶어 바꿔봤으나 안됨.2. return문의 삼항연산자 로직 순서를 바꾸면 렌더링 순서도 바뀔까 싶었지만 안됨. ✔️해결먼저 오류 코드를 보면 useEffect(() => { const fetchData = async () => { if (user) { await getSubscribeData(); } setIsLoading(false); }; fetchData().. 2024. 8. 27. [TIL] next.js Image 태그로 배경 이미지 적용하기 최종프로젝트를 진행하며 UI/UX 디자이너님이 피그마로 디자인을 해주셨다.css로 구현하기 어려운 디자인을 png 파일로 저장하여 해당 이미지를 불러와 배경 이미지로 적용해보자!next.js는 Image 태그를 제공하는데 이미지를 최적화해주는 장점이 있다. 의 파란 영역에 이미지를 넣어야 하는데 영상에 보는 것과 같이 모바일 환경에는 하단에 메뉴바가 고정 되어있어 메뉴바를 가리지 않게 신경 써야 했다. 변경 전 코드"use client";import Image from "next/image";import defaultImg from "../../../public/images/default.png";import Icon from "../../../public/icon/rightArrow.svg";i.. 2024. 7. 31. 이전 1 다음
