connect-foundation / 2019-02 Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 3.0 2.19 MB

dropy 🐣 - simple, easy, interactive presentation

License: MIT License

JavaScript 89.50% HTML 0.19% TypeScript 10.24% Dockerfile 0.07%

apollo graphql nodejs react typescript

2019-02's People

Contributors

Stargazers

Watchers

Forkers

aereeeee logqwerty taeg92

2019-02's Issues

[Epic#7, Epic#9] 스피커, 리스너로서 참여한 채널 목록 확인 가능

채널 정보를 다뤄야 한다.
회원 정보를 다뤄야 한다.
데이터베이스 스키마 정의를 해야 한다.

완료 조건 ✅

스피커와 리스너를 구별해야 한다.
GraphQL을 이용해 최소한의 정보를 불러와야 한다.
채널 목록을 뿌려주는 UI 컴포넌트를 생성해야 한다.
서버와 연동해야 한다.

레퍼런스 📚

2019.11.04 (월) 오후 미팅 로그

2019.11.04 오전 MEETING

MEETING 목적 🚩

브레인스토밍 2개씩
React.js 공부하기
Issue / Project 관리 컨벤션
Label 정하기

MEETING 내용 ✍️

브레인 스토밍

김도현

빅데이터활용 + 의류 구매 -> 선호도 + 추천 서비스

김재원

댓글만 되는 플랫폼(익스텐션화)

조애리

항공권 로그를 활용한 여행 추천 서비스(핵데이 주제)
교통과 관련된 데이터 활용

이미림

PDF + 채팅기능
- 마이크 녹음 기능
- 동영상 녹화 기능
- 발표 종료 후 접속자에게 자료 이메일 기능 등

개발환경 세팅하기

set-react-env 브랜치에서 확인 가능
규모는 작게 가져가자
기술은 깊게 공부하자
[기획1] 을 가져가되 중심 기능에만 초점 맞추기
대용량 트래픽 분산 처리(김도현) 등 서버 기술 완성도 높이기
컴팩트 기능 완성 후 기능 추가하기 - 버전 관리
추가기능 ex) 익명/로그인 분리

MEETING 결과 📌

React 공식문서 읽어오기 ( 복습 )

공식문서 링크
주요 개념 모두 읽어오기

@loadOne @always-awake @aereeeee

[Epic#2] 로그인 사용자는 로그아웃한다.

로그아웃 기능을 구현한다.

완료 조건 ✅

로그아웃 버튼 UI 구현
로그아웃 시 세션 삭제

레퍼런스 📚

[Epic#31] 채널 코드를 입력할 수 있다.

채널 코드를 입력하면, 해당 채널 코드를 갖고 있는 채널 페이지로 이동할 수 있다.
입력한 채널 코드와 같은 채널 코드를 갖고 있는 채널이 있다면, 채널 목록 페이지로 이동한다.

완료 조건 ✅

채널 코드를 입력할 수 있는 Input 컴포넌트를 생성해야 한다.
만약, 입력한 채널의 코드가 다른 채널의 코드와 동일하다면, 동일한 채널 코드를 갖는 채널 목록을 보여주는 페이지가 보여진다. (채널 목록은 스크롤 되어야 한다.)
채널 목록 페이지에는 헤더와 채널 정보가 담겨있는 채널 카드 컴포넌트 리스트가 보여진다.
특정 카드를 클릭하면 해당 채널 페이지가 보여진다.
선택된 채널 페이지로 이동할 때, 채널 컴포넌트가 로딩되기 전까지는 로딩화면이 보여진다.
같은 채널 코드를 갖고 있는 채널이 없다면, 바로 채널 화면이 보여진다.

레퍼런스 📚

2019.11.08 (금) 오후 미팅 로그

2019.11.08 오후 MEETING

MEETING 목적 🚩

프로그래밍 언어
인프라 아키텍쳐

MEETING 내용 ✍️

타입스크립트 vs 자바스크립트

새로운 언어를 선택했을 경우, 비용 발생
- 팀원 1명을 제외한 사람들은 해당 언어가 처음
- 개발속도 저하
- typescript가 추구하는 코드 스타일 숙지 등에서 발생하는 시간적 비용
- graphQL과 같은 다른 라이브러리와 타입스크립트를 함께 사용할 경우 발생하는 문제에 대한 정확한 예측/예상이 어려움

인프라

web 서버 (클라이언트)
api/chat/image 서버
mongo db 서버
image converter 서버
redis 캐싱 (추후 생각하자)
(분리 된 도커 컨테이너)

마이크로 서비스를 DB에도 적용할 것인가?

mongo db 서버 (mater/slave)?
일단은 하나로 가자

SQL vs NoSql

채팅과 같은 로그 형태의 데이터, 빠른 처리가 필요한 데이터에는 NoSql이 적당

MEETING 결과 📌

자바스크립트를 사용하자.
자바스크립트로 버전 1.0을 완성하고, 추가되는 새로운 모듈의 개발 언어를 typescript를 이용해 개발해보자.
인프라에 대한 논의는 호눅스 마스터님께 물어본 뒤 한번도 회의 시간을 갖자.
NoSql로 가자!

[Epic#24, Epic#26] (스피커) 필기 도구를 이용해 슬라이드에 원하는 필기를 기입할 수 있다.

(스피커) 필기 도구를 이용해 슬라이드에 원하는 필기를 기입할 수 있다.

스피커는 슬라이드에 필기도구를 이용해 필기를 기입할 수 있다.

완료 조건 ✅

채널 화면 좌측의 필기 버튼 UI 구현
'볼펜' 필기 도구 버튼이 활성화되면, 슬라이드 내에서만 필기도구로 필기를 할 수 있어야 한다.
'지우개' 필기 도구 버튼이 활성화되면, 슬라이드 내 필기를 지울 수 있어야 한다.
'형광펜' 필기 도구 버튼이 활성화되면, 슬라이드 내에서만 필기 도구로 필기를 할 수 있어야 한다. (역시 지우개로 지울 수 있다.)

레퍼런스 📚

2019.11.06 (수) 오후 미팅 로그

2019.11.06 오후 MEETING

MEETING 목적 🚩

MEETING 내용 ✍️

저번 주 무엇을 고민해봤나요?

김도현
- prop-types
- Next : express + router + react
- Redux, Redux-saga
- React-Router
김재원
- ppt serving
- GraphQL
- Redux-Saga
이미림
- redux/redux saga vs graphQL
- ts vs js
- graphQL vs socket io
조애리
- Github Actions
- Jenkins
- Docker

기술 스택에 대해서

언어

Typescript (Fix)

GraphQL 왜 써야하는가

Fetching 할때 1번의 request 로 필요한 데이터만 얻어오기 위해서(한 페이지에 여러 컴포넌트 있는 우리 서비스에 적합)
Query 캐싱기능을 활용할 수 있다.
주변 고수의 강력한 추천.
REST API: big data + GraphQL: plain data
단점
- Http caching 지원하지 않음
- base64 인코딩

상태관리

next
- server-side-rendering
- 검색 최적화
- 초기로딩 빠르게
- page 단위 플랫폼 vs 클라이언트 앱
GraphQL (Fix)
- apollo-client
- apollo-server
- websocket (ie10+) + PubSub(Redis)

styled-components

styled-components (Fix)
- 스타일 동적 관리 (반응형 쉬움)
material-ui (Fix)
- antd vs material-ui (경험상 material-ui 가 더 편하다고 판단)

ppt, pdf

ppt/pdf/md/xls (현실적)
- image converter server
- image slide viewer
ppt -> object -> ppt viewer (좋은 모듈...?)

test

jest (Fix)
- unit test (협업환경)

DB

erd 중요포인트가 달라짐
- sql - 중복성 줄이는 정규화 / nosql - 대용량 빠르게 처리
mongoDB (Fix) - mongoose(odm - object data mapping)
typescript 에 잘맞는 orm 찾기(orm - object relational mapping)

인프라/보안

msa(micros service architecture)
- nginx (ssl 인증)
- web application server (React.lazy => code split)
- chat server
- image converter server
- image server
- graphql api server
CI / CD (Fix)
- github actions (github 저장소 사용 연동 편리하지 않을까 생각해서...)
- 테스트 통과 시 merge-> actions로 build, test실행 -> docker image build -> deploy
- 컨테이너만 재가동

MEETING 결과 📌

기술 목록

프로그래밍 언어: Typescript
pdf, ppt 파싱 기술: imagemagick, libreoffice
클라이언트
- 상태관리: apollo-client
- 뷰: react.js
- 스타일링: styled-components
- ajax 통신: apollo-client
서버
- 프레임워크: express
- 데이터베이스: mongoDB
- ORM: mongoose.js
- 캐싱: redis.js + 캐싱전략
인프라
- micro service architecture: web, api, image converter, image
- CI/CD: docker, github actions

공부해야할 우선순위

Typescript
GraphQL
ppt, pdf 서빙 혹시 더 좋은 방법 / 관련 모듈
Github Action / Docker

[Epic#32] 스피커의 화면을 동기화하여 볼 수 있다.

스피커의 현재 슬라이드 페이지를 리스너가 구독하도록 한다.

완료 조건 ✅

슬라이드 동기화 버튼 UI구현
스피커의 현재 위치를 DB에 저장한다.
리스너가 채널 접속시 스피커의 현재위치를 동기화 하여 보여준다.
클라이언트에서 스피커의 위치를 리스너가 subscribe해야한다.
동기화 활성화 시 리스너와 스피커의 슬라이드가 동기화 된다.

레퍼런스 📚

화면기획서

슬라이드 이미지 요청 방식 어떤 것이 좋을까요?

이슈 ❗️

채널 접속시 슬라이드 이미지를 가져오기 위한 초기 계획은 아래와 같습니다.

고유한 채널 아이디를 이미지 directory로 하여 오브젝트 스토리지에 저장
채널 접속 시 해당 directory에 접근하여 내부의 모든 이미지 파일 url을 요청하는 api구현

2번을 수행하기 위해서는 aws-sdk 모듈과 s3모듈이 필요합니다. 해당 모듈의 listObject메소드를 통해 특정 디렉토리의 모든 파일을 읽어올 수 있습니다. 그러나 사용자가 채널에 접속할때마다 오브젝트 스토리지의 파일을 읽는 것은 상당한 리소스 낭비라고 보여집니다.

나의 의견 😎

api를 따로 만들지 않고 기존 channel 관련 graphQL 로직이 url 데이터를 처리하기.

- 채널스키마에 배열 타입의 slideUrls 필드 추가   
- converter server에서 오브젝트 스토리지에 업로드 후 응답에 slideUrls 포함
-slideUrls를 createChannel resolver를 통해 DB에 저장
- checkChannel resolver에서 slideUrls도 함께 return 하도록 수정
- 클라이언트의 채널컨텍스트가 slideUrls 배열을 하위 컴포넌트에 provide하도록 수정

이렇게 수정한다면 checkChannel이라는 resolver의 네이밍도 변경이 필요할 것 같습니다.
단순히 채널의 상태를 체크하는 쿼리에서 채널 정보를 요청하는 쿼리로 바뀌는 것이기 때문입니다.
getChannelInfo는 어떨까요?

전체 슬라이드 페이지 수를 DB에 저장하고 클라이언트에서 해당 파일 경로를 찾기.

현재 오브젝트 스토리지에 업로드되는 파일 경로는 아래와 같은 규칙을 가집니다.

https://kr.object.ncloudstorage.com/dropy/2SjwdQ3Med4gpRP11XDGvu/slides/1

따라서 전체 페이지수와 채널 아이디만 알고 있으면 클라이언트 단에서 모든 슬라이드 이미지에 접근이 가능합니다.
사실상 오브젝트 스토리지의 이미지에 쉽게 접근하기 위해 위와 같은 규칙으로 url을 설계한 것이므로, 이 방식을 사용하는 것도 괜찮다고 생각합니다.

슬라이드 이미지 요청 방식과 resolver네이밍에 더 좋은 아이디어가 있다면 제안해 주시면 감사하겠습니다~😊

레퍼런스 📚

s3-listObjects

SNS로그인 기능의 리팩토링이 필요합니다

1주차 스프린트 (로그인) 리팩토링

이슈 ❗️

코드 컨벤션이 잘 지켜지지 않았습니다.
deprecated상태인 외부 모듈이 있습니다.(apollo-link-state)
server api 폴더 구조에 정리가 필요합니다.
함수에 주석이 없어 코드를 파악하기 불편합니다.

코드리뷰 반영이 필요합니다!

클래스 내부에서만 사용되는 함수는 앞에 _를 붙이면 좋을 것 같습니다.
중복되는 setAuth함수를 미들웨어로 빼면 좋을 것 같습니다.
패스포트 미들웨어의 중복되는 코드를 type파라미터를 받아 처리하면 좋을것 같습니다.
User.upsertUser -> User.upsert
app인스턴스 stop함수 필요
this.app에 대한 방어코드 필요

레퍼런스 📚

[Epic#8, Epic#10] 스피커, 리스너의 히스토리카드로 채널 입장 가능

채널 정보를 다뤄야 한다.
회원 정보를 다뤄야 한다.
데이터베이스 스키마 정의를 해야 한다.

완료 조건 ✅

스피커와 리스너를 구별해야 한다.
GraphQL을 이용해 최소한의 정보를 불러와야 한다.
히스토리카드 UI 컴포넌트를 생성해야 한다.
서버와 연동해야한다.

레퍼런스 📚

[Epic#17, Epic#39] 채팅창을 토글할 수 있다.

채팅창은 토글 가능 해야한다.

완료 조건 ✅

채팅창 토글버튼 UI를 클릭시 채팅뷰가 토글된다.
토글될 때 적절한 애니메이션이 발생한다.(옵션)

레퍼런스 📚

[컨버터 서버 성능 개선] 스트레스 테스트로 병목구간 찾기

[컨버터 서버 성능 개선] stess test로 병목구간 찾기

스트레스 테스트를 통해 슬라이드 컨버터 서버를 개선한다.
지난 데모데이 테스트 때, 컨버터 서버가 가장 트래픽을 버거워 하는 모습을 보였다.
이미지를 다운로드하는 과정, 컨버팅 하는 과정, 업로드 하는 과정 이 세 구간에서 어떤 부분에서 병목이 발생하는지 파악하고 개선해본다.

완료 조건 ✅

테스트 시나리오 짜기
ngrinder 테스트 스크립트 짜기
테스트용 mock 서버 만들기
테스트 및 모니터링 진행
결론(병목구간 및 개선 필요점) 도출

레퍼런스 📚

성능,부하,스트레스 테스트에 대하여

[Epic#38] 이모지를 채널에 날릴 수 있다!🤭

리스너는 화면에 이모지를 날릴 수 있다.
이모지를 날리면서 감정을 공유 할 수 있다.
ManDay: 2

완료 조건 ✅

이모지를 선택할 수 있는 버튼이 필요하다.
이모지를 선택하는 버튼을 Click or Hover하면, 사용가능 한 이모지들이 나열된다.
이모지를 클릭하면, 이모지가 슬라이르 쪽으로 랜덤한 방향으로 날라간다.
이모지가 날라가기 시작하면, 채널 내 모든 사람들이 날라가는 이모지를 볼 수 있다.
이모지가 하나가 아닌 여래가도 정상적으로 잘 날아간다.
이모지가 일정 height에 도달하면, 남지 않고 파괴된다.(🤭)

레퍼런스 📚

2019.11.18 오후 MEETING

MEETING 목적 🚩

server-api 폴더 구조에 대해 논의한다.
일관성 없는 폴더 구조가 발견되어 이를 수정하고, 현재 개발 상황에서 가장 적합하고, 일관된 폴더 구조를 정해야할 필요가 있다고 생각합니다.

MEETING 내용 ✍️

각자가 생각하는 server-api에 적절한 폴더 구조

김도현
- 역할 중심의 폴더 구조
- 많은 페이지가 없는 구조이므로, 구지 express, GraphQL을 나눌 필요 없다고 생각

server-api
    ㄴ src
        ㄴauth
            ㄴ passport.js
            ㄴ tokenizer.js
        ㄴ typedefs
        ㄴ resolvers
        ㄴ models
        ㄴ utils
        ㄴapp.js
        ㄴindex.js

김재원
- 역할 중심의 폴더 구조

server-api
    ㄴ express
        ㄴ routers
            ㄴ auth.js
        ㄴ middlewares
            ㄴ tokenizer.js
        ㄴ app.js
    ㄴ apollo
        ㄴ typedefs
        ㄴ resolvers
        ㄴ app.js
    ㄴ db
        ㄴ models
        ㄴ connect.js
    ㄴ app.js
    ㄴ index.js

이미림
- 도메인 중심의 폴더 구조

server-api
    ㄴ src
        ㄴ auth
              ㄴ routers
              ㄴ middlewares
              ㄴ models
        ㄴ users
             ㄴ typedefs
             ㄴ resolvers
        ㄴ slides
             ㄴ typedefs
             ㄴ resolvers
        ㄴ app.js
        ㄴ index.js

조애리
- 역할 중심의 폴더 구조
- auth 서버(express)와 api 서버(graphQL)를 분리

server-auth
      ㄴ routers
             ㄴ auth.js
      ㄴ middlewares
              ㄴ tokenizer.js
      ㄴ models
      ㄴ app.js
      ㄴdockerfile
server-api
     ㄴ models
     ㄴ typedefs
     ㄴ resolvers
     ㄴ app.js
     ㄴdockerfile

레퍼런스 📚

Three ways to structure your GraphQL code with Apollo Server

MEETING 결과 📌

역할 중심의 폴더 구조
auth 서버 역할의 express 와 auth 외의 api를 처리하는 역할의 apollo로 분리하여 폴더 구조를 재구조화하도록 함

server-api
    ㄴ express
        ㄴ routers
            ㄴ auth.js
        ㄴ middlewares
            ㄴ tokenizer.js
        ㄴ app.js
    ㄴ apollo
        ㄴ typedefs
        ㄴ resolvers
        ㄴ app.js
    ㄴ db
        ㄴ models
        ㄴ connect.js
    ㄴ app.js
    ㄴ index.js

[Epic#14, Epic#35] 슬라이드를 앞뒤로 넘길 수 있다.

채널입장 시 슬라이드 뷰어가 생성된다.
슬라이더 뷰어의 indicator를 통해 슬라이드를 앞뒤로 넘긴다.
첫페이지와 마지막페이지에서는 각각 왼쪽, 오른쪽 indicator가 비활성화 된다.

완료 조건 ✅

슬라이드 뷰어 UI 구현
슬라이드 back, foward 페이지 이동 구현
이미지 로딩 로직 구현

레퍼런스 📚

화면기획서

2019.11.04 (월) 오후 미팅 로그

2019.11.04 오후 MEETING

MEETING 목적 🚩

저녁 7시 기획 회의 잊지 않기
기획 구체화
- 서비스 대상 구체화
- 핵심기능(가장중요)
  - 기술적으로 도전적인 기능
  - 서비스 대상이 느끼는 효용(=서비스의 강점)
- 간단한 UI/UX
  - 기초 와이어 프레임
기술적으로 심화해서 고민해 볼 포인트
기획에 따라서 추가적으로 공부해둬야할 부분 (ex)소켓 통신 방식)

MEETING 내용 ✍️

서비스 대상 구체화에 대해 논의한다.

간단한 UI/UX 에 대해 고민한다.

1차 서비스 와이어 프레임

김도현

김재원

이미림

조애리

MEETING 결과 📌

1. 서비스 대상

발표자와 청강자 사이의 커뮤니케이션이 필요한 상황

수업
컨퍼런스 세미나, 라이트닝 토크
워크숍
부스트 캠프 마스터 클래스 마스터 클래스

2. 구체적인 서비스 아이디어

2-1. 채팅

2-1-1. 채팅방 생성 시

마스터 권한
- 만료기간 - 만료기간이 다 된 채팅방이더라도 백업 db에 저장됨
  - 만료기간 없는 채팅방(유료)
  - 만료기간이 있는 채팅방(무료)
- 익명/로그인 채팅방
  - 익명이 가능한 채팅방
  - 로그인한 유저만 가능한 채팅방
- 이모지 이펙트

2-1-1. 채팅방 기능

채팅 좋아요 순, 최근 순 등 정렬
이모지 채팅화면에 날리기
특정 채팅글에 좋아요
댓글창은 토글 가능, 댓글을 클릭하면 해당 슬라이드로 이동
지나간 발표슬라이드는 보여지도록 UX UI

2-2. 발표 화면 (ppt > pdf > md, word, csv 등등)

2-3. 발표자가 사용하는 도구 -- version 1.0

2-4. 청강자 필기 기능 -- version 2.0

기타

슬라이드 공유 플랫폼 (추가)
친구가 있는 방 타고가기

[ Hotfix ] 개인정보 처리 방침 추가

구글 oAuth 로그인을 승인 받기 위해서 개인정보 처리 방침 페이지가 필요하다.
현재 사용하지 못하는 oAuth 를 막아둔다.

완료 조건 ✅

개인정보 처리 방침 페이지
현재 인증 중이라 구글 oAuth, 네이버 oAuth 사용이 어렵다는 문구 추가

레퍼런스 📚

2019.11.15 (금) 오후 미팅 로그

2019.11.15 오후 MEETING

MEETING 목적 🚩

컴포넌트 스타일링에 대한 코드 컨벤션 확립
리액트 컴포넌트 코드와 스타일 컴포넌트 코드 분리에 대한 논의

MEETING 내용 ✍️

`Material-UI` 와 `Styled-Components` 를 같이 사용하는 것

김도현
- 두개를 같이 쓰면 Material-UI 를 커스터마이즈 해야하기 때문에 비용이 더 들 수 있다. 하지만 Material-UI를 사용하지 않는다면, CSS를 다루는 실력이 매우 향상될 수 있기 때문에 둘 다 좋은 방법이라 생각한다.
김재원
- Material-UI 를 씀으로써 접근성을 자연스럽게 보완할 수 있는 장점이 있지만, 기존의 스타일을 수정해야하기 때문에, 바로 만드는 것보다 비용이 조금 더 들 것 같다는 생각이 든다. 장단점이 있기에 둘다 좋은 방법이라고 생각한다.
이미림
- 일반 버튼, 토글 버튼, 모달창 등의 컴포넌트는 Material-UI를 사용하되, Wrapper 컴포넌트 (헤더, 채팅창 등)은 Styled-Component로 직접 구현하는 것이 좋다고 생각한다.
- 컴포넌트 이름의 폴더에 리액트 컴포넌트 파일과 해당 컴포넌트 스타일 코드가 있는 styles.jsx 파일을 만들어 리액트 코드와 스타일 코드를 분리하는 것이 좋다고 생각한다.
조애리
- Material-UI 를 쓰지 않았을 때 통일된 디자인 시스템을 설계해야하는 비용이 또 들 기 때문에 프로젝트 차원에서 봤을 때 쓰는 것이 더 좋을 것이다.

`Styled-Components` 사용에 대한 컨벤션

김도현
- 실무에서 사용되는 프로젝트들을 살펴봤을 때, 스타일 컴포넌트가 분리된 경우를 많이 봤는데 로직에 대한 가독성이 확실히 좋게 느껴졌다.
김재원
- 스타일 테마를 컴포넌트에서 사용시 익명함수로 항상 만들어주면 가독성 측면에서 안좋아이며 공통된 로직이 눈에 너무 많이 보인다. 테마 유틸을 따로 함수로 관리해서 이를 import 해서 사용하자.
이미림
- 스타일 컴포넌트는 가독성을 위해 별도의 파일로 분리되어있는 것이 좋을듯 하다. 파일을 분리해두고 한번에 S 라는 변수명을 import 해서 사용하자.
조애리
- 스타일 컴포넌트에 css 작성시 px 값으로 넣어주기보다는 함수로 만들어서 반응형에 유연하게 대응 가능한 시스템을 만들자.

MEETING 결과 📌

Material-UI와 Styled-Components 를 같이 사용한다.
Material-UI의 기본테마를 우리 디자인에 맞게 바꾼 후 사용한다.
스타일 컴포넌트를 별도의 파일로 분리해서 관리한다.
스타일 컴포넌트를 import 할때는 S 라는 변수명을 활용해서 한번에 한다.
스타일 컴포넌트 내에서 테마를 사용할 때는 테마 유틸을 만들어서 활용한다.
스칼라 값은 pxToRem 함수로 항상 반응형에 대응할 수 있는 시스템을 만들어 둔다.

[Epic#1] 사용자는 SNS 계정으로 dropy에 로그인 한다.

초기 개발환경을 세팅하고, 유저 소셜 로그인 기능을 구현한다.
로그인 기능 구현에 필요한 유저 테이블 설계를 한다.

완료 조건 ✅

설계

DB User table 설계

개발환경 세팅

서버사이드 환경 구축 (Express, Apollo server, MongoDB)
클라이언트 사이드 환경 구축 (React, Apollo client)
유저인증 방식/기술 결정 (Session vs Token)
Oauth 적용 (Google, Kakao, Naver)

UI

헤더 UI
로그인 UI (버튼 3개)

레퍼런스 📚

[Epic#11] 메인 화면에서 슬라이드를 드롭다운 할 수 있다.

메인화면에서 파일을 드롭다운 할 수 있어야 한다.

완료 조건 ✅

메인 화면의 Drag & Drop Page에 파일을 드롭다운 할 수 있다.
파일을 드롭다운하면, 파일이 image-converter 서버로 전송된다.
image-converter 서버의 응답이 있기 전까지는 유저에게 로딩화면을 보여준다.
image-converter 서버의 응답이 ok라면, 채널 화면이 보여지도록 한다.
image-converter 서버의 응답이 ok가 아니라면(error 발생), 에러 페이지를 보여준다.

레퍼런스 📚

스프린트 회고 로그 (2차)

스프린트 회고 로그 (2차) 🏃‍♀️🏃‍♂️

스프린트 단위 🗓

4일 (2019.11.18(월) ~ 2019.11.22(목))

스크럼 마스터 👨‍🔧

이미림 @always-awake

주간 회고 내용 💬

김도현
- 팀원들이 모두 바빴지만 일정에 맞추어 끝낸 점이 만족스럽다.
김재원
- 주말에 스프린트를 다 끝내버린 느낌이라 제대로 회고가 필요한 것 같다.
이미림
- 저녁엔 개인 공부시간이 필요한데 페어프로그래밍으로 매일 야근하다보니 학습시간이 없어 아쉬웠다.
조애리
- 이번 스프린트 목표를 모두 도달하여 매우 기쁘지만 기술부채가 늘어나는 것 같아 걱정이다.

잘했으며 앞으로 계속할 일 🍀

김도현
- 많은 일정을 맞춘 것은 우리가 그만큼 결속력이 높아졌다는 것 같다.
- 내가 아닌 팀을 위해 하는 행동들이 우리를 더욱 강하게 만드는 것 같다. (주말에 개인 시간을 할애)
김재원
- 다들 요구사항을 구현하는데 급급하지 않고 시간을 쪼개 학습에 투자한 것
- 덕분에 라이브러리의 좋은 기능들을 찾아서 더 나은 코드를 만들었고, 또한 클린한 코드가 나올 수 있었다고 생각함.
이미림
- 이슈 발생 시 팀원이 합심하여 해결방법을 찾는 프로세스
- 기술 구현 외에 대한 논의가 필요할 때, 구현에 급급하지 않고 열심히 자신의 의견을 팀원들과 공유하는 것이 정말 좋았다.
조애리
- 지난 스프린트 회의에서 도입했던 스크럼시간에 노트북 닫기가 잘 지켜져서 만족스러웠다.
- 페어프로그래밍 때 시간 단위로 좀더 짧게 드라이버를 교체하여 집중도가 더 높아진것 같다.

더 잘했으면 좋았을 일 😥

김도현
- 일정을 제대로 지키지 못한 것이 아쉽다.
- 구체적으로 일정을 산정하지 않아서 계획이 틀어진것 같다.
- 앞으로는 부스트캠프 일정과 개인 일정을 스크럼 마스터가 더욱 신경써서 관리하면 좋을 것같다.
김재원
- 일정을 타이트하게 잡았기에 변수에 대응하지 못해 주말까지 동원해서 기능개발을 진행해야 했던 부분이 아쉬웠다.
- 무조건 해결해야하는 이슈와 선택적으로 해결해야 하는 이슈를 분류해서 여유있게 일정산정을 해야할 것 같다.
- 주말은 가능하면 개발하는 시간은 없도록 하고, 공부하는 시간을 가지는 것이 좋다고 생각한다.
이미림
- 스크럼 마스터로서 역할을 잘 하지 못한것 같다.
  - 마스터 클래스 시간 파악
  - 카모아의 방문에 대해 인지하지 못한 점
- 일정에 주의하지 않은 것이 원인이다.
- 다른 스크럼 마스터는 일정파악에 신경써주면 좋겟다.
조애리
- manday가 지켜지지 않아 아쉽다.
- 변수를 고려하지 않고 타이트하게 manday를 산정했기 때문인것 같다.
- 앞으로는 스프린트 백로그를 더 구체적으로 산정했으면 좋겠다.

다음 스프린트에 적용할 것 📈

변수를 고려하여 manday를 산정하고 일정을 잡자.
스크럼마스터가 부스트캠프 일정과 팀원 개인 일정을 미리 파악하자.

스프린트 백로그 ✍️

[Epic#11] 업로드 한 슬라이드를 이미지 형태로 볼 수 있다.

Issue: #23
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 1.5
Status: 완료

[Epic#12] 파일 업로드 시 새로운 채널이 생성된다.

Issue: #25
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 1
Status: 완료

[Epic#15, Epic#41] 채널에 입장하여 채팅할 수 있다.

Issue: #24
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 2
Status: 완료

스타일드 컴포넌트 테마 유틸 적용시 memoize 패턴 적용 제안

현재 테마 스타일 적용 시 currying 을 활용한 익명함수를 생성해서 넣어주고 있습니다.
따라서, 앱의 규모가 커질수록 동일한 기능을 하는 함수가 중복되는 현상이 더욱 커질 것으로 생각됩니다.
스타일 유틸에 memoize 패턴 적용을 하는 것이 미래를 위해서 좋을 것이라 생각합니다.

이슈 ❗️

16px 같은경우 폰트에서 아주 많이 사용될텐데, 매번 새로운 익명함수가 생성됩니다.
큰 문제가 되지 않을 수 있지만, 불필요한 중복이 발생되고 있다고 생각합니다.

나의 의견 😎

memoize 패턴의 경우 일반적으로 연산이 오래걸리는 작업을 캐싱해두는 기법이지만, 지금의 상황에서 기존의 코드를 건드리지 않고 중복을 줄이는 방식으로 쓸 수 있다고 생각합니다.

const memoize = (fn) => { /* TODO */ }
const px = memoize((val) => ({ theme }) => theme.typography.pxToRem(val));

레퍼런스 📚

위키-메모이제이션

[Epic#27, Epic#34] 채널의 슬라이드를 전체화면으로 볼 수 있다.

채널의 슬라이드를 전체화면으로 볼 수 있어야 한다.
가능하다면, 이벤트 동작도 처리할 수 있게 만들어야 한다.
ManDay : 1

완료 조건 ✅

채널에 있는 슬라이드를 전체화면으로 전환시킬 수 있다.
전체화면일 때, 동기화가 이루어 져야 한다. ( 리스너 )
가능하다면, 전체화면에서 특정 작업을 진행할 수 있다.( 이벤트 )

레퍼런스 📚

[Epic#15, Epic#41] 채팅 스타일 및 애니메이션 적용

좋아요 버튼 클릭시 애니메이션이 적용된다.

완료 조건 ✅

채팅창 너비 변경
채팅에 좋아요를 누를 때 천천히 변화하는 애니메이션 적용
채팅 정렬시 스크롤 변경 알고리즘 수정

레퍼런스 📚

[컨버터 서버 성능 개선] 방어 시스템 설계

지난 데모데이 테스트 때, 컨버터 서버가 다운되었다.
메시징큐를 도입하여 동시에 많은 요청이 발생했을 때 대처할수 있는 시스템을 구현한다.

완료 조건 ✅

감당할 수 없는 트래픽이 몰려도 서버가 터지지 않는 방어 시스템 설계하기
파일 컨버팅에 대한 Progress 정보를 제공해 UX 를 개선한다

레퍼런스 📚

성능,부하,스트레스 테스트에 대하여

[Epic#14, Epic#35] 슬라이드 UI 보완

MVP로 구현했던 슬라이드 뷰어 컴포넌트를 디테일하게 구현해야 합니다.
슬라이드가 겹처지는 부분과 애니메이션을 구현할 예정입니다.

완료 조건 ✅

슬라이드의 남은 페이지를 표시하는 겹쳐진 페이지 UI를 구현한다.
슬라이드 비율에 따라 렌더링 되어야 한다.
첫장과 마지막장에는 각각 왼쪽, 오른쪽에 겹쳐진 페이지가 보이지 않도록 구현한다.
두번째장과 뒤에서 두번째장에서는 겹쳐진 페이지가 한장만 보이도록 구현한다.

레퍼런스 📚

화면기획서

회의룸에서 미팅시 제안

이슈 ❗️

회의룸에서 미팅시에 논리적으로 이야기하는 훈련이 필요해 보입니다.
추 후에 데모를 할 때, 훈련이 필요해 보입니다. ( 제가 발표를 잘 못하기도 합니다.🐤 )

나의 의견 😎

회의룸에서 미팅을 할 때, 본인의 의견을 이야기를 논리적으로 이야기 합니다.
이 때, 본인의 의견을 말하는 사람은 일어서서 세명을 마주하며, 화이트보드를 적극 활용했으면 좋겠습니다.
또한 남은 세 명의 팀원도 역시 논리적으로 반박을 하며, 논리력을 같이 향상시켰으면 좋겠습니다.

레퍼런스 📚

[Epic#15, Epic#41] 채널에 입장하여 채팅할 수 있다.

[Epic#15, Epic#41] 채널에 입장하여 채팅할 수 있다

스피커와 리스너가 사용할 수 있는 채팅을 구현한다.

완료 조건 ✅

사용자가 채널에 입장할 수 있다.
사용자가 채팅을 입력할 수 있다.
채팅 UI에 입력 버튼이 있다.
입력한 채팅이 있는 상태에서 입력 버튼을 누르면, 채팅이 화면에 나타난다.
화면에 나타난 채팅이 상태에 따라 위치가 변동 된다.

레퍼런스 📚

2019.11.05 (화) 오후 미팅 로그

2019.11.05 오후 MEETING

MEETING 목적 🚩

기획 구체화
- 서비스 대상 구체화
- 핵심기능(가장중요)
  - 기술적으로 도전적인 기능
  - 서비스 대상이 느끼는 효용(=서비스의 강점)
- 간단한 UI/UX
  - 기초 와이어 프레임
기술적으로 심화해서 고민해 볼 포인트
기획에 따라서 추가적으로 공부해둬야할 부분 (ex)소켓 통신 방식)

MEETING 내용 ✍️

플랜 B

이미림:
- 옵션을 통해 최적 예약해주는 서비스
- 스카이스캐너처럼 영화 상영정보 스크랩핑 + 예약
- 클라우드 펀딩
김도현:
- 헤어스타일 db화, 추천
조애리:
- 내기 사이트(feat. 토토) + 음식 결제
- 비트코인 투자
김재원:
- 드라이브
- 댓글 익스텐션
- 코드 테스트 시각화 서비스

플랜 A

이전 기획 회의인 (#4 )를 이어서 세부사항을 기획한다.

핵심기능인 파일스트리밍에 대해 논의한다.

MEETING 결과 📌

플랜 A

기능

발표자 유저 스토리

발표준비자는 pdf를 가지고 있다.
우리 서비스에 접속한다.

메인화면은 방 입장 UI, 로그인/회원가입 UI, pdf드롭다운 UI를 가진다

로그인 사용자에 한하여 pdf를 드롭하라고 안내한다.
pdf를 드롭하면 새로운 방이 생성된다.(url) 🍎(파일스트리밍)
설정탭에서 방 옵션(익명, 만료기간)을 변경할수 있다. (디폴트는 익명, 만료기간00)

발표자는 코드 혹은 링크를 공유할수 있다.
발표자는 슬라이드를 양옆으로 넘길수 있다.
발표자는 채팅창을 토글할 수 있다.

발표자는 발표자 도구로 하이라이팅, 그림그리기, 지우기 등을 할 수 있다. 🍎
사용자는 발표자의 필기를 동기화하여 확인할 수 있다. 🍎
-> 해당 기능은 토글 할 수 있다

발표자는 발표가 끝나면 발표자료 공유하기 버튼을 누를 수 있다.

참여자 유저 스토리

유알엘(or 룸코드)을 받은 참여자는 슬라이드 방에 입장할수 있다.
발표자의 슬라이드 화면을 동기화하여 볼 수 있다.
참여자는 이전 슬라이드를 넘겨 확인할 수 있다.
참여자는 발표자 동기화 버튼을 눌러 현재 발표중인 슬라이드로 이동할 수 있다.

채팅창을 토글할 수 있다.
채팅을 좋아요 순, 최신 순으로 정렬할 수 있다.

질문이 생기면 채팅으로 질문을 남긴다.
질문은 해당 슬라이드 (번호)를 포함하여 클릭시 해당 슬라이드로 이동한다.

각각의 말풍선(채팅 화면 내 말풍선)은 좋아요 버튼을 가진다.

발표자가 발표를 마치면 참여자는 슬라이드를 자유롭게 확인할 수 있다.
발표자가 발표를 마치고 발표자료 공유버튼을 누르면 자료를 다운로드 할수 있다.🍎

로그인 유저 스토리

로그인 유저는 마이페이지를 확인할 수 있다.
마이페이지에는 발표히스토리, 참여히스토리를 가진다.

version2 추가 기능

준비완료 버튼 및 투표

방장이 준비완료 버튼을 누르면 나머지 참가 사람에게 준비되셨나요? yes or no alert 창이 떠서 출석 체크를 가능하다.
투표도 비슷한 방식으로 진행

방장의 채팅 드래그 앤 드랍

방장이 채팅에 있는 이미지 및 다른 사람이 쓴 글을 드래그 앤 드랍하면 원하는 만큼 메인 화면에 노출 시켜 줄 수 있다.

채팅의 이모티콘 및 좋아요 버튼

방장의 설명 및 채팅에서 좋은 글이 있다면 좋아요 버튼을 누를 수 있고 잠시동안 노출 시킬 수 있다.

@loadOne @always-awake @aereeeee

[Epic#29, Epic#36] 자료 다운로드 버튼을 활성화할 수 있다.

채널에 공유된 자료를 다운받을 수 있어야 한다.

완료 조건 ✅

다운로드 버튼이 필요하다.
기존 UI에 맞춰 버튼을 생성한다.
Object Storage에 있는 URL을 불러올 수 있다.
다운로드가 정상적으로 작동한다.

레퍼런스 📚

[Epic#16] 채팅을 공감순/최신순으로 정렬할 수 있다.

채팅창을 공감순/최신순 정렬 버튼으로 정렬 가능하다.

완료 조건 ✅

채팅을 공감순으로 정렬해서 렌더링 가능하다.
채팅을 최신순으로 정렬해서 렌더링 가능하다.(default)
현재 정렬상태를 UI로 강조한다.

레퍼런스 📚

2019.11.07 (목) 오후 미팅 로그

2019.11.07 오후 MEETING

MEETING 목적 🚩

앞으로 쓰일 라벨 컨벤션을 정한다

MEETING 내용 ✍️

프로젝트를 진행하면서, 쓰일 라벨을 정한다.

팀원들의 의견

김도현

라벨만 보고 어떤 이슈인지 파악이 쉽게 될 수 있도록 큰 부류로 라벨을 나눈 뒤, 한 depth를 더 분류해 세부사항을 나열하는 방식이 좋을 것 같아 보입니다. 아래는 예시입니다. 추가로 중요한 순으로 색을 진하게 하는 방법도 있습니다.

BUG : System
BUG : Build
Location : App
Location : Web server
PR target : Master
PR target : ...
PR action : ...
Meeting : ...
Feature

김재원

// 동일한 색상 (연하게)

Priority: High
Priority: Medium
Priority: Low

// 동일한 색상

아이콘 Feat
아이콘 Bugfix
아이콘 Env
아이콘 Test
아이콘 Refactor
아이콘 Discussion
아이콘 Test

// 동일한 색상

Status: Review Now
Status: Stop Review
Status Not now fix

이미림
적절하게 depth를 일부 사용하는 것이 좋다고 생각합니다.
하위 항목/단계/정도 등을 표현할 수 있는 라벨에는 depth를 사용

// 각각 다른 색상

bug
feat
env
docs

// 동일한 색상

important: high
important: low

조애리
(이슈타입에 관한 라벨)

Docs (다큐먼트에 대해서)
Feat (새로운 피쳐)
Fix
Env
Test
Refactor
Discussion

(상태에 관한 라벨)

Status : Review Now
Status : Stop Review
Status : Not now fix

(그외 자유롭게 추가..)

long
short

MEETING 결과 📌

결과

하위항목 포함하는 라벨 (같은 색상으로 한다)

Bug
- system
- build
Location
- web server
- app server
Priority
- high
- medium
- low
Status
- pending
- review now
- review stop
Meeting
- 기획
- 기술
- 일반

하위항목을 포함하지 않는 Type 라벨

아이콘 Feature
아이콘 Bugfix
아이콘 Environment
아이콘 Refactor
아이콘 Discussion
아이콘 Test

@loadOne @always-awake @aereeeee

[Epic#25, Epic#33] 필기 가리기 버튼을 클릭하면, 스피커의 필기 내용이 삭제된다.

필기 가리기 버튼을 클릭하면, 스피커의 필기 내용이 삭제된다.

리스터와 스피커는 필기 가리기 버튼을 이용해 슬라이드 내 필기를 볼수도 있고, 가릴 수도 있다.

완료 조건 ✅

필기 가리기 버튼 UI 구현
스피커는 필기 가리기 버튼을 클릭하면, 자신의 필기를 보이지 않게 할 수 있다.
리스너는 필기 가리기 버튼을 클릭하면, 스피커의 필기를 보이지 않게 할 수 있다.

레퍼런스 📚

스프린트 회고 로그 (3차) 🏃‍♀️🏃‍♂️

스프린트 단위 🗓

4일 (2019.11.25(월) ~ 2019.11.28(목))

스크럼 마스터 👨‍🔧

김재원 @load0ne

주간 회고 내용 💬

김도현
- 버전 1이라는 놀라운 성과를 이루었다.
- 개인적으로는 몸관리를 잘 못해서 아쉬웠다.
김재원
- 버전 1을 완성하여 고생했다고 하고싶다.
이미림
- 버전 1을 완성할줄 몰랐는데 완성이 되어서 팀웤이 좋았다고 생각한다.
- 개인적으로 마지막 날에 참석하지 못해 아쉬웠다.
조애리
- 버전 1을 완성하여 좋았다.
- 발표 준비를 많이 못해서 아쉬웠다.

잘했으며 앞으로 계속할 일 🍀

김도현
- 목요일에 각자 했던 행동들이 멋있었다. 데드라인을 맞추려는 노력, 배포에 대한 책임감, 희생정신(재원)
김재원
- 개발하다 이슈가 있는 부분을 바로 말하고 팀원의 의견을 구하는 것이 좋았다.
- merge 시 충돌을 방지하며 개발한 것이 좋았다.
이미림
- 각자 개발하면서 이슈가 있을 때 회의 하는 등 팀워크가 좋았다.
- 기술공유룰 작성하여 공유한 것도 좋았다.
조애리
- 일 분배를 잘 한것 같다.
- 모두 완성할 수 있는 분량 + merge 시 충돌을 피할 수 있는 범위

더 잘했으면 좋았을 일 😥

김도현
- 개인적으로 감기때문에 힘들었다.
- 다들 집중하고 있어서 질문하기 미안했다.
- 앞으로는 기획이 없는 부분은 스프린트 회의 때 정하는 것이 좋다고 생각
김재원
- 개발하다보니 스크럼 마스터로서 스크럼을 제때 챙기지 못한 경우가 많았다.
이미림
- 코드리뷰 시간을 조정했으면 좋겠다.
- 스프린트 회의 때 리뷰시간을 정해놓으면 좋겠다.
- 코어 시간에 리뷰가 필요한 팀원의 리뷰는 시간 여유가 있는 팀원이 해두되, 리뷰를 하지 못한 팀원은 주말을 이용해 못했던 리뷰 꼭 해주는 시스템 갖추기!
조애리
- 스크럼/wrap-up을 성실히 하지 못해서 아쉬웠다.
- 마스터의 역할이 중요한것 같다.

다음 스프린트에 적용할 것 📈

wrap up을 잘 챙기자
스프린트 회의를 꼼꼼하게 하자 - 구체화 되어있지 않은 부분 구체화

스프린트 백로그 ✍️

[Epic#14, Epic#35] 슬라이드 UI 보완

Issue: #66
Assignee: 조애리
Manday: ?
Status: 구현 중

[Epic#32] 스피커의 화면을 동기화하여 볼 수 있다.

Issue: #47
Assignee: 조애리
Manday: 2
Status: 완료

[Epic#14, Epic#35] 슬라이드를 앞뒤로 넘길 수 있다.

Issue: #42
Assignee: 조애리
Manday: 1.5
Status: 완료

[Epic#11] 메인 화면에서 슬라이드를 드롭다운 할 수 있다.

Issue: #48
Assignee: 이미림 @always-awake
Manday: 1
Status: 완료

[Epic#31] 채널 코드를 입력할 수 있다.

Issue: #50
Assignee: 이미림 @always-awake
Manday: 1.5
Status: 완료

[Epic#13, #37] 공유 버튼을 이용해서 생성한 프레젠테이션 채널 코드를 복사하고, 공유할 수 있다.

Issue: #51
Assignee: 이미림 @always-awake
Manday: 1
Status: 구현중

[Hotfix] 개인정보 처리 방침 추가

Issue: #73
Assignee: 김재원 @load0ne
Manday: Rest
Status: 완료

[Epic#18, #43] 채팅기능 보완

Issue: #55, #62, #64
Assignee: 김재원 @load0ne
Manday: Rest
Status: 완료

[Epic#18, #43] 특정 채팅글에 좋아요 가능하다.

Issue: #40
Assignee: 김재원 @load0ne
Manday: 2
Status: 완료

[Epic#16] 채팅을 공감순/최신순으로 정렬할 수 있다.

Issue: #45
Assignee: 김재원 @load0ne
Manday: 1/2
Status: 완료

[Epic#17, 39] 채팅창을 토글할 수 있다.

Issue: #46
Assignee: 김재원 @load0ne
Manday: 1/2
Status: 완료

[Epic#3] 로그인 된 사용자는 마이페이지로 이동 할 수 있다.

Issue: #41
Assignee: 김도현 @happydhKim
Manday: 1
Status: 완료

[Epic#7] 스피커로써 생성한 채널 목록 확인

Issue: #43
Assignee: 김도현 @happydhKim
Manday: 0.5
Status: 완료

[Epic#8] 스피커 히스토리카드로 채널 입장 가능

Issue: #44
Assignee: 김도현 @happydhKim
Manday: 0.5
Status: 완료

[Epic#10] 리스너 히스토리 카드를 통해 채널로 입장 가능

Issue: #44
Assignee: 김도현 @happydhKim
Manday: 0.5
Status: 완료

[Epic#3] 로그인 된 사용자는 마이페이지로 이동 할 수 있다.

마이페이지 UI 생성해야 한다.
회원 정보를 다뤄야 한다.
데이터베이스 스키마 정의를 해야 한다.

완료 조건 ✅

새로운 페이지를 만들어야 한다.
프로젝트의 컬러에 맞는 UI를 그려야 한다.
기존의 구조에 맞게 컴포넌트를 설계해야 한다.
로그인 된 사용자만 사용하며, 상태를 확인해야 한다.
회원정보를 담은 스키마를 정의해야 한다.
채널정보를 담은 스키마를 정의해야 한다.
히스토리를 담은 스키마를 정의해야 한다.

레퍼런스 📚

[Epic#11] 업로드 한 슬라이드를 이미지 형태로 볼 수 있다.

Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 1.5

완료 조건 ✅

슬라이드(pdf,ppt) 업로드가 가능하다.
업로드된 슬라이드는 서버에서 이미지로 파싱된다.
슬라이드 이미지는 구조화되어 서버에 저장된다.

레퍼런스 📚

[Epic#30] 채널에 참여인원이 몇명인지 확인할 수 있다.

채널에 입장한 사람들이 몇명인지 확인할 수 있어야 한다.

완료 조건 ✅

채널에 사람인원을 표시해줄 Input이 필요하다.
채널에 입장한 사람들을 실시간으로 확인할 수 있다.

레퍼런스 📚

스프린트 회의 로그 (1차) 🏃‍♀️🏃‍♂️

스프린트 목표 🏈

유저가 소셜 계정으로 로그인 할 수 있다.
유저가 로그아웃 할 수 있다.

스프린트 단위 🗓

3일 (2019.11.12(화) ~ 2019.11.15(금))

스크럼 마스터 👨‍🔧

조애리 @aereeeee

회의 내용 💬

4명이 페어 프로그래밍을 진행하며 통일된 개발환경 및 개발패턴을 이해한다.
GraphQL에 대해 학습이 필요한 주차로 일정을 여유롭게 산정한다.
남는 시간에 CI/CD 환경을 완료한다.

스프린트 백로그 ✍️

`#1` 사용자는 SNS 계정으로 dropy에 로그인 한다.

Issue: #9
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 2
- 전체적인 개발환경 셋팅을 먼저 해야한다.
- GraphQL에 대한 학습 및 구조/패턴을 정의 해야한다.
- passport.js 를 이용해 빠르게 로그인 환경을 생성한다.
  (로그인 기능은 우리 프로젝트의 중점적인 기능이 아니라고 판단함)
- 테스트 코드를 작성한다.

`#2` 로그인 사용자는 로그아웃한다.

Issue: #10
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 0.5
- 로그아웃 클라이언트/서버를 구현한다.
- 테스트 코드를 작성한다.

[Epic#15, Epic#41] 채팅 기능 보완

2주차 스프린트 때 완료한 채팅기능이 미흡한 부분이 있어서 보완해야한다.
채팅이 쭉 쌓일 때, 스크롤바의 상태가 가장 최근 채팅을 볼 수 있도록 맞춰져야 한다.
처음 화면 진입시 기존의 채팅들을 불러와야 한다.
채팅을 하면 인풋창이 초기화 되어야 한다.
채팅창에서 엔터키를 이용해도 전송이 가능하다.

완료 조건 ✅

채팅 전송시 Input 창 클리어
채팅 Input에서 엔터키를 이용해서 전송이 가느해야한다.
화면 진입시 기존의 채팅로그를 모두 불러온다.
채팅이 올라오면 가장 최근의 채팅이 보여야한다.

레퍼런스 📚

[Epic#13, Epic#37] 공유 버튼을 이용해서 생성한 프레젠테이션 채널 코드를 복사하고, 공유할 수 있다.

채널 내 공유하기 버튼을 클릭하면, 자동으로 채널 코드가 입력된다.

완료 조건 ✅

채널 내 공유하기 버튼 컴포넌트를 구현한다.
버튼을 클릭하면 채널 코드가 복사된다.

레퍼런스 📚

[Epic#18, Epic#43] 특정 채팅글에 좋아요 가능하다.

채팅에 좋아요가 가능해야 한다.
좋아요는 한번만 가능해야 한다.

완료 조건 ✅

익명의 사용자에게도 익명 사용자 토큰을 넘겨주도록 인증시스템을 수정한다.
좋아요을 하기 위해서 채팅 UI를 완성한다.
DB에 좋아요 로그를 저장한다.
좋아요를 한 채팅은 다시 좋아요 하지 못하도록 한다.
좋아요 상태를 채팅 UI에 표시한다.

레퍼런스 📚

스프린트 회고 로그 (1차)

스프린트 회고 로그 (1차) 🏃‍♀️🏃‍♂️

스프린트 단위 🗓

3일 (2019.11.12(화) ~ 2019.11.15(금))

스크럼 마스터 👨‍🔧

조애리 @aereeeee

주간 회고 내용 💬

김도현
- 체계적인 방식으로 개발을 진행해 나가는 부분이 재밌었습니다. 다들 자기 개성을 잃지 않고 장점들을 잘 살려서 개발을 진행하고 있다는 느낌이 들었고 좋았으며 팀원들에게 감사하다는 생각이 듭니다.
김재원
- 다수가 엄격한 체계를 갖추고 페어프로그래밍한 것은 처음이지만, 4명의 시너지가 맞아서 차근차근 잘 진행된것 같다.
- 배포시간을 못맞춘것이 아쉽다. 다음부터는 스프린트 완료기준을 배포로 가자. 코드프리즈 시간에 맞추어 배포하자.
이미림
- 모두 함께하는 페어프로그래밍 경험이 처음인데, 재밌었고 좋은 경험이었습니다.
- Wrap-up 을 통해 지속적으로 회의방식이나 개발방식을 개선해나가면서 계속해서 더 좋은 협업 프로세스를 만들어갔던게 특히 좋은 경험이었던 것 같습니다.
- 도현님 같은 경우 어떤 사소한 의견들도 들어주고 반응해주는 것이 특히 좋았습니다. 미리 시스템이나 필요한 작업을 직접해보고 팀원들에게 해당 내용을 바로바로 공유해준 점도 좋았습니다.
조애리
- 4명이 함께 페어프로그래밍을 한 경험은 처음이었는데, 우리가 만든 규칙을 지키며 순조롭게 개발을 진행해본 것이 아주 좋은 경험이었습니다.
- 로그인이라는 큰 산을 첫 주에 잘 넘긴 것 같아 아주 뿌듯합니다.

잘했으며 앞으로 계속할 일 🍀

김도현
- 빠듯한 일정이지만 목표를 달성했다.
- passion, energy 등이 좋았다.
김재원
- 빠듯한 일정이지만 목표를 달성했다.
- 변수를 고려한 넉넉한 일정 산정이 좋았던 것 같다.
이미림
- 협업 프로세스 및 개발 방식 등에 대해 팀원 간 서로 피드백을 주면 바로 다음날 적용, 실천하려고 한 점이 좋았다.
- 팀원의 피드백에 공감하고 피드백에 나오게 된 상황에 대해서 정확하게 인지하였기 때문에 가능했던 것 같다.

더 잘했으면 좋았을 일 😥

김도현
- 데일리 스크럼의 의미가 불분명해진 것 같습니다. (형식적인 스크럼이 됨)
- 앞으로는 데일리 스크럼에서 모두가 노트북을 닫고 진행(10분) 후 다같이 기록(5)합니다. 컨디션도 간단히 공유하면 좋을 것 같습니다.
김재원
- 전체적으로 컨디션 관리가 아쉬웠던 것 같습니다.
- 그 이유를 생각해봤을 때, 해야할 일을 중심으로 진행하다보니 '이거까지만 다 개발하고 가자' 라고 생각하며 자연스럽게 매일 너무 늦은 시간에 들어갔고 잠이 줄어 들었으며 컨디션 하락으로 이어졌습니다.
- 물론 일을 할땐, 해야할 일을 중심으로 몰입해서 진행하는게 맞다고 생각하지만, 21시쯤 되면 타협의 순간을 한번 가져야 할 것 같습니다.
이미림
- 세션-> 토큰 방식으로 바꾸는 바람에 하루를 더 투자해야 했습니다.
- 우리 개발 상황을 구체적으로 생각하지 않고 기존 방법만 생각하며 '이전에 됬었으니 되겠지'라고 안일하게 여긴것이 원인이라고 생각합니다.
- 앞으로는 우리 개발 상황에 빗대어서 구체적으로 생각해봅시다.
조애리
- 일정이 생각과 달리 틀어지는 부분이 많았습니다.
- 스크럼마스터가 전체적인 일정관리 역할도 겸하면 좋을 것 같습니다.
- 다른 사람들도 마스터의 말에 귀기울여 주고 잘 따르는 것이 중요할 것 같습니다.

다음 스프린트에 적용할 것 📈

앞으로는 데일리 스크럼에서 모두가 노트북을 닫고 진행(10분) 후 다같이 기록(5분)합니다. 컨디션도 간단히 공유하면 좋을 것 같습니다.
스크럼마스터가 전체적인 일정관리(컨디션 관리!!) 역할도 겸하면 좋을 것 같습니다. 다른 사람들도 마스터의 말에 귀기울여 주고 잘 따르는 것이 중요할 것 같습니다.

스프린트 백로그 ✍️

`#1` 사용자는 SNS 계정으로 dropy에 로그인 한다.

Issue: #9
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 3
Status: 완료

`#2` 로그인 사용자는 로그아웃한다.

Issue: #10
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 0.5
Status: 완료

스프린트 회의 로그 (4차) 🏃‍♀️🏃‍♂️

스프린트 목표 🏈

캔버스 기반의 그리기 툴을 발표자에게 제공한다.
기존에 버그가 발생하던 부분을 수정한다.
슬라이드 전체화면 등 슬라이드 화면을 개선한다.
스트레스 테스트를 통해 슬라이드 컨버터 서버를 개선한다.

스프린트 단위 🗓

4일 (2019.12.2(월) ~ 2019.12.5(목))

스크럼 마스터 👨‍🔧

김도현 @happydhKim

회의 내용 💬

버전 1.0이 완성된 시점에서 새로운 기능을 만듬과 동시에, 내실을 다질 필요가 있다.
처음 사용해보는 기술스택들이 많기에 서로 협력해서 진행하자.
데모 때 받은 피드백들을 반영해서 개발 우선순위를 정하자.

스프린트 백로그 ✍️

[컨버터 서버 성능 개선] stess test로 병목구간 찾기

Issue: #80
Assignee: 김재원 @load0ne, 조애리 @aereeeee
Manday: 2
- 테스트 시나리오 짜기
- ngrinder 테스트 스크립트 짜기
- 테스트용 mock 서버 만들기
- 테스트 및 모니터링 진행
- 결론(병목구간 및 개선 필요점) 도출

[컨버터 서버 성능 개선] 성능 최적화 인프라 설계

Issue: #84
Assignee: 김재원 @load0ne, 조애리 @aereeeee
Manday: 1.5
- 최대 서버 인스턴스 2개 이내로 성능 개선 방안 찾기

[컨버터 서버 성능 개선] 방어 시스템 설계

Issue: #83
Assignee: 김재원 @load0ne, 조애리 @aereeeee
Manday: 1.5
- 감당할 수 없는 트래픽이 몰려도 서버가 터지지 않는 방어 시스템 설계하기

[Epic#24, Epic#26] (스피커) 필기 도구를 이용해 슬라이드에 원하는 필기를 기입할 수 있다.

Issue: #86
Assignee: 이미림 @always-awake
Manday: 3
- 채널 화면 좌측의 필기 버튼 UI 구현
- '볼펜' 필기 도구 버튼이 활성화되면, 슬라이드 내에서만 필기도구로 필기를 할 수 있어야 한다.
- '지우개' 필기 도구 버튼이 활성화되면, 슬라이드 내 필기를 지울 수 있어야 한다.
- '형광펜' 필기 도구 버튼이 활성화되면, 슬라이드 내에서만 필기 도구로 필기를 할 수 있어야 한다. (역시 지우개로 지울 수 있다.)

[Epic#25, Epic#33] 필기 가리기 버튼을 클릭하면, 스피커의 필기 내용이 삭제된다.

Issue: #88
Assignee: 이미림 @always-awake
Manday: 1
- 필기 가리기 버튼 UI 구현
- 스피커는 필기 가리기 버튼을 클릭하면, 자신의 필기를 보이지 않게 할 수 있다.
- 리스너는 필기 가리기 버튼을 클릭하면, 스피커의 필기를 보이지 않게 할 수 있다.

[Epic#29, Epic#36] 자료 다운로드 버튼을 활성화할 수 있다.

Issue: #82
Assignee: 김도현
Manday: 0.5
- 다운로드 버튼이 필요하다.
- 기존 UI에 맞춰 버튼을 생성한다.
- Object Storage에 있는 URL을 불러올 수 있다.
- 다운로드가 정상적으로 작동한다.

[Epic#30] 채널에 참여인원이 몇명인지 확인할 수 있다.

Issue: #81
Assignee: 김도현
Manday: 0.5
- 채널에 사람인원을 표시해줄 Input이 필요하다.
- 채널에 입장한 사람들을 실시간으로 확인할 수 있다.

[Epic#27, Epic#34] 채널의 슬라이드를 전체화면으로 볼 수 있다.

Issue: #85
Assignee: 김도현
Manday: 1
- 채널에 있는 슬라이드를 전체화면으로 전환시킬 수 있다.
- 전체화면일 때, 동기화가 이루어 져야 한다. ( 리스너 )
- 가능하다면, 전체화면에서 특정 작업을 진행할 수 있다.( 이벤트 )

[Epic#38] 이모지를 채널에 날릴 수 있다!🤭

Issue: #87
Assignee: 김도현
Manday: 2
- 이모지를 선택할 수 있는 버튼이 필요하다.
- 이모지를 선택하는 버튼을 Click or Hover하면, 사용가능 한 이모지들이 나열된다.
- 이모지를 클릭하면, 이모지가 슬라이르 쪽으로 랜덤한 방향으로 날라간다.
- 이모지가 날라가기 시작하면, 채널 내 모든 사람들이 날라가는 이모지를 볼 수 있다.
- 이모지가 하나가 아닌 여래가도 정상적으로 잘 날아간다.
- 이모지가 일정 height에 도달하면, 남지 않고 파괴된다.(🤭)

스프린트 회의 로그 (2차) 🏃‍♀️🏃‍♂️

스프린트 목표 🏈

이미지 컨버터 모듈을 만든다.
프레젠테이션 채널을 만든다.
사용자는 채널에서 채팅할 수 있다.

스프린트 단위 🗓

4일 (2019.11.18(월) ~ 2019.11.22(금))

스크럼 마스터 👨‍🔧

이미림 @always-awake

회의 내용 💬

4명이 페어 프로그래밍을 진행하며 통일된 개발환경 및 개발패턴을 이해한다.
GraphQL, Apollo client/server에 대해 학습이 필요한 주차로 일정을 여유롭게 산정한다.

스프린트 백로그 ✍️

`#1` 업로드 한 슬라이드를 이미지 형태로 볼 수 있다.

Issue: #23
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 1.5
- 슬라이드(pdf,ppt) 업로드가 가능하다.
- 업로드된 슬라이드는 서버에서 이미지로 파싱된다.
- 슬라이드 이미지는 구조화되어 서버에 저장된다.

`#2` 파일 업로드 시 새로운 채널이 생성된다.

Issue: #25
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 1
- 파일 업로드 버튼 UI를 구현한다.
- 파일 업로드 시 채널 코드가 생성된다.(util로 구현)
- 파일 업로드 시 새로운 url의 채널 창이 켜진다.
- 채널 데이터가 디비에 저장된다.

`#3` 채널에 입장하여 채팅할 수 있다.

Issue: #24
Assignee: 페어 프로그래밍(김도현, 김재원, 이미림, 조애리)
Manday: 2
- 사용자가 채널에 입장할 수 있다.
- 사용자가 채팅을 입력할 수 있다.
- 채팅 UI에 입력 버튼이 있다.
- 입력한 채팅이 있는 상태에서 입력 버튼을 누르면, 채팅이 화면에 나타난다.
- 화면에 나타난 채팅이 상태에 따라 위치가 변동 된다.

커밋 컨벤션 타입에 대한 추가논의 제안

이슈 ❗️

현재 임시로 정의한 태그들은 다음과 같습니다.
불필요한 태그 / 추가적인 태그에 대해 논의가 필요하다고 생각합니다.

BUILD
CI
CHORE
DOC
FEATURE
FIX
IMPROVE
REFACTOR
REVERT
STYLE
TEST

나의 의견 😎

UTIL 태그 추가하는 것이 좋다고 생각합니다.
FEATURE 는 애매하고 IMPROVE 는 아닌 경우에 CHORE 라고 하기에도 애매한 경우가 있는 것 같습니다.

레퍼런스 📚

[컨버터 서버 성능 개선] 성능 최적화 인프라 설계

지난 데모데이 테스트 때, 컨버터 서버가 가장 트래픽을 버거워 하는 모습을 보였다.
이미지를 다운로드하는 과정, 컨버팅 하는 과정, 업로드 하는 과정 이 세 구간에서 어떤 부분에서 병목이 발생하는지 파악하고 개선해본다.

완료 조건 ✅

최대 서버 인스턴스 2개 이내로 성능 개선 방안 찾기

레퍼런스 📚

ngrinder

[Epic#12] 파일 업로드 시 새로운 채널이 생성된다.

메인 화면에서 채널생성하기 버튼 클릭시 파일을 업로드하는 딤이 노출된다.
업로드 버튼을 통해 업로드시 채널이 생성된다.
또는 드래그앤드롭을 통해 채널 생성도 가능하다.

완료 조건 ✅

파일 업로드 버튼 UI를 구현한다.
파일 업로드 시 채널 코드가 생성된다.(util로 구현)
파일 업로드 시 새로운 url의 채널 창이 켜진다.
채널 데이터가 디비에 저장된다.

레퍼런스 📚

스프린트 회의 로그 (3차) 🏃‍♀️🏃‍♂️

스프린트 목표 🏈

버전 1.0 배포
중간 데모 드로피로 시연하기
메인페이지에서 채널새성과 채널입장이 가능하다.
채널 페이지에서 스피커와 리스너의 슬라이드 동기화가 이루어진다.
채널 페이지에서 사용자 채팅이 가능하다.
마이페이지에서 사용자의 히스토리를 확인 할 수 있다.

스프린트 단위 🗓

3일 (2019.11.26(화) ~ 2019.11.28(목))

스크럼 마스터 👨‍🔧

김재원 @load0ne

회의 내용 💬

목요일까지 버전 1을 배포하기 위해 MVP를 구현한다.
서비스를 4개의 작은 부분으로 나누어 할당하였다.

- Main Page : 슬라이드 드롭다운, 채널코드 생성 및 공유 
- Channel page
    - Slide : 슬라이드 뷰어, 슬라이드 동기화
    - Chat : 채팅 좋아요, 채팅 sorting
- My page: 마이페이지 UI, 유저 히스토리 조회

스프린트 백로그 ✍️

`#11` 메인 화면에서 슬라이드를 드롭다운 할 수 있다.

Issue: #48
Assignee: 이미림 @always-awake
Manday: 1
- 메인 화면의 Drag & Drop Page에 파일을 드롭다운 할 수 있다.
- 파일을 드롭다운하면, 파일이 image-converter 서버로 전송된다.
- image-converter 서버의 응답이 있기 전까지는 유저에게 로딩화면을 보여준다.
- image-converter 서버의 응답이 ok라면, 채널 화면이 보여지도록 한다.
- image-converter 서버의 응답이 ok가 아니라면(error 발생), 에러 페이지를 보여준다.

`#31` 채널 코드를 입력할 수 있다.

Issue: #50
Assignee: 이미림 @always-awake
Manday: 1.5
- 채널 코드를 입력할 수 있는 Input 컴포넌트를 생성해야 한다.
- 만약, 입력한 채널의 코드가 다른 채널의 코드와 동일하다면, 동일한 채널 코드를 갖는 채널 목록을 보여주는 페이지가 보여진다. (채널 목록은 스크롤 되어야 한다.)
- 채널 목록 페이지에는 헤더와 채널 정보가 담겨있는 채널 카드 컴포넌트 리스트가 보여진다.
- 특정 카드를 클릭하면 해당 채널 페이지가 보여진다.
- 선택된 채널 페이지로 이동할 때, 채널 컴포넌트가 로딩되기 전까지는 로딩화면이 보여진다.

`#13, #37` 공유 버튼을 이용해서 생성한 프레젠테이션 채널 코드를 복사하고, 공유할 수 있다.

Issue: #51
Assignee: 이미림 @always-awake
Manday: 1
- 채널 내 공유하기 버튼 컴포넌트를 구현한다.
- 버튼을 클릭하면 채널 코드가 복사된다.

`#18, #43` 특정 채팅글에 좋아요 가능하다.

Issue: #40
Assignee: 김재원 @load0ne
Manday: 2
- 익명의 사용자에게도 익명 사용자 토큰을 넘겨주도록 인증시스템을 수정한다.
- 좋아요을 하기 위해서 채팅 UI를 완성한다.
- DB에 좋아요 로그를 저장한다.
- 좋아요를 한 채팅은 다시 좋아요 하지 못하도록 한다.
- 좋아요 상태를 채팅 UI에 표시한다.

`#16` 채팅을 공감순/최신순으로 정렬할 수 있다.

Issue: #45
Assignee: 김재원 @load0ne
Manday: 1/2
- 채팅을 공감순으로 정렬해서 렌더링 가능하다.
- 채팅을 최신순으로 정렬해서 렌더링 가능하다.(default)
- 현재 정렬상태를 UI로 강조한다.

`#17, 39` 채팅창을 토글할 수 있다.

Issue: #46
Assignee: 김재원 @load0ne
Manday: 1/2
- 채팅창 토글버튼 UI를 클릭시 채팅뷰가 토글된다.
- 토글될 때 적절한 애니메이션이 발생한다.(옵션)

`#3` 로그인 된 사용자는 마이페이지로 이동 할 수 있다.

Issue: #41
Assignee: 김도현 @happydhKim
Manday: 1
- 새로운 페이지를 만들어야 한다.
- 프로젝트의 컬러에 맞는 UI를 그려야 한다.
- 기존의 구조에 맞게 컴포넌트를 설계해야 한다.
- 로그인 된 사용자만 사용하며, 상태를 확인해야 한다.
- 회원정보를 담은 스키마를 정의해야 한다.
- 채널정보를 담은 스키마를 정의해야 한다.

`#7` 스피커로써 생성한 채널 목록 확인

Issue: #43
Assignee: 김도현 @happydhKim
Manday: 0.5
- 스피커와 리스너를 구별해야 한다.
- GraphQL을 이용해 최소한의 정보를 불러와야 한다.
- 채널 목록을 뿌려주는 UI 컴포넌트를 생성해야 한다.
- 서버와 연동해야 한다.

`#8` 스피커 히스토리카드로 채널 입장 가능

Issue: #44
Assignee: 김도현 @happydhKim
Manday: 0.5
- 스피커와 리스너를 구별해야 한다.
- GraphQL을 이용해 최소한의 정보를 불러와야 한다.
- 히스토리카드 UI 컴포넌트를 생성해야 한다.
- 서버와 연동해야한다.

`#10` 리스너 히스토리 카드를 통해 채널로 입장 가능

Issue: #44
Assignee: 김도현 @happydhKim
Manday: 0.5
- 스피커와 리스너를 구별해야 한다.
- GraphQL을 이용해 최소한의 정보를 불러와야 한다.
- 히스토리카드 UI 컴포넌트를 생성해야 한다.
- 서버와 연동해야 한다.

`#14, #35` 슬라이드를 앞뒤로 넘길 수 있다.

Issue: #42
Assignee: 조애리 @aereeeee
Manday: 1
- 슬라이드 뷰어 UI 구현
- 슬라이드 애니메이션 구현
- 이미지 로딩 프로세스 구현

`#32` 스피커의 화면을 동기화하여 볼 수 있다.

Issue: #47
Assignee: 조애리 @aereeeee
Manday: 2
- 스피커의 위치를 리스너가 subscription해야한다.
- 슬라이드 동기화 버튼 UI구현
- 동기화 활성화 시 리스너와 스피커의 슬라이드가 동기화 된다.

논의한 부분들에 대한 리팩토링 및 버그 수정

auth 관련 로직 hook 사용방식 재정리해서 리팩토링
이미지 컨버터 서버에서 익명토큰에 대한 verify 확인

완료 조건 ✅

이미지 컨버터는 로그인한 사용자만 이용 가능하다.
auth 관련 로직 hook 사용방식 재정리해서 리팩토링

레퍼런스 📚

connect-foundation / 2019-02 Goto Github PK

2019-02's People

Contributors

Stargazers

Watchers

Forkers

2019-02's Issues

[Epic#7, Epic#9] 스피커, 리스너로서 참여한 채널 목록 확인 가능

완료 조건 ✅

관련 이슈 📎

레퍼런스 📚

2019.11.04 오전 MEETING

MEETING 목적 🚩

MEETING 내용 ✍️

브레인 스토밍

김도현

김재원

조애리

이미림

개발환경 세팅하기

MEETING 결과 📌

React 공식문서 읽어오기 ( 복습 )

[Epic#2] 로그인 사용자는 로그아웃한다.

완료 조건 ✅

관련 이슈 📎

레퍼런스 📚

[Epic#31] 채널 코드를 입력할 수 있다.

완료 조건 ✅

관련 이슈 📎

레퍼런스 📚

2019.11.08 오후 MEETING

MEETING 목적 🚩

MEETING 내용 ✍️

타입스크립트 vs 자바스크립트

인프라

마이크로 서비스를 DB에도 적용할 것인가?

SQL vs NoSql

MEETING 결과 📌

(스피커) 필기 도구를 이용해 슬라이드에 원하는 필기를 기입할 수 있다.

완료 조건 ✅

관련 이슈 📎

레퍼런스 📚

2019.11.06 오후 MEETING

MEETING 목적 🚩

MEETING 내용 ✍️

저번 주 무엇을 고민해봤나요?

기술 스택에 대해서

언어

GraphQL 왜 써야하는가

상태관리

styled-components

ppt, pdf

test

DB

인프라/보안

MEETING 결과 📌

기술 목록

공부해야할 우선순위

[Epic#32] 스피커의 화면을 동기화하여 볼 수 있다.

완료 조건 ✅

관련 이슈 📎

레퍼런스 📚

슬라이드 이미지 요청 방식 어떤 것이 좋을까요?

이슈 ❗️

나의 의견 😎

관련된 이슈 📎

레퍼런스 📚

1주차 스프린트 (로그인) 리팩토링

이슈 ❗️

코드리뷰 반영이 필요합니다!

관련된 이슈 📎

레퍼런스 📚

[Epic#8, Epic#10] 스피커, 리스너의 히스토리카드로 채널 입장 가능

완료 조건 ✅

관련 이슈 📎

레퍼런스 📚

[Epic#17, Epic#39] 채팅창을 토글할 수 있다.

완료 조건 ✅

관련 이슈 📎

레퍼런스 📚

`Material-UI` 와 `Styled-Components` 를 같이 사용하는 것

`Styled-Components` 사용에 대한 컨벤션