웹 개발/소소한 팁, 버그 해결18 썸네일형 리스트형 [Next.js 14][React] API 두 번씩 호출되는 현상 [useEffect][Typescript] Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다. 나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다. 그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고) useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다. (대강 이런 느낌의 코드) const [refresh, setRefresh] = useState(true); useEffect(() => { if (refresh) { console.log("hello"); c.. 웹 개발/소소한 팁, 버그 해결2024. 3. 22. [Next.js 14] 간단하게 화면 새로고침하기 데이터가 업데이트 되거나 변경 사항을 반영해야 할 때 화면을 새로고침해야 하는 경우가 있다. 이럴 때는 아래와 같이 router.reload()를 사용하면 간단하게 화면을 새로고침할 수 있다. import {useRouter} from "next/navigation"; export default function Home() { const router = useRouter() return ( router.reload()}> 새로고침 ) } 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Typescript] 변수 타입 확인 방법 [Javascript] 변수가 boolean인지, string인지, 아니면 number인지 확인하고 싶을 때가 있다. 그럴 땐 아래와 같이 string 형태로 확인하면 된다. switch (typeof variable) { case "boolean": // variable is a boolean break; case "string": // variable is a string break; case "number": // variable is a number break; default: break; } 끗~ 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Next.js 14] 새 탭에서 링크 열기 [React] 태그에 target="_blank" 속성을 추가해준다. Google 도 마찬가지로 작성해주면 된다. Google rel="noopener noreferrer" 속성에 관한 설명은 아래 링크가 잘 설명하고 있어 첨부한다. 링크에 noopener noreferrer 사용하는 이유 얼마전 공신력 있는 어떤 단체의 HTML 오픈 소스를 보다가 rel="noopener noreferrer"라는 코드를 처음 보았습니다. noopener와 noreferrer는 어떤 역할을 하고 일반적으로 필요한 코드일까요❓ joshua-dev-story.blogspot.com 끗~ 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [CSS] link / anchor 태그 비활성화 [Tailwind CSS] 일단 영상부터 보고 시작하자. 보면 알겠지만, 햄버거 메뉴를 만든다고 어째저째 숨기고 보이고 하는 것 까지는 완료했는데, 숨길 때 자연스러운 애니메이션을 위해 display:hidden 대신 투명도를 0으로 만들면서 문제가 발생하였다. 바로, 버튼이 있는 곳을 호버하거나 클릭 후 드래그 했을 때 사진처럼 링크가 뜬다는 것이다. 태그 / 태그를 눌렀을 때 아무 동작도 안하기 + 마우스 커서 디폴트로 유지하도록 코드를 수정하였는데도, 위치를 예상해서 드래그 해보면 해당 현상이 발생했다. 간단하게 css 속성을 추가하여 해결할 수 있었으며, pointer-events 속성을 바꿔주면 된다. .header-container.hamburger .nav-container > a { @apply opacity-0; .. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [CSS] 아이콘 / 텍스트에 그라데이션(Gradient) 추가 [Tailwind CSS] 결론만 간단히. .gradient-text-and-icon { background: linear-gradient(91deg, #E05438 25.06%, #F41C33 62.44%, #D21FD6 94.29%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 웹 개발/소소한 팁, 버그 해결2024. 3. 20. 이전 1 2 3 다음
