사진 필터링은 웹 개발에서 흔히 사용되는 기능 중 하나입니다. 사용자가 원하는 효과를 주거나 이미지를 조작할 때 유용하게 활용할 수 있습니다. 이번 글에서는 자바스크립트의 Ternary 연산자를 사용하여 간단한 사진 필터링 기능을 구현하는 방법을 알아보겠습니다.

Ternary 연산자란?

Ternary 연산자는 조건문을 축약하여 표현하는 방법입니다. 기존의 if-else 문을 간단하게 표현할 수 있어 코드의 가독성을 높여줍니다. Ternary 연산자의 구조는 다음과 같습니다.

condition ? expression1 : expression2

condition이 참(true)일 경우 expression1이 실행되고, condition이 거짓(false)일 경우 expression2가 실행됩니다.

사진 필터링 구현하기

우선, 사진 필터링을 위해 원본 이미지와 적용할 필터 효과를 선택하는 기능을 만들어보겠습니다. HTML에서는 다음과 같은 구조를 가지는 요소를 사용하여 이미지와 필터 효과를 선택할 수 있습니다.

<img id="originalImage" src="image.jpg" alt="Original Image">
<select id="filterEffect">
  <option value="grayscale">Grayscale</option>
  <option value="sepia">Sepia</option>
  <option value="blur">Blur</option>
</select>

위 코드는 이미지를 보여주는 img 요소와 필터 효과를 선택하는 select 요소를 포함하고 있습니다. value 속성을 통해 각 옵션의 값을 설정할 수 있습니다.

자바스크립트에서는 이벤트 리스너와 Ternary 연산자를 사용하여 사진 필터링 기능을 구현할 수 있습니다. 다음은 해당 기능을 구현한 예시 코드입니다.

const originalImage = document.getElementById("originalImage");
const filterEffect = document.getElementById("filterEffect");

filterEffect.addEventListener("change", () => {
  originalImage.style.filter = filterEffect.value === "grayscale"
    ? "grayscale(100%)"
    : filterEffect.value === "sepia"
    ? "sepia(100%)"
    : filterEffect.value === "blur"
    ? "blur(5px)"
    : "none";
});

위 코드에서는 change 이벤트를 감지하여 효과를 적용하는 로직을 작성했습니다. Ternary 연산자를 사용하여 선택한 필터 효과에 따라 style.filter 속성을 설정하고, 적용할 필터 효과를 선택할 수 있도록 구현했습니다.

마무리

자바스크립트의 Ternary 연산자를 활용하여 간단한 사진 필터링 기능을 구현하는 방법을 알아보았습니다. 이를 응용하여 다양한 필터 효과를 적용하는 기능을 구현할 수 있습니다. 사진 필터링은 웹 애플리케이션에서 시각적인 효과를 제공하는 데 사용되며, 사용자 경험을 향상시킬 수 있습니다.

#자바스크립트 #Ternary연산자