$ npm start- 프로젝트 이름: Without C
- 프로젝트 설명: Ping-Pong 게임 구현 및 유저 관리
| 장재열 | 최시영 | 이소민 | 조영호 | 신영기 |
|---|---|---|---|---|
 |
 |
 |
 |
|
| FE | PL | FE | BE | BE |
| GitHub | GitHub | GitHub | GitHub | GitHub |
-
로그인:
- 사용자 인증 정보를 통해 로그인합니다.
- 42 계정과 구글 계정으로 로그인할 수 있습니다.
-
pong게임:
- 유저가 키보드를 사용하여 pong게임을 플레이 합니다.
- 토너먼트:
- 유저들이 차례대로 게임을 진행하며 현재 누구와 누가 게임중인지, 플레이어의 순서가 어떤지 보여집니다.
- 토너먼트 처음에 각 유저는 이름을 입력해야한다.
- 원격 접속으로 유저간 1대1 경기도 가능합니다.
-
Block chain 적용:
- 토너먼트 점수를 블록체인에 안전하게 저장
-
유저 관리:
- 인트라 프로필을 이용하여 유저의 기본 정보를 표시합니다.
- 유저는 다른 사람들을 친구로 추가하고 온라인 상태를 볼 수 있어야한다.
- 유저 프로필에서는 이겼는지, 졌는지 stat이 나와야한다.
- 모든 유저는 Match History가 있어야한다.
-
2FA 기능 구현:
- JWT를 사용하여 안전하게 인증, 인가하고, 유저 세션과 리소스에 접근하는 것을 안전하게 관리
- email-based verification을 사용
-
Microservices로 디자인:
- 벡엔드를 작고, loosely-coupled하게, 각 기능에 대해 각각 책임을 가지도록 나누었다.
- microservice간 RESTful API나 message queue를 사용하여 data exchange를 하도록 구현
- flexibility, scalability, maintainability를 높이는 것에 주안점을 두었습니다.
-
접근성 향상:
- 모든 타입의 기기에서 seamless하게 동작
- 새로운 브라우저에서도 잘 작동
- 넓은 사용자를 수용하기위해서 최소 세개의 언어를 지원
-
Server-Side Pong 구현:
- 공 움직임, 점수 카운팅, 유저 인터랙트 로직이 server-side에서 동작함
- Pong game을 web application과 통합
| 장재열 | |
|
| 최시영 | |
|
| 이소민 | |
|
| 조영호 | |
|
| 신영기 | |
|
| HTML5 |  |
| CSS3 |  |
| Javascript |  |
| React |  |
18.3.1 |
| StyledComponents |  |
6.1.12 |
| MaterialUI |  |
5.0.0 |
| DayJs |  |
1.11.12 |
| Firebase |  |
10.12.5 |
| Git |  |
| Git Kraken |  |
| Notion |  |
project/
├── public/
│ ├── index.html # HTML 템플릿 파일
│ └── favicon.ico # 아이콘 파일
├── src/
│ ├── assets/ # 이미지, 폰트 등 정적 파일
│ ├── components/ # 재사용 가능한 UI 컴포넌트
│ ├── hooks/ # 커스텀 훅 모음
│ ├── pages/ # 각 페이지별 컴포넌트
│ ├── App.js # 메인 애플리케이션 컴포넌트
│ ├── index.js # 엔트리 포인트 파일
│ ├── index.css # 전역 css 파일
│ ├── firebaseConfig.js # firebase 인스턴스 초기화 파일
│ package-lock.json # 정확한 종속성 버전이 기록된 파일로, 일관된 빌드를 보장
│ package.json # 프로젝트 종속성 및 스크립트 정의
├── .gitignore # Git 무시 파일 목록
└── README.md # 프로젝트 개요 및 사용법
우리의 브랜치 전략은 Git Flow를 기반으로 하며, 다음과 같은 브랜치를 사용합니다.
-
Main Branch
- 배포 가능한 상태의 코드를 유지합니다.
- 모든 배포는 이 브랜치에서 이루어집니다.
-
{name} Branch
- 팀원 각자의 개발 브랜치입니다.
- 모든 기능 개발은 이 브랜치에서 이루어집니다.
// 세미콜론(;)
console.log("Hello World!");
- 상수 : 영문 대문자 + 스네이크 케이스
const NAME_ROLE;
- 변수 & 함수 : 카멜케이스
// state
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [currentUser, setCurrentUser] = useState(null);
// 배열 - 복수형 이름 사용
const datas = [];
// 정규표현식: 'r'로 시작
const = rName = /.*/;
// 이벤트 핸들러: 'on'으로 시작
const onClick = () => {};
const onChange = () => {};
// 반환 값이 불린인 경우: 'is'로 시작
const isLoading = false;
// Fetch함수: method(get, post, put, del)로 시작
const getEnginList = () => {...}
// 한 줄짜리 블록일 경우라도 {}를 생략하지 않고, 명확히 줄 바꿈 하여 사용한다
// good
if(true){
return 'hello'
}
// bad
if(true) return 'hello'
함수는 함수 표현식을 사용하며, 화살표 함수를 사용한다.
// Good
const fnName = () => {};
// Bad
function fnName() {};
Styled-component태그 생성 시 아래 네이밍 규칙을 준수하여 의미 전달을 명확하게 한다.
태그명이 길어지더라도 의미 전달의 명확성에 목적을 두어 작성한다.
전체 영역: Container
영역의 묶음: {Name}Area
의미없는 태그: <>
<Container>
<ContentsArea>
<Contents>...</Contents>
<Contents>...</Contents>
</ContentsArea>
</Container>
카멜 케이스를 기본으로 하며, 컴포넌트 폴더일 경우에만 파스칼 케이스로 사용한다.
// 카멜 케이스
camelCase
// 파스칼 케이스
PascalCase
컴포넌트일 경우만 .jsx 확장자를 사용한다. (그 외에는 .js)
customHook을 사용하는 경우 : use + 함수명
type : subject
body
feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 수정
style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
refactor : 코드 리펙토링
test : 테스트 코드, 리펙토링 테스트 코드 추가
chore : 빌드 업무 수정, 패키지 매니저 수정
== 코드 관련
📝 코드 작성
🔥 코드 제거
🔨 코드 리팩토링
💄 UI / style 변경
== 문서&파일
📰 새 파일 생성
🔥 파일 제거
📚 문서 작성
== 버그
🐛 버그 리포트
🚑 버그를 고칠 때
== 기타
🐎 성능 향상
✨ 새로운 기능 구현
💡 새로운 아이디어
🚀 배포
== ex1
✨Feat: "회원 가입 기능 구현"
SMS, 이메일 중복확인 API 개발
== ex2
📚chore: styled-components 라이브러리 설치
UI개발을 위한 라이브러리 styled-components 설치
