안녕하세요 여러분, 최근 저는 새로운 기술을 배우고 일반적으로 코딩을 더 잘하기 위해 #100daysofcode 챌린지를 시작했습니다. 그리고 이번 포스팅은 2일차입니다.

오늘의 요약

어제에 비해 코딩에 더 많은 시간을 할애했고 아마도 더 생산적이었을 것입니다. 하지만 1일차 기사에서 언급했듯이 코딩하기 전에 공부하겠다고 했습니다. 공부는 했는데 집중이 안되고 그래서 공부시간을 더 쏟는데도 공부를 덜 하게 되었어요. 나는 그 간식 시간을 주면 안 된다고 생각합니다. 그들은 단지 내 집중력을 파괴했습니다. 그래서 나는 하루 일정을 짜기로 했다. 그다지 엄격하지는 않지만 적어도 임의의 휴식 시간을 주지 않도록 해야 합니다. 코딩 부분에서는 로그인 폼과 홈페이지 디자인을 마쳤습니다. 디자인 부분은 별거 없었는데 이 버튼만 스타일링 했고, 나머지 폼은 어제 스타일링 했어요


그리고 홈페이지에는 Vue와 Supabase를 배우고 싶어서 심플한 디자인만 만들었습니다.


완료 후 Supabase 문서를 보기 시작했습니다. 그것에 대한 나의 첫인상은 그들이 Firebase에 비해 함수 이름에 대해 꽤 잘했다고 생각합니다, lol! 예를 들어 가입 기능:

// Firebase
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password);

// Supabase
const { user, session, error } = await supabase.auth.signUp({
  email,
  password,
});

쉽게 알 수 있듯이 Firebase의 함수 이름은 너무 길어 설명이 필요하지만 사용자를 인증 공급자(예: Github)에 등록하려면 다른 함수와 공급자를 가져와야 합니다.

// Firebase
const auth = getAuth();
const provider = new GithubAuthProvider();

signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
  });

// Supabase
const { user, session, error } = await supabase.auth.signIn({
  provider: 'github',
});

그렇기 때문에 적어도 코딩 부분은 Firebase보다 Supabase를 사용하는 것이 더 쉽다고 생각합니다. 그리고 Supabase 문서는 위에서 볼 수 있듯이 Firebase가 콜백을 사용하는 동안 await 키워드를 사용하기 때문에 Firebase보다 조금 더 낫다고 생각합니다. 코드 가독성을 위해 async 및 await를 사용하는 것이 콜백보다 낫습니다. 그래서 Firebase 문서의 코드 블록을 사용하고 싶을 때. try-catch 블록과 함께 async 및 await를 사용하여 다시 작성해야 합니다. 그리고 여러분의 생각이 궁금합니다. 수파베이스와 파이어베이스 중 어떤 것이 더 좋은지 의견을 나눠주세요.

어쨌든 기본적으로 지금은 수파베이스와 작업하는 것이 좋았다고 말할 수 있습니다. 더 나을 수 있다고 생각하는 유일한 것은 유효성 검사입니다. Supabase는 이메일이나 강력한 암호를 확인하지 않습니다. 내 말은 그들이 이메일이 정말 이메일인지 확인하지 않는다는 것입니다. 나는 그들이 그것을 향상시킬 수 있다고 생각합니다.

Supabase 작업 외에도 오늘 Vuex 스토어도 사용하기 시작했습니다. React Context API와 Redux 사이에 있다고 생각합니다. 나는 단순히 그것을 좋아했습니다. Context API는 매우 좋습니다. 거의 매번 사용하지만 Vuex를 본 후에는 Context API가 정말 많은 자유를 준다고 생각합니다. 물론 둘 다 장단점이 있지만 Vuex에서 상태와 통신하는 방식이 더 낫다고 생각합니다. 하지만 둘 다 장단점이 있다고 말했듯이 그것은 한 사람의 의견입니다. 그리고 Vuex가 Context API보다 낫다고 생각하지만 React 프로젝트에서는 사용할 수 없습니다.

그런데 이 프로젝트에 대한 github repo를 살펴볼 수도 있습니다.

이브라힘호준 / vuex-supabase

vuex 및 supabase를 사용하는 Vue 웹 앱

vuex-supabase

프로젝트 설정

yarn install

개발을 위한 컴파일 및 핫 리로드

yarn serve

프로덕션을 위해 컴파일 및 축소

yarn build

린트 및 수정 파일

yarn lint

구성 사용자 정의

Configuration Reference을 참조하십시오.


View on GitHub


오늘은 여기까지, 좋은 하루 되세요!