Vue React에서 방문자 IP별 지역 캠페인 표시하기

API 설명

브라우저 측 호출은 방문자 IP를 확인하고 방문자의 IP, 국가, 지역, 도시를 반환합니다. 지역 콘텐츠 표시에 적합합니다.

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

적용 시나리오

이 시나리오들은 IP 정보 인터페이스의 가치를 보여주며 서버 IP와 방문자 IP를 명확히 구분합니다.

• 이 시나리오들은 IP 정보 인터페이스의 가치를 보여주며 서버 IP와 방문자 IP를 명확히 구분합니다.
• Vue React에서 방문자 IP별 지역 캠페인 표시하기
• API 설명
• SEO 및 UX 권장사항

구현 로직

구현 전에 요청 주체를 확인해야 합니다. 서버 요청은 서버 IP를 반환하고 브라우저 요청은 방문자 IP를 반환합니다.

• 구현 전에 요청 주체를 확인해야 합니다. 서버 요청은 서버 IP를 반환하고 브라우저 요청은 방문자 IP를 반환합니다.
• 브라우저 측 호출은 방문자 IP를 확인하고 방문자의 IP, 국가, 지역, 도시를 반환합니다. 지역 콘텐츠 표시에 적합합니다.
• 아래 예시는 모두 https://my.ipin.io/info를 직접 사용하며, 주석과 화면 문구도 현지화했습니다.
• 기본 콘텐츠는 완전하고 읽을 수 있어야 하며, 지역 콘텐츠는 향상 요소로 사용해야 합니다. 검색엔진은 안정적인 콘텐츠를 수집하고, API 실패 시에도 페이지는 사용할 수 있습니다.

코드 예시

아래 예시는 모두 https://my.ipin.io/info를 직접 사용하며, 주석과 화면 문구도 현지화했습니다.

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "방문해 주셔서 감사합니다. 기본 콘텐츠입니다.", url: "/signup" };
const campaignMap = { TW: { title: "대만 방문자 콘텐츠", url: "/tw" }, US: { title: "미국 방문자 콘텐츠", url: "/us" }, JP: { title: "일본 방문자 콘텐츠", url: "/jp" } };
export default function GeoCampaign() {
  const [campaign, setCampaign] = useState(defaultCampaign);
  useEffect(() => {
    let cancelled = false;
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { if (!cancelled) setCampaign(campaignMap[info.country] || defaultCampaign); })
      .catch(() => { if (!cancelled) setCampaign(defaultCampaign); });
    return () => { cancelled = true; };
  }, []);
  return <a href={campaign.url}>{campaign.title}</a>;
}

Vue

<template>
  <a :href="campaign.url">{{ campaign.title }}</a>
</template>
<script>
const defaultCampaign = { title: "방문해 주셔서 감사합니다. 기본 콘텐츠입니다.", url: "/signup" };
const campaignMap = { TW: { title: "대만 방문자 콘텐츠", url: "/tw" }, US: { title: "미국 방문자 콘텐츠", url: "/us" }, JP: { title: "일본 방문자 콘텐츠", url: "/jp" } };
export default {
  data() { return { campaign: defaultCampaign }; },
  mounted() {
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { this.campaign = campaignMap[info.country] || defaultCampaign; })
      .catch(() => { this.campaign = defaultCampaign; });
  }
};
</script>

SEO 및 UX 권장사항

기본 콘텐츠는 완전하고 읽을 수 있어야 하며, 지역 콘텐츠는 향상 요소로 사용해야 합니다. 검색엔진은 안정적인 콘텐츠를 수집하고, API 실패 시에도 페이지는 사용할 수 있습니다.

흔한 실수

다음 문제들은 글의 정확성, 코드 사용성, API 설명의 신뢰도에 영향을 줍니다.

• 다음 문제들은 글의 정확성, 코드 사용성, API 설명의 신뢰도에 영향을 줍니다.
• 기본 콘텐츠는 완전하고 읽을 수 있어야 하며, 지역 콘텐츠는 향상 요소로 사용해야 합니다. 검색엔진은 안정적인 콘텐츠를 수집하고, API 실패 시에도 페이지는 사용할 수 있습니다.
• 구현 전에 요청 주체를 확인해야 합니다. 서버 요청은 서버 IP를 반환하고 브라우저 요청은 방문자 IP를 반환합니다.
• 이 시나리오들은 IP 정보 인터페이스의 가치를 보여주며 서버 IP와 방문자 IP를 명확히 구분합니다.

정리

브라우저 측 호출은 방문자 IP를 확인하고 방문자의 IP, 국가, 지역, 도시를 반환합니다. 지역 콘텐츠 표시에 적합합니다.

자주 묻는 질문

아래 질문은 이 글의 구현 내용에 맞춰 별도로 작성되었으며 현재 주제와 직접 관련됩니다.