brave-cookie/flog

🔮 실시간 감정분석 화상회의 'FLOG'

flog's Issues

프론트엔드 Vue -> React 로 전환

Vue에 화상회의 기능을 추가하던 중 한계점을 발견

• 화상회의 기능(RTCMultiConnection 모듈)은 순수 html에 붙는 자바스크립트를 불러와서 사용해야함.
• 우선 Vue에서 외부 스크립트를 import 하는 것 조차 어려움..
• 또 해당 자바스크립트는 순수 HTML DOM을 건드리도록 설계되어있다.
• 하지만 Vue는 가상 DOM을 사용하므로.. 이를 보완하려면 템플릿 렌더링이 아닌 JSX 렌더링을 사용해야했음.
• JSX 렌더링 사용시 모든 코드의 리팩토링이 필요하고 쉽지 않아보임.
• jquery의 사용이 너무나 제한적이고 기존 코드를 재사용하는 것이 매우 힘듬
• socket.io 의 사용역시 export default 영역에 모두 분할하여 새롭게 코딩해야하는 불편함.

따라서 프론트엔드를 React로 사용하기로 결정

업데이트 확인 요청!

message는 백엔드에서 정보로 넘겨주는 것 같은데
일단 필요해 보이지 않아서 주석처리했습니당

로그인하면서 accessToken이랑 유저 이름도 같이 넘겨줘야
마이페이지에 '환영합니다 ㅇㅇㅇ님'이 가능할 것 같은데 어케 생각하시는지..

변경 내용:

• id, name 등을 모두 user_xx로 전부 수정(DB와 이름 동일하게)
• signup.vue -> checkForm: function(공식문서 참고 )을 추가해서 회원가입시 필요한 내용 누락 or 비밀번호와 확인 일치 여부에 따른 alert내보내도록 수정
  궁금한 점: <form id='content' @submit="checkForm" @submit.prevent="submitForm"> 저렇게 사용 가능한지?
• store/store.js -> store/index.js로 수정 후 index.js에 원래 있던 내용을 정리(vuex에 대한 것)
• login.vue -> store에 대해 이해한 내용을 바탕으로 기존 코드를 주석처리 한 뒤에 간단하게 다시 작성해봄(경로를 redirect할때 url이 어떻게 나오는지 몰라서 일단 그냥 바로 /mypage로 가도록 함)

---

• 위키에 /auth/login 추가해놨는데 잘못된거 있음 수정해주세요 🤩

@hanjo8813 @jeonbar2 확인 후 문제 없으면 이슈 닫아주세욥

이슈 등록 구현

• 우선 좌측 네비게이션 바 생성 필요
• url은 /mypage/:userId/project/:projectId/... 와 같이 children 속성? 사용
• 그에 따른 화면 전환
• 이슈 등록은 프로젝트 생성과 비슷한 플로우로 구현하면 될 듯

회원가입/로그인 기능 구현

기한 ~5/9까지

• 회원정보 테이블 생성
• 프론트에서 회원정보 데이터 받아오기
• 로그인시 프론트와 인증정보 passport 생성

회의록 내부 구현 ~26

• 회의록 리스트 받아오기
• 링크 클릭시 .../project/:pjId/:pjName/log/:logId 로 이동
• 네비게이션 바 회의록에 맞는거 다시 만들어서 배치
  * 네비게이션 순서 회의록/워드클라우드/그래프/참여자순위

---

• 우선 감정 그래프 부분 -chart.js? 그거 써서 해보기
• 그리고 워드 클라우드는 백엔드한테 png 받거나 아님 라이브러리 써서 해보기 + 요약문
• 참여자 순위도 순위만 넘겨받으니까 바로 할 수 있음
• 회의록은 어케 받아서 띄울건지 생각해보고
• 띄우기 + 감정 라벨링

[10주차] To Do

Goal: 로그인 화면 구현

• 라우터 공부 -> 화면 전환 익숙해지기
• vuex 공부
• 네비게이션 가드 -> 지금 mypage 누르면 해당 화면이 나오는건 아닌데 alert 띄우고 로그인 화면으로 돌아오도록!

DB 해킹

로그인 기능이 잘 되지않아 로그를 확인해보니 DB쪽에서 문제가 생긴것을 발견함

따라서 AWS RDS에 올려놨던 DB를 확인해보니... ...?????????????????

우리가 프로젝트에 쓰던 테이블이 모두 삭제되고 위처럼 테이블 하나만 남겨져 있음...

테이블 안에는 이렇게 써있었다.

To recover your lost databases and avoid leaking it: visit "어쩌고저쩌고 링크" and enter your unique token "어쩌고저쩌고 토큰" and pay the required amount of Bitcoin to get it back.
Databases that we have: . Your databases are downloaded and backed up on our servers. 
If we dont receive your payment in the next 9 Days, we will sell your database to the highest bidder or use them otherwise. 
To access this site you have use the tor browser "어쩌고저쩌고 링크"

...............................

토르브라우저 링크와 토큰을 써놓고 그 링크로 들어와서 비트코인으로 결제하고 DB를 받아가라는것...

한마디로 해킹당했다..

분명 DB 접속정보를 .gitignore로 예외처리해서 올리지 않았다고 생각했는데 flask에서 DB를 연동할 때 접속 정보가 노출되어 있었다.....

해커들이 깃허브를 무작위로 크롤링해서 DB 접속 정보가 노출된 것을 파악해 그 DB를 해킹하는 것 같다.

RDS에서 접속 정보를 바꾸고 ORM에 남아있는 테이블 정보로 DB를 복구해야한다.

중요 정보가 노출되면 실제로 해킹된다는 것을 뼈저리게 깨달았다.............................

[FE] 홈화면

HOME 지우고 START는 hover적용 및 크기 키우고 눈에 띄게

CSS디테일

cursor 속성

• 버튼인데 마우스 hover시 커서가 변하지 않는 곳들은 css에서 cursor : pointer 속성을 준다

• 로그인창
  

• 모달들
  

• 여기 모달은 스타일 적용하기
  

로그인시 창 이동 이슈

로그인 버튼을 클릭하면 토큰을 정상적으로 받아와서 로컬 스토리지에 저장됨

하지만 바로 창 이동이 되지않음 수정필요!

감정그래프 분석 / 참여도 랭킹 이슈

어떠한 한 감정이 나오지 않았을 때 예외처리 필요

[BE] 감정별 최다 발언 횟수를 이름과 같이 넘겨주세요!

그게 넘어 와야 각 감정으로 몇 번 발언했는지 적을 수 있음

화상회의 외 기능 중에서 구현 미완료

회의 평균 감정의 시간별 추이

임의의 값으로는 띄우기 성공. 추후 서버에서 넘겨주는 데이터 가공해서 구현 완료해야함

백엔드한테 요청

필요한 기능들

• 시간별 평균 감정 그래프를 위해 새로운 테이블 설계후 회의 평균 감정 저장 & 정보 넘겨주기
• 전체 감정 통계를 위한 요청(개수를 보내주면 프론트에서 계산해서 사용하면 될 듯 ex) anger: 10, happy: 16, ...)
• 워드 클라우드는 아직 나도 어케 할지 함 봐봐야하는데 프론트에서 띄운다 치면 단어 10개정도 뽑아서 넘겨주면 될 것 같음
• 참여자 랭킹도 백에서 결정 후 사람 이름만 넘겨주면 띄울 수 있을듯함
• 이건 당장 필요한 건 아닌데 그때 말했던 더미 회의록 감정이 happy, happiness 혼동되어 있고 그 외에도 자잘한 오탈자가 있으니 확인 부탁드려욥

---

~26일까지 위의 구현 다 완료할 계획입니다!! 뭐 프론트에서도 일정 내에 될진 모르겠지만 같이 힘내보아요 🤩🤩

이슈는 확인 후 닫아도 되고 아니면 체크리스트로 열어두셔도 될듯~

로그리스트 프론트엔드

로그리스트에서 프로젝트 아이디 받아와서 미팅이름이랑 미팅날짜는 db안에 같은 테이블에 있어서 뽑아내기가 가능한데 뽑아낸 미팅아이디로 다른 테이블 참조해서 참여자 목록까지 뽑아오기는 좀 힘들거같음

타 사용자 접속시 NET :: ERR_CERT_AUTHORITY_INVALID

• 현재 https 를 위해 적용한 인증서는 fake key를 사용해 임시방편으로 적용한 인증서임

• 이 인증서로 접속하면 주소창에 경고 문구가 나오게 됨.

• 지금까지 테스트한 브라우저에서는 이 가짜 https도 받아줬지만, 사용자의 브라우저마다 보안상태가 달라 에러발생 가능성 있음

https 적용이 되지않아 https 백엔드 서버로 요청이 전송되지 않는다

• 이를 해결하기 위해선 프론트엔드 배포시 유효한 SSL 인증서를 적용시켜줘야함

노트북 하드 교체 후 setting

• nodemon www 실행 안됨
• react-awesome-modal 설치 안됐는데 모달창은 잘 보임

---

이전과 다름없게 잘 동작하는건 확인함.
내일 안으로 해결하거나 해서 이슈 닫아야징

회원가입시 alert

1. rest통신 사전 예외코드 확인해서 ID중복처리 하기
2. 회원가입 실패시에도 회원가입 alert창 뜨는거 수정하기

@Jerimo

회의록 선택후 회의록 이름

• 현재 저 부분이 해당 회의록 이름으로 뜨지 않음 => 회의록 이름으로 출력해주세요!

• 클릭시 프로젝트 페이지로 이동됨 => 프로젝트 페이지가 아닌 회의록 열람 페이지로 이동

flog 부활시키기

도커 이미지가 ubuntu여서 서버가 계속 뻗는것 같음.
최적화 필요

dockerfile 빌드시 리눅스에서 librosa가 필요로 하는 의존성 설치해줘야함
참고 : https://stackoverflow.com/questions/61235346/librosa-raised-oserrorsndfile-library-not-found-in-docker

[FE] 각 화면 별 피드백

• mypage: 프로젝트 리스트 좀 위로 당기고 hover 보라색으로 + 폰트 키우기(미팅 리스트도 hover 보라)
• issue: 설명 적기 + 버튼 키우기
• modal: 전체적으로 크기 키우고 버튼도 + header랑 내용 폰트 크기 대비
• project: 미팅 리스트에 제목:ㅇㅇㅇ + 날짜 볼드
• rank: 참여도 산정 기준 + 감정 대표자에서, 이 감정으로 발언 n번했다 그런거
• all: 기능 제목이랑 설명 폰트 좀만 키우기

[FE] 프로젝트나 이슈 없을 때 문구 띄우기

서버에서 요청한 배열이 빈 배열이면 if 문으로 '첫 프로젝트를 생성해보세요' 이런거 띄우기

Docker를 이용한 개발/배포환경 구축

현재 상황

• 현재 사용하는 서버는 총 3개 (React / Express / Flask)
• React (https) 는 도커 이미지화 완료
• Flask 서버도 koNLpy 라이브러리를 사용하기 위해 도커 내부에 JDK를 깔고 이미지화 완료
• 프론트만 https면 다른 백엔드 API 서버와 통신이 안될줄 알았지만 잘 됐음.

To Do

• Express 서버를 이미지화 하기
• 3개의 서버 모두 도커 컨테이너에 올려서 서로 통신 테스트
• 테스트 후 docker-compose를 이용하여 개발 및 배포환경 구축
• AWS에 올려 테스트

docker-compose 명령어

• https://www.daleseo.com/docker-compose/

KoNLpy 도커에 설치

• https://roseline.oopy.io/dev/konlpy-fastapi-docker-image

Before_dev 레포 => FLOG 레포로 통합

• Flask 서버 코드 통합
• 각자 환경에 파이썬 모듈 통일
• 회의방 입장 => 참여코드 및 비디오 css 설정
• 실시간 통신 테스트

화상회의 실시간 통신

현재

• 초대코드 생성해서 방 입장 완료

백엔드 요청 보내여!!

현재 참여자 리스트 반환 우선 먼저 해주시고
그거 되면 회의록 목록 [날짜, 회의 이름 (가능하다면 참여자 목록까지)] 해주시면 될것같슴다

---

회의록은 어떻게 받아올지 저도 오늘 좀 생각해볼게요

평균 감정 그래프 이슈

어느 한 감정이라도 나오지 않으면 최소/최대 y축이 이상해짐
0~50으로 맞춰줘야함

음성인식 감정분석 데모 화면 구현

FOR 평가

React 기본 포트 설정

우리가 계속 사용하던 백엔드(Express) 포트는 3000번이다.

기존 프론트엔드(Vue) 포트는 8080번이라 서로 겹칠일이 없었지만, 이번에 React로 바꾸면서 React 기본 포트가 3000번이라 겹치게 됐음.

때문에 아래처럼 package.json 설정을 바꿔줬지만, 윈도우의 설정과 리눅스의 설정이 서로 달라 배포시 문제가 생김.

# Linux 기반
"start": "export PORT=8080 && react-scripts start
# Windows 기반
"start": "set PORT=8080 && react-scripts start

따라서 frontend 폴더 하위에 .env 파일을 생성하고 그 안에 아래와 같이 써준다.
이렇게 쓰면 React가 8080포트로 구동됨

PORT=8080

사용중인 포트 정리

• 프론트엔드(React) : 8080
• 백엔드(Express) : 3000
• 백엔드(Flask) : 5000

@Jerimo

현재 작업중인 frontend 폴더에 위와 같이 설정해주세요~~~~
확인후 이슈 close 부탁!

[FE] 추가적으로 수정할 부분

• 로그인 회원가입
• 프로젝트리스트: 참가자 n명, 최근회의: date

Flask SqlAlchemy connect 에러

• 프론트에서 Flask 서버로 회의록 요약 / 워드클라우드 부분 요청을 지속적으로 보냈을 때 생기는 오류
• 오류 발생시 Flask 서버가 다운되며, 서버로 보내는 요청을 받지못하게 됨... (프론트에서 그래프 렌더링이 아예안됨)
• DB pool (Queue pool) 사이즈 문제인것 같음

참고 링크

• https://yongho1037.tistory.com/571
• https://spoqa.github.io/2018/01/17/connection-pool-of-sqlalchemy.html

Ubuntu에서 koNLpy 실행시 버그

• 스레드환경에서 jpype 호출시 jvm에서 나는 오류 같음.............

Video 요소에 CSS 적용

현재 기본 설정으로 방 입장시 비디오가 맨 아래에 appendchild로 추가됨

비디오 크기와 위치를 grid에 맞춰 생성해주어야함.

실시간 감정분석후

실시간 감정 분석 후 DB에 log_info테이블에 감정과 회의록이 저장되고 30초마다 평균 감정을 보여주기 위해 또 다른 테이블 설계해야함

마이페이지 구현

우선 프론트에선 id / name / email 정보를 jwt 형태로 가지고 있음.
마이페이지 렌더링을 위해 프론트는 백에게 2가지 요청.

프로젝트 생성

1. POST 로 { user_id , project_name } 을 보냄
2. 백에서는 요청을 받고 project_info 테이블에 project_name을 삽입. (PK인 project_id는 AI로 자동 생성)
3. user_project 테이블에 자동 생성된 project_id와 user_id를 함께 삽입

해당 사용자가 속한 프로젝트 리스트

1. GET 으로 user_id를 넣어 요청
2. 백에서는 요청에서 id를 꺼내어(req.params) user_project 테이블에서 조회
3. 해당 사용자가 속한 프로젝트 리스트를 추출 후 응답

[ERROR] 로그인 여부에 따라 헤더에 표시되는 내용 변경 -> 새로고침을 수동으로 해야 바뀜

v-if를 사용해서 로컬 스토리지의 accessToken이 있으면 [Home, Mypage, Logout]을,

없으면 [Home, Login]을 뿌리는데 값이 변경된 후에 새로고침을 다시 해줘야 내용이 바뀜.

---

시도:

• this.$router.go(0), 라우터의 AfterEach: 부분과 getAuth에서 사용 => 무한반복
• Header.vue에서 isAuth=false 데이터 추가, getAuth에서 토큰 여부에 따라 값을 변경후 그 값을 리턴 => undefined에러(라이프사이클과 관련된거 같은데 생성 시에 isAuth 값을 못 읽어서 그런가?)

todo- front

• 돌아가게 만들기
• 백엔드에서 요청한 부분해결
• store 돌아가게 하기
• css 다듬기

To Do - 회원가입 및 로그인 구현

#20210510

• 비밀번호 확인 프론트에서 하기
• 회원가입 성공시 성공 알림 뜨고 로그인 화면으로 넘어가기
• 로그인 구현 시작

---

• 마이페이지는 로그인 후에만 보이도록!