1주차 데모 - boostcamp-2020/IssueTracker-13 GitHub Wiki

2020년 10월 30일 금요일 1차 데모 및 페어세션

데모 시나리오

Web - 동현님 발표

  1. 페이지에 접속한다.
  2. 이슈목록화면이 출력된다.
  3. 이슈목록화면에 Label, Milestone 버튼을 클릭하면 해당 페이지로 이동한다.
  4. 이슈목록메뉴에 있는 속성별 필터버튼을 클릭하면 좌측에 버튼의 이름이 출력된다.
  5. 이슈목록화면 하단엔 이슈목록이 출력이 되는데 관련 데이터는 front에 json형식의 mock-data로 저장되어있다.

iOS - 병민님 발표

  1. 앱을 실행한다.
  2. 로그인이 되어 있다고 가정한다.
  3. Issue, Label, Milestone, Setting 탭이 있는 Tab bar Controller가 보인다.
  4. 첫번 째 탭인 Issue 목록 화면이 보인다.

천하제일팀웤뽐내기 - 걸리면 재열님

✔️발표내용: 팀 구성원 소개, 팀의 그라운드 룰, 팀 빌딩 방식, 코딩 컨벤션, 팀만의 GitHub 사용 규칙 등 팀에 대한 모든 것, 자유롭게~! ✔️발표자료: 자유

  1. 팀 구성원 소개
  2. 팀 빌딩 방식 - 게임 이야기, 잡담 마스터
  3. 팀 그라운드 룰 - 이터레이션, PR 규칙, 갈등해결 규칙

이터레이션 장점

  1. 팀원들의 컨디션 상태를 공유하면서 '오늘은 내가 컨디션이 좋으니 좀 더 주도적으로 작업을 진행해야겠다'라고 생각하게 되어 팀작업의 밸런스를 조절할 수 있었습니다.
  2. 팀원들 간 작업상황 공유가 실시간으로 이루어진다.
  3. 하루 동안 무엇을 했는지 한눈에 파악하기 좋다.
  4. 집중도가 높아서 시간이 정말 빨리 간다.
  5. 쉬는시간이 짧게 정해져있고, 팀원들 간 지켜야 하는 규칙이기 때문에 핸드폰 등 방해요소를 멀리하기 쉽다.

이터레이션 단점

  1. 45분 시간 단위를 딱 잘라 끝내는게 쉽지 않다. (아직 마무리가 안됐을때 아쉬움....)

어려웠던 점

공통

  1. git을 이용하여 협엽을 하는데 컨벤션을 맞춰야했다.
    • ex) git commit message, PR message,
  2. API의 형식과 관련하여 iOS와 사전 협의가 필요했다. 필터링을 서버에서 할지 클라이언트에서 할지를 결정하고, 이에 따라서 API 구조를 잡는 것에 많은 시간이 걸렸다.

Web

  1. React가 아직은 생소한 팀원들이 많아서 새로운 개념을 학습하고 서로 이해하는 것이 어려웠습니다.

iOS

  • iOS 개발자끼리 어떻게 해야 잘 협업할 수 있을지 몰라 어려웠다.
    • 협업 단위, 짝 프로그래밍,

기술공유

Web

nCloud Object Storage

nCloud Object Storage를 사용하여 프론트엔드 빌드 파일을 배포하였습니다. AWS의 S3 스토리지와 유사하게, 정적인 html, js를 파일 URL을 통해 배포하는 방식입니다.

참고

iOS

UICollectionView

collection view를 이용하는데, 기존에 사용하던 UICollectionViewDataSource와 UICollectionViewFlowLayout가 아닌, ios 13부터 지원하기 시작한 UICollectionViewDiffableDataSource와, UICollectionViewCompositionalLayout를 사용했습니다.

UICollectionViewCompositionalLayout

애플 공식 문서

UICollectionViewDiffableDataSource

애플 공식 문서

기존 API와의 차이점으로는,

이전에는 collection view에게 몇개의 item을 보여줘 줘야하는지 알려줘야했다면, DiffableDataSource를 이용할때는 보여주고 싶은 item과 section을 알려준 다는 것입니다.

diffable하다는 의미는 만약, item을 업데이트 하게 되더라도, collectionview는 차이나는 부분을 자동으로 계산해서 업데이트가 된다는 접입니다. 이때, 화면간 차이의 애니메이션 또한 자동으로 이루어집니다.

협업 & 커뮤니케이션

공통

1시간 단위로 <코어타임 -> 회고 & 스크럼 -> 쉬는시간>를 반복하는 이터레이션 방식을 사용했습니다. 이 방식을 통해서 집중도를 높이고, 서로 작업상황 공유를 효율적으로 할 수 있었던 것 같습니다.

Web

React의 페이지 컴포넌트 구조를 짝프로그래밍을 통해 사전 협의하고 작업을 시작하여 추후 PR을 merge할때 conflict이 적게 발생했습니다.

iOS

먼저 의존성이 큰 작업들은 짝 프로그래밍으로 작업을 시작했습니다. 그 다음에, 필요한 함수들을 protocol을 이용하여 정의한 후, 구체 클래스는 따로 작업을 했습니다.

iOS 데모 이미지

영상으로 찍기에는 화면의 변화가 있는 기능이 없어서 스크린샷만 첨부했습니다.

drawing

Web 데모 이미지

이슈목록 화면입니다. 스타일링작업은 하지 않았고, 컴포넌트구조만 간단하게 잡았습니다.

Labels, Milestones, NewIssue 를 클릭하면 해당 페이지로 이동합니다.

Author, Label, Milestones, Assignee 버튼을 클릭하면 해당 버튼의 이름이 좌측에 렌더링됩니다.

Labels, Milestones, Issues 데이터들은 json형식으로 mock-data를 만들어 사용했습니다.

demo_1

Boostcamp IssueTracker 13

⚠️ **GitHub.com Fallback** ⚠️