Frontend 2

Next.js14 에서 SVG 이미지 색상을 동적으로 변경하는 방법

SVG 색상 변경 문제개발을 하다 보면 SVG 파일의 색상을 상황에 따라 바꿔야 할 때가 있습니다. 아이콘이나 로고 색상을 테마에 맞춰 변경하거나, 사용자 인터랙션에 따라 유연하게 조절하고 싶은 경우도 있을 거예요. 저의 경우 종이비행기 SVG 이미지를 만들었는데요. 배경색과 그림자색을 동적으로 할당하여 사용자에게 시각적인 즐거움을 주고 싶었습니다.   하지만 그렇다고 매번 SVG 코드를 수정하는 것은 번거로운 일이죠.🥵 한 번 생각해보세요. 프로젝트에서 SVG를 사용하고 있고, 그 색상을 자주 변경해야 한다면 어떻게 하시겠어요? SVG 파일을 열어서 직접 fill 속성을 바꿔주나요? 아니면 특정 상황마다 다른 색상으로 변환된 이미지를 새로 준비하나요? 이 글에서는 SVG의 색상을 동적으로 변경하는 방..

Default Import 와 Named Import 의 Import 방식 차이

Next.js 를 새롭게 배우고 있는데 함수를 Import 하다가 뭔가 생긴게 이상하다 싶어서 알게된 Default Import와 Named Import. 그래서 알게된 것을 글로 정리 해보았다.  Default ImportDefault Import는 파일에서 하나의 컴포넌트를 기본으로 내보내고, 이를 가져올 때 사용하는 방식이다. 예를 들어, components/todo.tsx 파일에서 Todo 컴포넌트를 기본으로 내보낼 수 있다. // components/todo.tsxexport default function Todo() { return Todo Component;} 그리고 아래 예시처럼 Todo 컴포넌트를 가져올 수 있다.// app/page.tsximport Todo from "../com..