코드로 우주평화

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

프로젝트를 하다 보면, 사용자가 입력한 단어가 유효한지 검사해야 하는 경우가 많습니다. 특히, 'ㅁㄴㅇ', 'wwwww' 와 같은 무의미한 단어를 어떻게 걸러낼 수 있을까요? 이번 글에서는 간단한 정규식과 사전 API 를 사용해 한글과 영어 단어의 유효성을 검사하는 방법을 소개하겠습니다. 왜 단어 유효성 검사가 필요할까요?단어 유효성 검사는 사용자가 입력하는 단어가 실제로 존재하는 단어인지 확인하는 과정입니다. 예를 들어, 단어 검색기를 만든다고 할 때 무작위 문자가 입력되면 제대로된 결과가 나오지 않거나 에러가 발생할 수 있겠죠. 개발자는 이러한 경우를 별도로 핸들링해야하기 때문에 미리 사전에 유효성을 검사하는 것이 좋습니다. 정규식을 활용한 단어 유효성 검사먼저, 우리는 단어가 한글 또는 영어로만 구..

JavaScript에서 함수를 사용할 때, 객체를 파라미터로 전달하는 경우가 많습니다. 이때 구조분해 할당(destructuring assignment)을 사용하면 코드가 더 간결하고 가독성이 좋아집니다. 이번 글에서는 구조분해 할당을 이용해 함수에서 객체의 특정 속성만 사용하는 방법을 알아보겠습니다. 1. 구조분해 할당으로 매개변수 간편하게 처리하기구조분해 할당을 사용하면, 필요한 속성만 손쉽게 추출할 수 있습니다. 아래는 예시입니다.function printMovie({ title, director }) { console.log(`Title: ${title}, Director: ${director}`);}const movie = { title: "Inception", director: "Chri..

들어가며 자바스크립트에서 비동기 프로그래밍의 기초 개념 중 하나인 콜백 함수에 대해 알아보자. 본 글에서는 콜백 함수의 개념부터 동기 콜백과 비동기 콜백의 차이, 콜백 지옥과 한계, 그리고 콜백 함수 작성 팁까지 다루겠다. 또한 콜백 함수의 대안으로 선호되는 프로미스와 async/await에 대해서도 간략하게 소개하겠다. 콜백 함수란? 콜백 함수란 다른 함수에 인자로 전달되어, 어떤 작업이 완료된 후에 실행되는 함수이다. 콜백 함수는 자바스크립트에서 흔히 사용되는 패턴으로, 특히 비동기 작업을 처리할 때 유용하다. 비동기 작업이란, 작업의 실행과 완료 시점이 일치하지 않는 작업을 말하는데, 예를 들어 서버에서 데이터를 가져오는 작업이나 타이머를 사용한 작업 등이 비동기로 이루어질 수 있다. 콜백 함수의 ..