[개발 공부 60일차] 지난 날 회고 & Supabase Auth 로그인 구현

며칠 전에 이런 글을 봤다. 어떤 게 재밌어지는 순간은 '내가 그것을 잘하게 되기 시작했을 때'라는 글이다. 얼마 전까지만 해도 나는 코딩이 어려운 걸 넘어서 '내가 정말 재밌게 이걸 하는 게 맞나' 싶은 생각이 계속 들었다. 그러던 와중에 본 글이 바로 저 글이다. 생각해 보니 내가 그간에 해온 것들과 내 경쟁력이 된, 잘하는 것들이 처음부터 재밌지는 않았다. 보통은 어려웠고 또 재미가 없었다.

 

특히 내가 재작년에 시작했던 운동은 심각했다. 너무 어렵고, 재미도 없고, 열심히 하고는 있는데 잘하고 있는 건지 정말 전혀 모르겠었다. 하루에 3시간 ~ 3시간 30분씩 운동하고 끝나서 집에 가면 곧장 잠들기 일쑤였다. 운동 이후엔 아무것도 못할 정도여서 정말 잠만 잤다. 첫 3개월까지는 헬스장 직원분들께 들은 칭찬이 정말 열심히 한다는 것뿐이었다. 하지만 3개월을 슬슬 넘어가니 아주 조금이긴 해도, PT 수업 해주셨던 헬스장 대표님께 칭찬도 듣고 인정을 받았다. 그때부터였던 것 같다. 내가 운동에 재미를 느끼기 시작한 게.

 

개발도 마찬가지라고 생각한다. 개발 공부하는 내내 이런저런 생각과 감정이 들었지만 369법칙처럼 3개월, 6개월, 9개월에 한 번씩 오는 고비 같은 걸 넘기면 무조건 잘하게 된다고 생각한다. 계속 본인이 할 수 있는 것 이상으로 열심히 하면 잘하는 순간이 오고, 그때부터는 정말 기하급수적으로 실력이 상승할 것이라고 생각한다. 뭐 옳은 방향과 방법으로 하긴 해야겠지만 말이다.

 

 

< 목차 >
1.Supabase Auth | 로그인 후 세션 받아오는 법
2. Supabase에서의 POST 요청
3. git commit 메시지 & 컨벤션
4. 금일 소감

 

 

1.Supabase Auth | 로그인 후 세션 받아오는 법

Supabase 로그인 후 세션 받아오는 API

 

오른쪽에 초록색으로 하이라이팅 처리된 부분이 Supabase에서 제공하는 로그인 후, 세션을 받아올 수 있는 API다. 하지만 나는 getSession API로 구현하였다. 회사에서는 회사 내부 백엔드 시스템으로 Auth를 처리해야 하기 때문에 이렇게 세션을 직접 받아와야 해서 그렇게 코드를 짰고, 미리 연습할 수 있는 계기가 되었다.

 

 

구현한 코드

const getUserSession = async () => {
      const { data, error } = await supabase.auth.getSession();
      console.log('data => ', data);

      setSession(data.session);
    };

    getUserSession();

 

 

회의 때 계속 이번에는 한 번도 안 해본 Auth 해보고 싶다고 거의 노래를 불러서 내가 구현하게 되었다. 너무 좋다. 어떻게 구현해야 좋을지 로직이 안 떠오르고 Supabase 자료도 썩 많은 편이 아니어서 쉽지 않았지만 튜터님께 도움받고 자료 이래저래 많이 알아보고 보충해서 그래도 구동이 잘 되었다.

 

 

[Reference]

https://supabase.com/docs/reference/javascript/auth-resetpasswordforemail

 

 

2. Supabase에서의 POST 요청

 

팀원분이 Supabase에서 POST 요청을 어떻게 해야 하냐고 하셔서 공식문서 자료를 찾아서 드렸다. 나는 Auth를 구현하느라 Supabase에 데이터를 CRUD 하는 코드는 잘 모르기 때문에 팀원분 알려주는 김에 나도 공부할 겸 찾아봤다. 웬만한 텍스트 자료는 위 사진 자료와 같은 함수를 이용해서 구현이 가능하다.

 

위 사진에 나온 코드는 다음과 같다.

const { data, error } = await supabase
  .from('countries')
  .insert({ id: 1, name: 'Denmark' })
  .select()

 

 

파일 생성 요청하는 법

 

 

하지만 이미지, 영상, GIF 같은 용량이 좀 되는 파일들을 Supabase Storage에 따로 파일을 업로드 요청하고 그 데이터를 기반으로 가지고 와야 한다.

 

 

파일을 업로드하는 코드

import { createClient } from '@supabase/supabase-js'

// Create Supabase client
const supabase = createClient('your_project_url', 'your_supabase_api_key')

// Upload file using standard upload
async function uploadFile(file) {
  const { data, error } = await supabase.storage.from('bucket_name').upload('file_path', file)
  if (error) {
    // Handle error
  } else {
    // Handle success
  }
}

 

 

[Reference]

(1) https://supabase.com/docs/reference/javascript/insert?example=create-a-record-and-return-it

(2) https://supabase.com/docs/guides/storage/uploads/standard-uploads

 

 

 

3. git commit 메시지 & 컨벤션

저번 팀 프로젝트에서는 부족했던 '활발한 Git Commit'을 이번엔 활성화하기 위해서 잘게 commit 하고, 저번에 할 여유가 없어서 못했던 Pull Request도 이번에 활발하게 하려고 엄청 신경쓰고 있다. 오늘도 올라온 모든 Pull Request에 comment를 달았다. 팀원 것 포함해,  다양한 코드를 볼 수 있어서 너무 좋은 기회였다.

 

그러다가 Commit Convention을 어떻게 하면 좋을지를 알아보았다. 내용은 아래와 같다.

 

• Fix: 버그, 이슈 등 잘못된 무언가를 고치는 경우
• Correct: 문법 오류, 타입, 이름, 오타 등을 수정하는 경우Fix와 비슷하지만 보다 단순한 수정에 자주 쓰임)
• Remove: 코드나 파일을 삭제하는 경우
• Add: 새 코드나 파일을 추가하는 경우
• Implement: 무언가를 구현한 경우, 구현한 대상을 강조할 때 사용Add와 비슷하지만 좀 더 큰 코드 단위 추가에 자주 쓰임
• Use: 구현을 위해 무언가를 사용한 경우, 특정 라이브러리나 프레임워크를 사용하기 위한 코드를 추가하는 경우
• Refactor: 코드를 리팩터링 하는 경우
• Simplify: 코드를 단순화하는 경우, 리팩터링과 비슷하지만 중복 제거 등 단순화만 하는 경우
• Update: 무언가를 업데이트하는 경우
• Revise: 문서를 수정하는 경우
• Improve: 성능, 구조, 접근성 등을 개선하는 경우
• Make: 특정한 동작이 되게 만드는 경우, 기존 동작을 변경하는 경우
• Allow: 특정 동작을 허용하는 경우
• Ensure: 특정 처리를 보장하는 경우, if문처럼 조건을 확실하게 제공하는 경우
• Prevent: 특정 처리를 못하게 막는 경우
• Avoid: 특정 처리를 회피하는 경우, if문처럼 조건에 따라 특정 동작을 회피하는 경우
• Move: 코드나 파일을 이동하는 경우
• Rename: 파일명을 변경한 경우, 단순 변수명, 함수명 등의 변경만 수행한 경우
• Verify: 검증 코드를 추가하는 경우
• Set: 변수, 리터럴, 텍스트 등 단순 값을 변경하는 경우
• Pass: 매개변수를 전달하는 경우

 

 

 

 

[Reference]

(1) https://hyeokjaelee.github.io/good-commit-message/

(2) https://overcome-the-limits.tistory.com/entry/%ED%98%91%EC%97%85-%ED%98%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B8%B0%EB%B3%B8%EC%A0%81%EC%9D%B8-git-%EC%BB%A4%EB%B0%8B%EC%BB%A8%EB%B2%A4%EC%85%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

 

 

 

4. 금일 소감

와 진짜 졸리다. 얼른 쓰고 자야겠다. 오늘 심화 프로젝트 코드 작성하면서 알게 된 점과 협업하며 더 알고 싶었던 Commit Convention을 정리하는 시간이 돼서 좋았다. 내일도 오늘처럼 쭉쭉 작업 진도 나갈 수 있게 해야겠다. 낼도 파이팅!!!!!