동기식 vs 비동기식

 

동기 vs 비동기 처리

데이터를 DB로 보내는 과정에서 문제가 발생했다.

---

문제상황

게시물 저장 버튼을 누르자 어떠한 에러코드도 없이 잘 저장되는듯이 내가 지정한 페이지로 넘어감.

이때 DB로 정보를 보내는중에 만약 문제가 있다면 콘솔을 찍을 수 있도록 구현하였다.

 

하지만 이번엔 어떠한 오류코드도 나타지 않았다. 동시에 실제 DB에는 어떠한 정보도 저장되지 않음.

---

해결 방향

1. 매우 짧은 게시물을 작성했을 경우 간헐적으로 DB에 저장이 되었다.

2. 개발자 도구를 통해 모든 함수가 잘 작동하는것을 확인

 

"DB에 정보가 도달하지 못하나..?" 라고 생각하다 문득 어쩌면 함수의 순서를 바꿔보면 무엇이 안되는지 확인할 수 있음을 직감했다.

 

그렇게 찾아낸내용은 동기 함수에서 비동기로부터 데이터 요청을 한뒤에 페이지를 이동하는것이 문제였다.

 

사진과 같이 비동기에서 DB로 데이터를 모두 전송하기 전에 HTML을 이동해버리니 동작중이던 JS가 멈추는것이고, 때문에 동시에 데이터도 저장되지 않는것이었다.

그렇기에 데이터가 매우 작은 정보는 가끔 인터넷 이슈로 빠르게 전달되어 잘 저장이 되는 기이한 현상이었다.

 

때문에 나는 HTML을 비동기가 모두 작업을 마친뒤에 마지막에 호출을 해줌으로써 문제를 해결했다.

 

하지만 단한가지 아쉬운점은 이건 비동기와 동기를 접하는것에 대한 예의가 아니다...

이건 그저 비동기가 끝나면 페이지를 넘기는 행위에 불과하다고 생각했다.

 

---

진짜 동기식 vs 비동기식

import { supabase } from "../../src/supabase.js";
import { currentUser } from "../login/firebase.js";

function postCreate() {
  const title = document.getElementById("title");
  const content = document.getElementById("content");
  const createPostTable = document.getElementById("createPostTable");
  const temp_createPost = document.getElementById("temp_createPost");

  createPostTable.addEventListener("click", async () => {
    const Success = await creatPostTable(title.value, content.value);

    if (Success) {
        window.location.href = "/pages/devlog.html";
    }
    else{
        alert("게시글 저장에 실패했습니다.");
    }
  });
}

export async function creatPostTable(title, content) {
  const { data, error } = await supabase.from("Posts").insert([
    {
      title: title,
      content: content,
      author_uid: currentUser.uid,
      author_name: currentUser.displayName,
    },
  ]);

  if (error) {
    console.log("게시글 저장 실패", err);
    return false;
  }
  return true;
}

postCreate();

과정은 다음과 같다.

게시물을 만드는 버튼을 눌렀을때, 동시에 비동기작업인 creatPostTable의 값의 반환을 기다린다.

 

creatPostTable또한 supabase의 내부에 테이블의 값을 모두 저장하는동안 대기한뒤에 성공한 경우 true를 실패한경우 false를 반환한다.

이를 success라는 중간 변수에 담아서 Success가 true인지 false인지에 따라 값을 다르게하고, true의 경우 모든 경우가 온전히 완료된것으로 판단하며 동시에 페이지를 이동시킨다.

2중 비동기 작업을 재연해보았다.