0주차

2022.06.27 (월)

- 데일리 스크럼

### **프로젝트 관련 내용**

- 개발 방법론 : Agile
- 협업 툴 :GitHub(안된다면 GitLab) , Jira(백/프 분리 확인)
- Git Repository : 백, 프론트 분리, Pull Request를 통해 Code Review 후 merge

### **팀 구성 관련 내용**

- 1순위 : 웹기술, 2순위 : 웹디자인
- 정리 및 발표 7월 8일 8시(이전에 가능하면 미리 진행)

### 전략

- gitBranch 전략
- Agile 방법론
- Git Message Convention
- WebRTC

 → 각자 정리 후, 새로 알게 된 내용 몰랐던 내용 위주로 공유

### FE

- 리액트
- 리덕스(리덕스 툴킷)
- 테일윈드

### BE

- IDE : IntelliJ
- DB : MySQL
- Framework : SpringBoot
- TDD 적용
- JPA 사용

---

### 질문하기

- GitHub 사용 관련해서 프로 or 멘토님께 여쭤보기, 배포 관련해서 여쭤보기

2022.07.05 (화)

- 데일리 스크럼
- 공통 명세서 확인
- 자기소개
- 프로젝트와 관련된 간단한 이야기

2022.07.06 (수)

- 데일리 스크럼

### 아이디어
프로젝트 관련 주제 선정(ex SNS의 경우 학생 SNS)
주제 선정 이유(이슈)
해결 방안(솔루션)

- 주요 기술 스택
- 프로토타입
- 특장점
- 기대효과
- 마무리

대상자를 명확하게 -> 페르소나(초등학생 or 중학생 ..., 참여형 or 특강형)

- 지영님: 발표자가 자료를 공유하면 발표를 듣는 사람들이 다른 프로그램을 열어서 따로 메모하는 것이 불편함 -> 메모 기능
- 종민님: 프로젝트 인원도 구하고 협업 툴도 제공하는 플랫폼(1. 구인 게시판, 2. 협업 툴(화면공유, 채팅 기능 - 카톡 채팅방처럼 , To-do 리스트)) -> 목적에 중점, 웨일의 사이드바에 영감(채팅)
- 재택근무를 위한 회의 플랫폼 : 발언 내용 또는 채팅 내용 기반 워드 클라우드 -> 지난 회의 리스트에서 회의 주제를 보여줌, 가상배경을 넣어서 집중도 향상(관련 기사 찾아야함),
IT 기기에 친숙하지 않은 사람들에게 라즈베리파이 터치 스크린 통해서 서비스 제공(+카메라)
아이들(유치원-초등학생 저학년) : 학습지나 과외를(1:1) 비대면으로 할 때 -> 집중도 향상을 위해 승주님 아이디어들(1:1 상황에서는 필요가 없다 -> 강사가 학생에게 집중하면 됨, 1:多 상황에서는 괜찮다),
바로 자료를 보고 메모할 수 있게, 발언내용이나 채팅내용을 워드클라우드 또는 텍스트로 기록을 남기면 학부모가 확인(승주님 아이디어 연계)
- 승주님: 아이들 교육 특징 -> 집중도 향상을 위해 제스처 인식(손들면 발표 인식, 이모티콘) / 회의 : 클로바 노트 -> 말하는 내용을 회의록으로 작성(회의 시간 바를 넣어서 인덱스 추가 가능) / 스터디 : 응원, 해시태그
다른 프로젝트 : 인공지능이 회의록 작성, 키워드를 뽑아서 녹화본에 남겨서 어떤 회의인지 보여줌, 억양이나 표정을 인식해서 감정을 인식(회의의 분위기, 평균보다 00%보다 회의 분위기가 ~했다. 조언)
- 송지님: 화면 공유를 특정 사람을 지정(교수님이나 교사에게만 화면 공유), 왓챠 파티 처럼 스포츠를 같이 보는 서비스
- 준우님: 감정 분석, 회의 참여도를 시각화(Speech-to-Text의 화자 분리), 회의별 화면에 To-do 리스트 제공, 노이즈 캔슬링/문서공유/스피커,마이크와 같은 환경 설정을 위한 UI(사용자 편의성)
종민님 아이디어 추가해서 모각코방을 만들고 참여인원 제한(동시성 이슈 해결)

대상(중복투표)

- 개발자(포트폴리오 준비를 하고 싶은 취준생, 사이드 프로젝트를 하고 싶은 개발자) 1
- 학생(유치원-초등학생) 4
- 팀 회의가 필요한 사람들(대학생, 직장인) 5
- 스터디가 필요한 사람(학생, 취준생, 스터디를 구하는 직장인) 2
- 취미를 공유하고 싶은 사람(남녀노소)

1. 팀 회의가 필요한 사람들(대학생, 직장인)
- 히스토리 볼 때 워드 클라우드로 회의 키워드, 회의 참여도 시각화(Speech-to-Text의 화자 분리)
- 회의전에 To-do 리스트
- 회의록(Speech-to-Text) 및 메모
- 녹화
- 사이드바 -> 녹화, To-do 리스트, 채팅, 메모
- 회의 팀 개설 -> 회의 팀에서 회의 개설, 채팅 등 이용 (디스코드 비슷하게/장기적->대학생, 직장인)

### 피드백
- 회의 결과에서 중요한 것은 One Page Report다. 한페이지로 심플하게 보여줄 수 있는지가 중요하다.
- 워드 클라우드는 효용성이 떨어진다.
- 블랙박스처럼 돌아볼 수 있다는 점이 킬포인트이다.
- 이러한 경우 서버에 부담이 될 수 있음 => 충격 감지되면 전후 10초를 확인할 수 있는것 처럼 화질은 적당하게 음성은 선명하게 저장을 해서 앞뒤 몇초씩 보여주면 좋을것 같다.(비슷한 서비스 : 트위치 핫클립)

### 어려운 이야기

- 이러한 플랫폼을 쓰는 대기업 중견기업은 팀 단위로 KPI 달성, 성과 지표, OBS 추진 계획, 중간 점검 달성 지표가 있다.
- 회사가 굴러가는 프로세스가 있는데 스케일을 키울 경우 회사 차원에서 도입시 유용한지, 열람권한 부여와 같은 조직적인 이슈로 기능을 발전시키면 좋다.
- 주 세일즈 타겟을 어떤걸로 정하는지에 따라 우선순위가 달라진다. (그룹웨어)

2022.07.07 (목)

- 데일리 스크럼

## 아이디어 회의

- 준우님 : 사용자 1명 -> 가상 면접관이 질문을 던져서 관련 결과 보여줌, 말의 빠르기/억양 분석, 키워드 위주로 분석 -> Rule-Based
    - 대상: 취준생, 개발자

- 종민님 : 비대면 재판시 피해자와 용의자가 같은 집에 있어서 협박을 받은 사례가 있다 -> 표정을 분석해서 감정을 실시간으로 확인해서 문제가 있다면 신고 및 출동

- 승주님 : 게더타운 -> 캐릭터 접근시 음성이랑 화면 출력 // 유니티나 게더타운 환경 구현에 어려움이 예상됨

- 지영님 : 강사님과 학생이 코드 입력시 오타가 있는지 확인, ssafy1학기 때 경험을 참고,
저스트 댄스나 온라인 pt->teachable, openpose => 스쿼트 팔굽혀펴기, 턱걸이 // 재미나 랭킹
    - 듀오링고, 열품타처럼  작심삼일 금지, 멀티 홈트, 솔로 홈트도 가능
    - 리더가 세트나 횟수 지정하면 시간내에 몇개했는지 체크 => 수행률
    - 운동시작시 유튜브에서 음악
    - 초보자들을 위한 방 => 튜토리얼느낌, 스트레칭부터(유튜브 API)
    - 친구와 겨루기 기능 // 애플워치 링, 상대방이 얼마나 채웠는지 확인 가능, 경쟁심(티어/잔디)
    - 광고, 전문 pt 강사 -> 수강생 매칭 // 기능 부분 유료화 - 팀플랜
    - 사용자 커스텀 음악+커스텀 운동

[Teachable Machine](<https://teachablemachine.withgoogle.com/>)

## 아이디어 해커톤 기능 정리

- 회의 플랫폼(All In Meeting,AIM)
- 자세한 내용은 해커톤 ppt 참고 B2B
    
     → 업무 프로세스 자동화
    
- 레포트 페이지 고도화

### **필수 기능**

- 팀 관리 페이지, 회의 관리 페이지
- 회의 참여도 시각화(Speech-to-Text의 화자 분리)
- 회의전에 To-do 리스트
- 회의록(Speech-to-Text) 및 메모
- 타임라인(인덱스)
- 파일 업로드
- 녹화
- 화면 공유(1명)

### **선택 기능**

- 다른팀 회의 열람 권한(팀 위에 그룹, gitlab)
- 워드 클라우드
- 화면 공유(동시)
- 달성 지표(기업용)
- 감정 인식
- 운동 플랫폼

## 새로나온 아이디어 기능 정리

### **필수 기능**

- 피트니스 룸 생성
- 운동 코스 설정 -> 피트니스 룸에서 코스 진행상황 확인(To-do list)
- 운동 자세 인식
    - [<https://teachablemachine.withgoogle.com/>](<https://teachablemachine.withgoogle.com/>)
    - openpose
- Youtube API 활용해서 동작, 음악 실행(디스코드 프레드봇 처럼)
- 운동 결과 페이지 및 프로필에서 운동 결과 확인(결과 그래프로 출력)

### **선택 기능**

- 목표 설정 및 목표 달성(기본: 랭킹, 선택: 뱃찌, 경쟁전)
- 그룹/친구 기능(서로 운동 얼마나 했는지 확인), 채팅
- 운동 루틴 등록(저장하면 코스 설정시 불러올 수 있음)
- 커뮤니티(같이 ~루틴으로 운동 하실분)
- 루틴 공유(랭킹기준으로 볼 수 있게, 인기 많은 루틴)
- 사용자 커스텀 음악+커스텀 운동

---

### 질문

- 컨설턴트&실습코치님께 질문(아직 질문 x)
- 수익화 관련된 내용을 고민해야 하는지에 대해 컨설턴트님께 질문(써보지도 않았는데 돈을 내라고 하면 거부감이 들 것 같다//필수적인 기능을 막기보다는 선택 기능에서 막기, 사용자 커스텀 및 전문 강사들의 루틴, 루틴 저장 제한) → 방어용으로
→ 배포(코치님께 질문)
- **하영 코치님께 여쭤봐서 해결함**
    - **gitlab -> github (gitlab에서 진행해야함)**
    - **jdk 버전 openjdk 써야하는지 (제한 없다면 11사용) → 제한 없음**

---

### 7월 8일(내일) 회의 일정

- 오전
    - 그라운드 룰 정하기
- 오후
    - 공부한 내용 공유하면서 프로젝트 관리 방향 정하기

2022.07.08 (금)

- 데일리 스크럼

## **Ground Rule**

- 고민 시간은 2시간 넘어가지 않기
- 일정(공결, 면담시)이 생기는 경우 공유하기
- 회의가 끝나기 전에 다음에 할 일을 미리 정하기
- 50분 일했으면 10분 쉬기
- 프로젝트 했던 날은 매일 진행했던 사항, 막힌 부분, 해결방법 작성하기 > 진행사항 > 캘린더>백, 프론트 작성
- 일과시간에는 집중하고, 야근은 권장하지 않으나 어쩔수 없는 경우 진행(가급적 야근은 다음날이 온라인)
- 주석 : 함수에 대한 정보들(파라미터, 반환값) 필수
- PR은 자유롭게 하고, 하루 넘길것 같으면 카카오톡으로 재촉하기(PR 컨벤션은 컨벤션 정할때 같이 결정)
- 기본은 병렬적으로 작업을 수행하지만, 상황(난이도)에 따라 페어 프로그래밍 가능
- 화내지 말기
- 답답해 하지 말기
- 추후 추가 가능

### 기타

- Notion에 올렸던 내용 중 괜찮은 내용이 있다면, 팀 블로그 운영
- 수업 끝나고 따로 사용할 수 있는 공간이 있는지 or 강의실 사용이 가능한지 / 사용 가능한 시간 > 질문하기

### Notion 생성

### 백엔드
**기술 스택**

Java 11

SpringBoot 최신버전

MySQL 8.0.2x 버전

Spring Data JPA(QueryDSL 고려)

Gradle

OpenVidu

Docker

Redis

**적용해볼 기술들**

스프링 인터셉터와 AOP -> 인터셉터는 인증/인가에 적용하고, AOP는 로깅에 적용하자

RESTDOCS 적용

스레드 세이프 | 동시성 처리 -> DB와 연관지어 Lock 걸기

DB 인덱싱 걸기 -> 회의명 이름으로 검색시에 회의명 like 키워드에 인덱싱이 걸리는지 확인
-> FULLTEXT INDEX로 검색조회

JPA N+1 문제(페이지네이션)
Redis 사용(랭킹에 적용해보기)

DB View 사용
도커

QueryDSL
NGINX 로드밸런싱
Blue-Green 배포
부하테스트
MySQL Master-Slave
쿠버네티스, 메시지큐

### 프론트엔드
## 기술스택

- React
- Redux-toolkit.js
- TailWind CSS
- OpenVidu

## 컴포넌트

- 함수 컴포넌트  & Life Cycle 필요한 경우 Class형 컴포넌트 사용

## Architecture Pattern

Ducks 패턴 적용

- **pages**
    - 페이지들
    
- **features**
    - 주요 기능
    
    ![Untitled](<https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0aba13db-5872-47ba-90d9-81b9ec68d878/Untitled.png>)
    
    ![Untitled](<https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8284c6a5-71d6-4b8d-9735-c1938ab745fa/Untitled.png>)
    

- **components**
    - 재사용가능한 컴포넌트
    - ex. button, modal

## 파일 경로

- 절대경로 설정하기
- [<https://imkh.dev/react-absolute-path/>](<https://imkh.dev/react-absolute-path/>)

## Naming Convention

### CamelCase

- 기본적인 코드는 카멜 케이스 사용

### BEM - Tailwind CSS

> BEM은 전체적으로 이렇게 이루어집니다.
> 
- 항상 영어 소문자만을 사용합니다. 카멜 케이스 등은 사용하지 않습니다.
- 일반적으로 한 요소는 하이픈으로 연결합니다. (예를 들면 input-text, button-submit, modal-alert 등등.. )
- 네이밍의 조합은 형태-의미-순서-상태 순으로 사용합니다. (예시 button-submit-03-disable)
- 언더스코어는 파일, 폴더, 이미지 등에만 사용합니다(image_elysia_asset_01.png)
- 숫자를 사용할 때는 확장성을 고려해 1, 2 이런 식으로 표현하지 않고 01, 02, 03… 혹은 001, 002, 003처럼 사용합니다. 앞에 0을 붙이지 않으면, 이미지 정렬 시 1 다음에 2가 오지 않고 10이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문입니다.

## CSS

- Tailwind CSS
- SASS(전처리기) - 일단 보류 정말 필요하면 쓰기

1주차

2022.07.11 (월)

- 데일리 스크럼

- 각자 이름으로 branch 파서 하루에 1 commit 하기
- Jira도 task 만들어서 관리 해보기
- 맨손 체조 중 요가 같이 유지하는 자세를 넣으면 운동 동작을 늘일 수 있음(링피트)
- 토큰 인증 과정을 테스트 할 때 번거로울 가능성이 있기 때문에 인증 과정을 나중에 추가할지 말지 →