[TIL] 스파르타코딩클럽 프론트엔드 엔지니어 양성과정_240828

𝜗𝜚 오늘 공부한 내용

1. Entity 설계의 필요성

• Entitiy 설계란? Entity 설계로 프로젝트에서 필요한 데이터 모델링하기
• 프로젝트 시작에서 Entity 설계가 필요하다는 것을 알게되었다.
• 데이터베이스를 설계할 때, 데이터를 효율적으로 관리하기 위해 필요한 Entity를 설계하고 모델링하는 과정이 필요하다는 것
• Entity란? 시스템에서 중요한 정보들을 나타내는 개념엔티티의 예시:
  - 고객: 이름, 이메일, 주소
  - 제품: 이름, 가격, 설명
  - 주문: 주문 날짜, 주문번호, 주문한 제품 리스트
  • 엔티티는 '고객'이고 '이름, 이메일, 주소'는 엔티티의 '속성이다.
• ETT란? '논리적 테이블(Entity Table)의 약자'로 엔티티의 데이터를 저장하는 테이블을 의미한다. 데이터베이스에서 이 테이블은 엔티티를 표현하고, 관련된 모든 정보를 구조적으로 저장한다.

 

1-1) Entity 설계 과정

1. 데이터 엔티티 정의하기
   • 사용자(아이디, 이메일, 닉네임, 비번)
   • 포스트(제목, 내용, 작성자, 작성시간 등)
   • 댓글(의 정보를 저장하는 테이블)
   • 좋아요(를 누른 정보를 저장하는 테이블)
2. 데이터 관계 설정하
   • 데이터를 어떻게 연결할지 정하는 것
   • 예: 한 사용자는 여러 개의 게시물을 작성할 수 있고, 하나의 게시물에는 여러 개의 댓글이 달릴 수 있다.
3. 외래 키 설정
   • 테이블 간의 연결을 유지하기 위해 외래 키 사용함
   • 예: 댓글 테이블에는 댓글이 달린 게시물의 ID를 저장하고, 좋아요 테이블에는 좋아요를 누른 사용자의 게시물 ID를 저장함)
4. 데이터 무결성 유지
   • 데이터를 정리된 상태로 유지하고, 서로 연결된 데이터가 일관되게 관뢰도도록 설계하는 것

 

 

2. GitHub PR 템플릿

• PR(Pull Request) 템플릿을 이용하자!
• PR 템플릿은 동일한 구조로 PR을 작성하도록 유도하는데 이를 통해서 PR마다 필요한 정보가 일관되게 포함되기 때문에 리뷰어들이 쉽게 이해하고 검토할 수 있는 장점이 있다.
• 같은 말로, 협업 환경에서의 PR 템플릿은 PR 작성 및 검토를 체계적이고 효율적으로 진행할 수 있도록 도와준다. 이것은 프로젝트 전반의 생산성을 향상시키는데 중요한 역할을 하게 된다.
• 장점: 명확한 커뮤니케이션, 검토 효율성 증가, 프로세스 자동화 지원, 베스트 프랙티스 준수, 프로젝트 관리 용이

// PULL_REQUEST_TEMPLATE.md 예시

## 🔥 PR 제목 (필수)
- 예: [기능] 사용자 프로필 페이지 추가
- 예: [버그 수정] 게시물 좋아요 기능 오류 수정

## 📌 관련 이슈 (필수)
- 이슈 번호: #(이슈 번호)

## 📝 작업 개요 및 변경 사항 (필수)
- 이번 PR에서 수행한 작업의 개요를 설명해 주세요. 변경된 사항과 이 작업이 필요한 이유를 기술해 주세요.

## 🛠 구현 기능 (필수)
- 이 PR에서 구현된 주요 기능 목록을 나열해 주세요.
  - 예: 새로운 사용자 프로필 페이지 추가
  - 예: 게시물에 대한 좋아요 기능 수정 및 최적화

## 📂 파일 구조 및 변경 내역 (선택)
- 이 PR에서 추가되거나 수정된 주요 파일을 나열해 주세요. 변경된 내용과 이유를 설명해 주세요.
  - 파일명: 변경 사항 및 설명

## 🔍 테스트 방법 (필수)
- PR에서 구현한 기능이 정상적으로 작동하는지 확인하기 위한 테스트 방법을 기술해 주세요.
  - 기능 A: 테스트 절차
  - 기능 B: 테스트 절차

## 🏷 참고 사항 (선택)
- PR에 대한 추가 정보나 주의사항을 기술해 주세요.
  - 주의사항: 관련된 이슈나 필요 사항

## ✅ 체크리스트 (필수)
- [ ] 팀의 코드 스타일 가이드를 준수했습니다.
- [ ] 불필요한 콘솔 로그를 모두 제거했습니다.
- [ ] 모든 기능에 대해 테스트를 완료했습니다.
- [ ] 관련된 문서를 업데이트했습니다.
- [ ] 로컬 환경에서 브랜치로 전환하여 코드를 테스트했습니다.

## 🔗 참고 링크 (선택)
- 관련 문서나 참고할 만한 자료의 링크를 포함해 주세요.
  - 링크: 설명

 

 

3. 프로토타입

• 프로토타입이란? 프로젝트를 시작할 때 빠르게 만들어보는 기본 버전의 제품 또는 시스템, 주로 아이디어를 테스트하거나 피드백을 받기 위해 만들어진다.

 

3-1) 프로토타입 예시

• 최소한의 프로토타입 예: 회원가입 -> 로그인 -> 글쓰기

1. 회원가입: 웹사이트나 앱에서 사용자가 회원으로 가입할 수 있는 기본적인 기능 구현. 사용자가 이름, 이메일, 비밀번호를 입력하고 가입할 수 있게함.
2. 로그인: 가입한 사용자들이 자신이 만든 계정으로 로그인할 수 있는 기능. 이메일과 비밀번호를 입력해서 로그인을 할 수 있는 화면이 필요함.
3. 글쓰기: 로그인한 사용자가 새로운 글을 작성할 수 있는 기능. 제목과 내용을 입력하고 저장하는 기능 구현.

 

3-2) 프로토타입의 목적

• 아이디어 검증: 이 기본 기능들이 실제로 잘 작동하는지 확인할 수 있다.
• 피드백 받기: 사용자나 팀원들로부터 피드백을 받아서, 개선할 점이나 문제점을 찾아낼 수 있다.
• 빠른 개발: 처음부터 모든 기능을 다 구현하기보다는 핵심 기능부터 먼저 만들고, 이후 추가적인 기능을 더해나가는 방식으로 개발을 진행할 수 있다.

 

3-3) 프로토타입 요약

• 프로토타입은 완성된 제품이 아니라, 제품이 어떻게 작동할지를 보여주는 간단한 버전이다. 초기 단계에서 기본적인 기능만을 구현하여 사용해보고, 그 후에 추가적인 기능을 덧붙여 나가는 방식으로 진행하는 것을 말함.

 

 

4. SA 피드백 정리

4-1) 전역 상태 관리

• 전역 상태 관리 라이브러리로 Context API, Redux, Zustand 중 하나를 선택할 때, 그 이유를 명확히 하고 다른 방법도 조사해보는 것이 좋음.
  (각 라이브러리의 장단점을 이해하고 프로젝트의 필요에 맞는 도구를 선택하는 것이 중요)

 

4-2) ### Supabase 사용 방법

• CRUD 함수화: 스파게티 코드를 방지하기 위해 Supabase를 사용할 때 CRUD 작업을 함수로 공통화, 모듈화하는 것이 좋음(코드 재사용성을 높이고 유지보수를 용이하게 함)
• REST API 사용
• Entity 설계 필요

 

4-3) 역할 분배

• 작업 세분화: 각 팀원이 UI와 기능을 모두 다룰 수 있도록 작업을 세분화
• 브랜치 관리: 작업 단위별로 브랜치 생성하고 커밋 룰 정해서 지키기
• PR 활용: PR을 올릴 때는 구조화해서 올리는 기능이 있으니 활용해보고, PR을 바탕으로 코드 리뷰 진행하여 컨벤션 맞춰나가기
• 코드 컨벤션 통일: 코드 리뷰를 통해서 팀 내 코드 스타일과 컨벤션 통일하기(PR 활용 내용 참고)

 

4-4) 프로젝트 진행 관련

• 프로토타입 구축하기: 최소한의 프로토타입을 구축하고 추가 기능을 확장해 나가는 방식으로 프로젝트 진행
  (최소한의 프로토타입 예: 회원가입 → 로그인 → 글쓰기)
• 트러블 슈팅: 팀원들과 화면 공유를 통해 문제 해결하기
• 기획부터 배포까지의 경험이 중요: 프로젝트의 전체 프로세스(기획 → 설계 → 배포)를 전체적으로 경험하는 것이 중요함

 

4-5) 질문-실시간 피드 구현 방법에 관하여

• 양방향 소켓 통신 필요해서 이 부분은 더 알아봐야 함
• 웹소켓 사용 검토하기: 실시간 피드 구현을 위해 ‘웹소켓’ 사용을 검토하기, Supabase(=일반적인 API 통신)로 구현이 가능한지 확인 필요함.
• 폴링 방법 고려: 웹소켓이 어려울 경우 ‘폴링’ 고려하기(setInterval을 통한 주기적으로 데이터 요청하는 방법 사용)

 

 

𝜗𝜚 Review

new event 오늘부터 팀 과제가 시작됐다.

• 1일차 요약: 기획완료_8.28(수)

1. 프로젝트 기획
2. SA문서작성
   • 역할배분
   • 컨벤션 설정
   • git 관리 방안 수립
   • 기타: 주제 선정, 와이어 프레임 구현

오늘은 이정도 진행이 되었고 내일 예정 작업이였던 것들도 조금 진행되었다.

• 2일차 요약: 협업준비(개발환경 구축)_8.29(목)

1. 프로젝트 세팅 시작
   • 팀원 중 한 명이 화면공유를 키고 프로젝트 세팅
   • 각종 주요 패키지(styled-components, react-router-dom)
   • prettierrc(매우중요)
   • 기본 라우팅 설정
2. 세팅이 완료되면 github에 올린 후 clone하여
   모든 팀원 프로젝트 세팅 완료
3. add, commit, push, PR, merge 한 사이클씩 완료하여
   모든 팀원 개발환경 구축 완료

Supabase를 처음 사용해보게 될 예정이라 좀 걱정도 된다.
퇴실하고 SA 보완해보며 발제 문서도 읽어보니 프로젝트의 전체적인 흐름이나 초반에 해야할 일 들은 어느정도 정리가 됐다.

 

 

𝜗𝜚 for tomorrow

• Supabase 가이드 읽어보기
• 팀프로젝트 일정대로 진행하기
• 가능하면 지난 개인과제 피드백 반영한 수정하기

Ig. https://www.instagram.com/sodol_dotcom/