일반적으로 소셜 미디어 연동은 웹 애플리케이션에서 중요한 기능입니다. 사용자의 소셜 미디어 프로필을 표시하거나, 소셜 미디어로 로그인하도록 하는 등의 기능을 구현할 수 있습니다. 이번 포스트에서는 자바스크립트의 Ternary 연산자를 이용하여 소셜 미디어 연동 기능을 구현하는 방법에 대해 알아보겠습니다.

Ternary 연산자란?

Ternary 연산자는 조건에 따라 값을 반환하는 연산자로, “조건 ? 참일때의 값 : 거짓일때의 값” 형태로 사용됩니다. 이 연산자를 활용하면 간단하게 조건에 따라 다른 값을 반환할 수 있습니다.

let result = 조건 ? 참일때의 값 : 거짓일때의 값;

소셜 미디어 연동에 Ternary 연산자 활용하기

가장 일반적인 예시로, 소셜 미디어 아이콘을 표시하고 해당 아이콘을 클릭하면 해당 소셜 미디어로 리다이렉트되도록 구현해보겠습니다. 예시로는 페이스북과 트위터를 이용한 연동을 구현해보겠습니다.

function redirectToSocialMedia(socialMedia) {
  let redirectUrl = "";

  switch (socialMedia) {
    case "facebook":
      redirectUrl = "https://www.facebook.com";
      break;
    case "twitter":
      redirectUrl = "https://www.twitter.com";
      break;
    default:
      redirectUrl = "";
      break;
  }

  redirectUrl ? window.location.href = redirectUrl : alert("유효한 소셜 미디어가 아닙니다.");
}

위 코드에서는 redirectToSocialMedia 함수를 정의하고 매개변수로 받은 socialMedia 값에 따라 redirectUrl을 설정합니다. Ternary 연산자를 사용하여 redirectUrl이 유효한 경우에는 해당 URL로 리다이렉트하고, 그렇지 않은 경우에는 “유효한 소셜 미디어가 아닙니다.” 라는 알림을 표시합니다.

마무리

이처럼 자바스크립트의 Ternary 연산자를 활용하면 소셜 미디어 연동과 같은 간단한 기능을 손쉽게 구현할 수 있습니다. Ternary 연산자는 코드를 간결하게 유지하면서도 조건에 따라 다른 동작을 수행할 수 있는 매우 유용한 연산자입니다.

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