22 11 08 회의록
- wiki 사이드바 메뉴 정리
- 프로젝트 아이디어 / 주제 및 기능 상세화
- JS code convention: Prettier, Eslint 상세화
- 프로젝트 기능 명세 뽑아보기
- 강수홍: 예비군
- 김형준: 어제 너무 피곤해서 특강을 듣고 바로 뻗었습니다. 오늘은 꼭 끝나고 나서 알고리즘 1문제와 운동을 가야겠습니다.
- 이승재: 저는 어제 일찍 잠들려고 했는데 자다가 악몽을 꿔서 깼습니다. 그래서 수면의 질이 높지 않은 것 같네요.
- 최성호: 어제 롤을 많이 이겨서 기분이 좋았는데 모기 때문에 기분이 안좋아졌습니다.
저번 과제에서 사용한 frontend eslint 설정
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'standard-with-typescript',
'prettier',
],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json',
},
plugins: ['react', 'react-hooks'],
rules: {
'react/react-in-jsx-scope': 0,
'@typescript-eslint/semi': 0,
'@typescript-eslint/explicit-function-return-type': 0,
'@typescript-eslint/member-delimiter-style': 0,
'@typescript-eslint/strict-boolean-expressions': 0,
'@typescript-eslint/restrict-plus-operands': 0,
'@typescript-eslint/no-misused-promises': 0,
'@typescript-eslint/no-floating-promises': 0,
'react/no-unknown-property': ['error', { ignore: ['css'] }],
'n/no-callback-literal': 0,
'@typescript-eslint/restrict-template-expressions': 0,
'react-hooks/exhaustive-deps': [
'warn',
{
additionalHooks: '(useRecoilCallback|useRecoilTransaction_UNSTABLE)',
},
],
},
settings: {
react: {
version: 'detect',
},
},
};저번 과제에서 사용한 backend eslint 세팅
// npx eslint --init 으로 파일 생성 후 수정
// References
// [1] https://eslint.org/docs/latest/user-guide/
// [2] https://velog.io/@yrnana/ESLint-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90
module.exports = {
env: {
es2021: true,
node: true,
},
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json',
},
// plugin: 일종의 패키지 개념. plugins만 설정하는 건 아무 의미가 없다.
plugins: [],
// extends: rule set.
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
// rule: 프로젝트에 실제로 적용할 lint 규칙.
rules: {
'class-methods-use-this': 0,
'no-console': 0,
'import/no-cycle': 0,
'@typescript-eslint/no-use-before-define': 0,
'max-classes-per-file': 0,
'import/prefer-default-export': 0,
'import/first': 0,
'import/newline-after-import': 0,
},
settings: {
'import/resolver': {
typescript: {},
},
},
};-
친구들이랑 화상 채팅 하면서 같이 즐길 수 있는 웹 게임
- 공개 방 입장 → 공개 방 목록이 나열되고 그중 원하는 방에 입장
- 비공개 방 입장 → 방 코드, 비밀번호 입력해서 들어가는 방식
- 홈 페이지의 게시판 기능 등을 구현하면서 백엔드 연습
- 구체적으로 어떤 게임을 넣을지 염두에 둔게 아니라서 위에 있는 카드 게임이나 미니 게임과 결합도 가능할 것 같다
- 누구를 타깃으로 하는가?
- 같이 게임을 하면서 어색한 분위기를 풀어보고 싶은 현대인들
- 잠깐 시간을 내서 얼굴을 보며 같이 게임을 하고 싶은 현대인들
- 타깃은 어떤 특징이 있는가?
- 게임을 가볍게 즐기고 싶어 한다
- 상대방과 소통하며 게임하고 싶어할 것 같다
- 타깃은 어떤 문제를 갖고 있는가?
- 기존 온라인 게임에서 서로의 반응을 보지 못하는 아쉬움을 가지고 있다.
- 목소리, 얼굴을 보려면 따로 프로그램을 사용해야 되는 불편함을 가지고 있다.
- 타깃은 어떤 상황 또는 환경에서 사용하게 되는가?
- 편한 모습으로 집에서 친구들과 모여 게임하는 상황 또는 환경
-
로그인 UI → 끄투
-
로비 UI
- 함께 즐길 수 있는 게임
-
구현 난이도: 어려움
-
멀티로 하는 스네이크게임
- 스네이크의 머리를 사용자의 화상 or 프로필로
-
배틀쉽
- 2 vs 2
-
알까기
-
포트리스
-
모음) 미니게임 천국
-
-
구현 난이도: 쉬움
-
마피아 게임
- 캠퍼, 마스터, 운영진 이름을 사용해보기
- full mesh webrtc는 4명 정도가 적당
- 마피아 게임 구현하려면 sfu, mcu 고려해봐야 할듯
-
스페이스 연타 줄다리기
- 팀전 or 개인전
- 오징어 게임 모티브도 ok
-
방향키 순서대로 빨리 입력하기
-
캐치마인드
-
금칙어 게임
-
-
- 방
- 방 목록에서 입장 / 방마다 생성되는 링크로 입장
- 공개 방 (비밀번호 X) 생성
- 비공개 방 (비밀번호 O) 생성
- 친구 초대
- 친구
- 추가/삭제
- 목록
- 따라가기
- 프로필
- 이름 설정
- 닉네임 설정
- 이미지 설정
- 전적 확인
- 화상/음성 대화 (필수 참여 X)
- ON/OFF 기능
- 채팅창
- 화상/음성 대화가 불가능한 사용자를 고려해 제공
- 드래그앤 드랍 파일?
- 랭킹
- 전체 사용자 기록 랭킹
- 방마다 사용자 기록 랭킹
- 전적
- 전적 요약 정보 (승수, 패수, 승률)
- 채팅 기록
- 홈페이지
- 공지사항
- CRUD?
| 분류 | 기술 스택 |
|---|---|
| Languages | TypeScript |
| Code Rules | ESLint, Prettier |
| FE | React, Next.js, emotion or Styled Components or Scss(sass) |
| BE | Node.js, Express, Nest.js |
| DB | MySQL, TypeORM or prisma |
| Design | figma, Storybook |
| Build | Webpack, Babel |
| Deploy | nginx or ncloud s3, github action, ncloud, pm2 |
| Container | docker |
| Test | Jest |