TIL #34 React 뉴스피드 프로젝트

하루 하나씩 작성하는 TIL #34

---

뉴스 피드란? 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간

→ 블로그, 커뮤니티, SNS 모두 될 수 있어요. 뉴스를 보여주는 사이트가 아니에요!

---

협업을 위한 방법 💑

1. 우리 팀이 만들 서비스 기획 대한 충분한 논의합니다.

❓ **< 각 팀의 팀장님은 팀원에게 이런 질문을 먼저해볼까요? >** - 우리 팀은 이번에 어떤 서비스를 만들어보면 좋을까요? - 일상생활의 불편함, 아쉬움을 생각해보면 편해요~ - 우리 팀은 어떤 기능들을 구현해볼까요? - 각 기능은 누가 맡아서 진행할까요? - 마감 기한은 어떻게 정할까요? 배포 시기는 언제로 할까요? ❗ **난이도는 중요하지 않아요**. 스코프가 너무 넓거나 깊을 필요 없습니다!

1. 역할을 적절하게 나눠 주세요. 난이도에 따라 역할을 나누고 마감 기한에 맞춰 서로 도우며 완성해주세요.
2. 꼭 구현해야 하는 기능을 우선순위로 두고, 마감 기한을 정해서 우선 완성 해봅시다!
3. 혹시 마감보다 일찍 마무리 했다면 추가 기능 구현에 도전 해봅시다!

• 1. 결과물에 대한 목업(MOCKUP) 그려보기
  • 주요 색상 혹은 프레임 디자인 등
    (스파르타 코딩클럽 스타일, Google 스타일, NAVER 스타일 등 원하는 스타일)
  • PPT, 피그마 등 자유롭게 도구를 활용해주세요. UX의 기본, 와이어프레임은 어떻게 작성하는 것일까
    
• 2. 목업을 기반한 웹 페이지 기능에 관한 논의
  3. 회원 가입/로그인 페이지
  4. 메인 페이지
  5. 마이 페이지
• 3. 기술 개발 및 결합 과정의 방법 논의
  • 브랜치를 어떻게 나누고 어떻게 병합할 것인지
  • 어느 시점에 브랜치 병합을 할 것인지
  • 일반적으로 브랜치를 이렇게 나눠요
    • 마스터 브랜치(master) - 배포용
    • 디벨롭 브랜치(dev)
    • 기능 단위 별 브랜치(i-12)
  • 병합 순서는 대체로 이렇게 진행해요.
    • 기능 단위 별 브랜치 — 병합 → 디벨롭 브랜치 —최종병합→ 마스터 브랜치

---

개발 프로세스 가이드

1. Vite 프로젝트 셋업
2. .prettierrc 파일 만들기
3. supabase 셋업 (서버 및 DB 셋업)
4. 환경변수(.env.local) 셋업
5. Git 브랜치 관리 권장사항

---

우리 조는 자기 개발의 중요성이 더욱 확대대는 요즘 메타에 맞추어 운동 커뮤니티를 제작하였다.

1. 프로젝트

• 프로젝트 명 : 근육 마을 (Muscle Village)
• 소개
  • 한 줄 정리 : 웨이트 진행 상황과 도전 과제를 게시판 형태로 공유합니다.
  • 내용 : 운동, 특히 웨이트 트레이닝에 관련된 정보를 공유하는 커뮤니티입니다.
    게시물 작성시 게시판 형식으로 인기글, 최신 글을 메인페이지에서 확인 가능합니다
    조회수와 좋아요 기능으로 작성자-독자 간 소통이 가능합니다.
    마이페이지에서 본인이 작성한 글 목록 확인, 수정, 삭제가 가능합니다.

2. 기획 관련 메모

• 페이지 구성
  • home(메인페이지)
  • login(로그인)
  • sign-in(회원가입)
  • create-post(게시물 작성)
  • post(작성된 게시글 상세)
  • my page
• 최소 구현 사항
  • 게시글 작성(create-post)
  • 검색(main)
  • 게시글 리스팅(main, my page)
  • 수정, 삭제(post)
  • 조회수 띄우기(home, post, my page)
  • 로그인,회원가입,로그아웃(login, sign-in)
• 추가 구현 사항
  • 카테고리 추가
  • 무한 스크롤 구현
  • 닉네임
  • 댓글기능
  • 게시물 작성 시에 이미지 추가

3. WBS & Tasks (역할)

• 필자 회원가입, 로그인 페이지
  
• 팀원분 게시물 작성 페이지
  
• 팀원분 마이페이지
  
• 팀원분 작성된 게시글 상세페이지
  
• 팀원분 메인

---

필자는 로그인/회원가입 페이지를 맡아 진행하였다.

필자가 참고해야할 노션 필수 구현 사항은

로그인, 회원 가입

• Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해보세요.
• 이메일, 패스워드
• 참고 자료: https://supabase.com/docs/reference/javascript/auth-signup

이 부분이었다.

---

현재까지의 진행 과정

1. 깃허브 프로바이더 등록

현재 프로젝트는 대표 한 분이 supabase를 파고, 팀원을 초대하여 하나의 supabase를 사용하는 방식으로 진행하였다.

대표자 분이 넣어두었던 깃허브 client id와 client secret, Callback URL을 사용하였다.

2. 기능 구현

인증과 관련된 메소드 및 일부 코드를 수파베이스 닥스에서 제공하고 있다.

Supabase Docs

2.1 폴더 및 파일 생성

필자는

위와 같이

로그인 버튼, 로그아웃 버튼, 로그인 페이지, 회원가입 페이지를 제작하였다.

---

2.2 문서에 나온 깃헙 로그인 코드

async function signInWithGithub() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
  })
}

그리고 필자가 작성한 코드

//src>components>SignInBtn.jsx

import { supabase } from '../supabaseClient';

function SignInBtn() {
  const signInWithGithub = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'github',
    });
  };

  return <button onClick={signInWithGithub}>로그인</button>;
}

export default SignInBtn;

필자는 에러로 인한 수많은 구글링을 베이스로 작성하였기 때문에 문서와 완전 일치하지는 않은 모습이다.

두 코드의 차이점은

전자는

1. 함수 내의 결과를 data와 error 변수에 저장하며 호출되어야만 한다.
2. signInWithGithub 함수를 외부에서 직접 호출하여 실행할 수 있다.

후자는

1. 함수 내부에 비동기 함수를 정의하였다.
2. SignInBtn 함수가 호출되어야 signInWithGithub 함수가 정의되며, 이후에야 signInWithGithub 함수를 호출할 수 있다.

2.3 로그아웃 코드

문서 코드

async function signOut() {
  const { error } = await supabase.auth.signOut()
}

필자 코드

//src>components>SignOutBtn.jsx

import { supabase } from '../supabaseClient';

function SignOutBtn() {
  const signOut = async () => {
    await supabase.auth.signOut();
    window.location.reload();
  };

  return <button onClick={signOut}>로그아웃</button>;
}

export default SignOutBtn;

이건 비슷하다. 페이지 리로드 여뷰의 차이 정도이다.

현재 여기까지 진행 된 상황이다.