📌 오늘 진행 사항
드디어 마참내 약 8개월만의 공백을 깨고, 새 프로젝트를 들어갔다! 역사적인 순간
- 새 프로젝트의 방향성
- 해보고 싶었던, 회사들이 원하는 기술들을 경험해보기
- 머리부터 발끝까지 풀스택으로 혼자서 다 구현해보기
- 흐려졌던 react 및 기술스택들 지식 상기시키기
- 주제
- 영어 표현 대결! (서바이벌 올라타자st)
- 한글 ↔ 영어 1) 타자로 2) 음성으로 맞추기
- 1) 사람들과 방만들어서 2) 혼자서 ai와
- 주요 기술
- 여러 사람들과 통신
- 음성을 영어로 옮겨적는 STT
- open ai와 대결, 채점
- 넣고싶은 스택들(일단 다 때려박기;ㅋ)
- apollo & GraphQL
- prisma
- msw
- 테스트 (Cypress-E2E, Jest-통합, 단위)
- CI/CD : CircleCI, GitHub Actions 예정
- 성능최적화 - FCP, LCP
- 빌드: Webpack, ESBuild, SWC, Babel
- redux
- React query, 반응형
- storybook
- 고객들의 개선사항 - 구글폼
(중요도 상 - 공부 순서)
— (중)
— (하)
- 기능
- 로그인
- 마이페이지
- 북마크한 표현
- 최근에 본 표현(최대 30개)
- 영어 표현 CRUD
- 사람과 대결
- 방코드
- ai와 대결
- 일부러 맞거나 틀림
- 방만들기
- 타자 or 음성
- 문제 개수(3, 5, 10)
- 게임전 방 안
- 방장이 게임 start
- 최대 8명
- 게임진행(서바이벌 올라타자st)
- 문제판(mc해설, 문제, 답)
- 시간 제한 10초
- 문제 출제
- 한글과 영어 같이 나옴(10초)
- 한글(영어)출제 > 영어(한글)입력
- 문제들 북마크 가능
- 작성한 정답이 캐릭터 말풍선으로 나옴
- 맞추면 캐릭터가 위로 올라가고 틀리면 내려감(비율)
- open ai로 채점
- 정답 나오고 영어로 읽어줌
- 게임 끝나면 순위표(5초) 뜨고 다시 방으로
- 개발 진행 순서
- 프로젝트 생성(빌드 정하기)
- 노마드 코더 풀스택 강의(Apollo Server, Graph QL, prisma)
- 영어 표현 CRUD
- msw
- 방만들기
- 게임 시작
- mc해설 > 선공개 > 문제출제
- 답 입력(타자는 텍스트, 음성은 STT)
- 타이머
- 답공개(TTS)
- 말풍선으로 작성한 답 나타내기
- 문제개수 끝나면 순위표 보여주고 > 다시 방으로
- 통신
- open ai
- 작성 답 채점
- 정답/오답을 말하기
- 캐릭터 올라가기, 내려가기
- 로그인, 회원가입(소셜 or 이메일-React Hook Form)
- 마이페이지
- 문제 북마크
- 테스트
- CI/CD
- 성능 개선
- 게임방에서 채팅
- 나와의 약속
- 매일 개발일기 쓰기
- 오늘 진행 사항
- 문제 및 해결 사항
- 새로 안 개념들 정리
- 작은 디테일에 집착하기
- 아리까리할 때 확실하게 알기! 무엇을 결정해야 할 때, 명확한 근거로!
📝 내일 희망 TODO
- graphQL 노마드코더 강의(3.5시간)
- apollo client 알아보기 (상태 필요x?)
- 아폴로 리액트 강의 알아보기
- 기획서 한번 더 읽기(+찾아보기)