[React] 인터넷 연결확인 및 경고모달

 

 

기업협업 중이당...ㅎ

 

 

 

이 전 포스트 글과 마찬가지로, login ->home 으로 이어지는데

 

이 때, login 컴포넌트가 제일 처음 랜더링 될 때, 인터넷 연결을 확인하고,

 

만약 안되어 있는경우에는 경고모달을 띄우는 로직을 구현하였다. 

 

 

 

 

 

 

정말.. 기업협업하면서 여러가지를 시도하고있다... 

레벨업 중.. ㅎ_ㅎ

 

 

 

 

 

1. 연결확인을 위한 useEffect 

useEffect(() => {
  const checkConnection = async () => {
    try {
      const response = await fetch('https://www.google.com', { mode: 'no-cors' });
      const status = response && response.status;
      if (status === 200) {
        // 연결 가능한 상태
      } else {
        // 연결 불가능한 상태
        setShowModal(true);
      }
    } catch (error) {
      // 연결 불가능한 상태
      setShowModal(true);
    }
  };

  if (!navigator.onLine) {
    // 연결 불가능한 상태
    setShowModal(true);
  } else {
    // 연결 가능한 상태
    checkConnection();
  }
}, []);

 

- useEffect 훅을 이용하여 씌여진  checkConnection 함수는 fetch를 사용하여 인터넷 연결 상태를 확인 한다.

 

- mode: 'no-cors' 옵션

: CORS 문제를 회피하기 위한 설정으로,  만약 fetch가 정상적으로 호출되고, 응답 코드가 200일 경우에는 인터넷 연결이 가능한 상태로 간주하기 위해 google.com 으로 fetch를 넣어보았다. 

 

만약, 그렇지 않은 경우에는 인터넷 연결이 불가능한 상태이므로 showModal 상태를 true로 변경하여 인터넷 연결이 원활하지 않음을 modal 을 띄움으로써 알린다.

 

 

 

 

이번에 알게된 navigator.onLine은 브라우저 API 중 하나로 현재 인터넷 연결 상태를 확인할 수 있다고 해서 이 것을 사용해 보았다!!!!

 

이 값을 사용하여 먼저 컴포넌트가 렌더링 되었을 때, 인터넷 연결 상태를 확인하고, 만약 연결이 불가능한 상태일 경우에는 showModal 상태를 true로 변경하여 모달창을 띄우도록 구현해 보았다.

 

 

따라서, Login 컴포넌트가 렌더링 되었을 때 인터넷 연결 상태를 확인하고, 모달창을 띄우게 된다! 

 

 

 

 

2. Modal 컴포넌트 만들고 적용 (Login.jsx)

  const [showModal, setShowModal] = useState(false);

{showModal && (
            <NetworkCheckModal
              handleNetworkModal={handleNetworkModal}
              type="network"
            />
          )}​

 

모달 적용 끝

 

 

 

 

 

 

---

👀 왜..? 이렇게 해야하지 했던 부분

const checkConnection = async () => {
    try {
      const response = await fetch('https://www.google.com', { mode: 'no-cors' });
      const status = response && response.status;
      if (status === 200) {
        // 연결 가능한 상태

여기는 이 코드는 fetch 함수를 사용하여 Google의 홈페이지에 요청을 보내서 인터넷 연결 상태를 확인하는 코드다! 

 

 

 

https://ko.javascript.info/async-await

 await 키워드를 사용하여 응답을 받을 때까지 대기하고, 응답이 오면 response 객체를 받아와서 상태코드를 확인하고, 200이라면 연결 가능한 상태로 판단된다! 

 

 

 

mode: 'no-cors' 는 Fetch API에서 요청을 보낼 때, CORS (Cross-Origin Resource Sharing) 에 대한 제한 없이 요청을 보내도록 하는 옵션이다! 

요것도 새로배웠당... 

 

CORS는 보안상의 이유로 다른 도메인에서 리소스를 요청하는 것을 제한하고 있는데, 이 옵션을 사용하면 서버에서 CORS를 허용하지 않아도 요청이 보내진다고 한다.

 

 

하지만, 실제로 응답 내용을 사용할 수는없고,,

단순히 요청이 성공했는지 여부만 확인할 때 사용할 수 있어서 인터넷 연결이 잘 되어있는지 알 수 있다고 한다! 

 

따라서, 인터넷 연결을 확인하기 위해 사용되는 fetch('https://www.google.com', { mode: 'no-cors' }) 코드에서는 서버에서 응답되는 내용이 필요하지 않기 때문에 no-cors 모드를 사용했다! 

 

새로운 것을 알게되어 이렇게 적기도 하고 굳굳.. ! 

 

 

좋은 결과물이 나오길 !!