코드로 우주평화

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

최근 프로젝트에서 두 개의 버튼 메뉴를 만들었습니다. 사용자가 어떤 페이지에 있는지에 따라 버튼의 활성화 상태를 변경해야 했죠. 처음에는 useState로 두 버튼의 상태를 관리했어요. 하지만 사용자가 뒤로 가기 버튼을 클릭할 때 상태가 제대로 업데이트되지 않는 문제가 발생했습니다. [유의어 반의어 찾기] 버튼이 활성화 되었지만 실제 페이지는 [그 단어 뭐였더라?] 페이지를 가리키고 있었죠.  문제기본적인 상태 관리는 다음과 같은 방식으로 이루어졌습니다:const [selectedButton, setSelectedButton] = useState(1);const handleClick = (buttonId) => { setSelectedButton(buttonId);}; 이 방식은 버튼을 클릭할 때는 잘..