23.09.05 기술 interview (11) / 프로필 업데이트 구현

11. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.

 

동기와 비동기의 차이는, 일단 동기는 프로그램이 순서대로 실행되는 것으로 현재 작업이 끝날 때 까지 기다린 후 다음으로 넘어가는 것이다. 비동기는, 작업이 순서대로 진행되지 않고 독립적으로 진행된다. 작업이 완료되면 콜백함수 또는 promise 로 결과가 처리된다.

 

- 비동기 작업이 필요한 이유는, 앱의 성능 향상 및 대용량 데이터 처리 및 네트워크 작업에 유용하다.

- 또한 속도도 동기 프로그래밍에 비해 빠르다. 

- 비동기 작업을 하면 동시에 여러가지 작업을 처리 할 수 있다.

 

---

프로필 업데이트 구현

 

프로필 업데이트는 firebase 로만 해 봤는데, supabase storage 를 통해 이번에 기회가 되어 구현하였다. 

 

1. 파일 선택을 해준다.

  const fileSelectHandler = (e) => {
    const avatarFile = e.target.files && e.target.files[0];
    setSelectedFile(avatarFile);
  };

 

2. 파일이 선택되면, 입력할 이미지 데이터와 닉네임을 넣는다. 

 

    if (selectedFile) {
      const { data, error } = await supabase.storage
        .from("profileImage")
        .upload(`avarta_${Date.now()}.png`, selectedFile);

      const { error: insertImageError } = await supabase
        .from("user")
        .update({
          nickname,
          profileImage: `${process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL}/profileImage/${data?.path}`,
        })
        .eq("uid", user?.id);

      alert("수정이 완료되었습니다.");
      setOpen(!open);
    }

 

upload 명령어가 supabase 에 비해 직관적인 감이 있어, 구현하는데 오랜 시간이 걸리지는 않았다. 

다만 환경변수에 storage url 을 따로 지정해주자.