뉴스 피드 팀프로젝트 4일 차 @로그인 사용자 정보 핸들링, 회원 가입 기능, 리액트의 onKeyDown

오늘과 주말동안에는 또 많은 일이 있었다... 3일 차에 로그인/회원가입 기능을 구현하면서 로그인한 사용자의 정보를 상태값으로 저장해주는 것도 같이 했는데, 내가 만든 로직이 굉장히 허술했기 때문에 계속 이런저런 문제가 생겼다. 그래서 스프레드 연산자, onAuthStateChange, supabase.from().select().eq('id',loginId) 등등을 활용하여 로그인 기능을 보완했다. 

 

먼저 스프레드 연산자는 얕은 복사를 통해 useContext로 전달되는 상태값이 변질되지 않도록 1차로 방어막을 친 것이다. 이로 인해 리렌더링이 좀 일어나더라도 로그인 사용자 정보가 담긴 상태값이 잘 전달되는 것을 확인할 수 있었다. 또 이것과 회원가입 기능 구현 과정에서 supabase에 있는 사용자정보를 가져오는 것을 '빈 배열'을 의존성배열로 가진 useEffect로 실행하는 것이 문제였다는 것도 알게되었다. 의존성배열에 isLogin을 지정하는 것으로 리렌더링 시에도 필요한 경우 사용자 정보를 잘 가져올 수 있도록 하였다. 

 

다음은 onAuthStateChange이다. 이는 supabase의 기능으로 supabaseAuth 기능과 함께 로그인 상태에 따라 함수가 실행될 수 있도록 핸들링을 도와주는 역할을 한다. 나는 이 onAuthStateChange에서 로그인과 로그아웃 시 isLogin 상태값을 변화시키는 changeLogin상태값 변화 함수를 배정하여 새로고침 시에도 로그인이 유지되도록 하였다. (다만 새로고침되면서 isLogin 상태값이 초기화되기 때문에 라우터에서 isLogin으로 접근을 제한하는 페이지들에서는 추방당하게 된다. 이 함수로 인해 supabse auth로 로그인 상태라면 곧장 isLogin이 true로 변경되기 때문에 로그인 자체는 유지된다.)

 

다음의 supabase.from().select().eq('id',loginId)는 supabase에서 특정 값을 가져오도록 핸들링하는 함수이다. select로 가져올 값의 열을 지정하고 eq로 가져올 값의 행을 지정하는 것이다. 이러한 과정은 supabase가 한 번에 너무 많은 값을 가져오지 않도록 하여 로딩시간을 감소시킬 수 있을뿐만 아니라 지연으로 인한 오류 또한 줄일 수 있다. 

 

---

 

회원가입 기능을 구현하는 것 자체는 supabase auth를 통해서 아주 쉽게 가능했는데, 문제는 회원가입과 함께 사용자이름과 프로필이미지를 함께 가져가도록 하는 것이었다. supabase auth기능에 대한 설명서들을 읽어보니 이러한 기능들은 supabase의  SQL Editor라는 테이블 생성 함수?를 통해 구현할 수 있다고 하는데, 사실 이에 대해서는 이제 자바스크립트->리액트까지만 하고 있는 나로써는 이해할 수 없었기 때문에 회원가입(자동로그인)+사용자 정보 업데이트라는 방법을 사용했다. 

 

SQL Editor를 사용하면 

const { data } = await supabase.auth.signUp({
      email: signUpId,
      password,
      option : {
      	data: {
        	username,
            profileImage,
        }
      }
    });

 

라는 짧은 로직으로도 사용자의 추가적인 정보들을 가져가게 할 수 있지만, 나는 이것이 불가능했기 때문에 업데이트 기능을 함께 사용하여 코드를 짰다. 

const { data } = await supabase.auth.signUp({
      email: signUpId,
      password,
    });
// 사용자 정보 업데이트 함수
const { error } = await supabase
  .from("userinfo")
  .update({
    password: password,
    username: userName,
    profileImage: profileImage,
  })
  .eq("id", data.user.id);

 

이렇게 하여 회원가입+업데이트를 하여 아래와 같은 페이지가 기능할 수 있게 되었다. 

 

---

 

리액트의 onKeyDown은 이전에 바닐라 자바스크립트에서 하였듯이 input창에서 Enter를 누르면 원하는 함수가 실행되도록 로직을 짜다가 알게 되었다.

 

기존 바닐라 자바스크립트에서 keyup의 event.keyCode===13으로 엔터=>함수를 실행했는데

 

리액트에서는 onKeyDown의 event.key==='Enter'로 엔터=>함수를 실행의 과정을 거친다. 

 

이외의 자세한 구조나 활용방법들, 차이점들은 좀 더 살펴보아야 알 수 있겠지만, 자바스크립트에서 리액트로 넘어가면서 조금씩 잊어가던 것들을 지금도 활용할 수 있다는 것을 알게 되어 더 잘할 수 있을 것이라는 자신감이 생겼다.