2주차 월요일 데일리스크럼

오전 회의

• 주말 동안 한 것:
  • 재익: 나만의 리액트 열심히 읽어보기
  • 경수: 백엔드 작업 약간 + 나만의 리액트 만들기 따라하기
  • 승효: CSS animation 아주 약간 → F A I L
  • 화영 : DB 대충 완성, 백엔드 로그인 부분 어느정도, 나만의 리액트 만들기 따라서?

저번 회고록 때 계획

• 5주 작업...
• 1주는 설계 + 백엔드...
• 2주, 3주는 라이브러리 설계
  • 클래스 까지 지원하려면 너무 힘들다. 함수형만 지원하자.
  • 부스트액트는 클래스로 지원하자
  • typeScript 까지 넣기는 조금 어려울 거 같아서 일단 js로 하자...!
    • typeScript로 넣으니까 자꾸 터진다
    • 함수 동작은 js, 인터페이스는 ts로 짜져 있었다 . . .(preact)
• 4주는 바닐라마켓... // 바닐라마켓이 안 되면, 어쨌든 동작 여부를 보여줄 수 있는 APP 만들기
• 5주는 테스트... 및 발표 준비

오늘의 목표

이것까지 하고 퇴근하자!

1. DOM 제대로 잡기
2. useState 만들기 시작하기

• 12시까지 useState를 공부하고 (필요한 함수 단위 생각하기)
• 1시에 마스터 클래스를 듣고
• 2시부터 useState, virtual DOM 업무 분담 후 짝 프로그래밍 진행하자

---

오후 회의

오늘 해야 하는 일

• createElement, render(): tracking 가능하도록 만들기
• hooks: 구현하기

boostact 구조 어떻게 짜면 좋을까?

• boostact를 다시 호출한다. vs. hooks만 따로 호출한다.

  • 여기서 boostact란, createElement를 가지는 객체이다.
  • boostact class에 useState등의 hook 관련 함수를 만들어 호출하면 1:1의 관계성을 가지게 되어 여러 개의 useState를 사용할 경우 여러번 boostact를 호출하게 된다.

  → hooks를 따로 빼내 사용할 때마다 호출해서 사용하는 것으로 결정하였습니다. 이렇게 하면 하나의 boostact가 여러 개의 useState를 포함한 함수를 사용할 수 있을 것으로 예상됩니다.

  → 자세한 결정 사항은 boostact 설계 문서를 참고하시면 됩니다.

개발 시작을 어떻게 하면 좋을까?

• 전체적인 설계를 명확하게 결정하지 않고 가면 만들 때 많이 헤맬 것 같다.
• hooks (setState)의 경우, DOM tree에 들어가야 하는데 아직 다 정하지 않고서 개발을 시작하면 나중에 수정해야 해서 더 어려울 수 있다. 로직을 정해놓고 가면 될 거 같다.
• 구조에 대해서 미리 이야기 하고 가면 괜찮을 거 같다.
• 회의만 계속 하다 보니 자꾸 시작이 늦는 것 같다. 다른 조보다 늦는 것 같다.
• 차라리 backend는 7시 이후 일과 이후에 조금씩 작업하는 것으로 하고, 코어 타임에는 boostact 위주로 작업한 이후 frontend로 넘어가자.

→ 같이 구조를 잡고 가는 것으로 결정하였습니다.

일단은 시나리오를 짜면서 한 번 해볼까?

→ 관련 링크: https://docs.google.com/presentation/d/1-q2CPgNF5CgvBobwLYDMQlYOkqq8nR5g6zojkI_qybs/edit?usp=sharing

• next에 있는 tree와 prev에 있는 tree를 1:1 매칭 한다?

• curr, prev의 Element를 어떻게 비교하는 것이 좋을까?

  • 각 두 개를 각각의 createElement 로 만들게 되면 각각 내부의 state는 달라질 수 있다. (완전히 똑같지 않을 수 있다.)
  • 하지만, curr에서의 state는 새로운 것이 맞기 때문에 createElement를 계속 차용하는 것으로 하고, 나머지 내부 내용을 비교하여 update해주는 방식으로 구현하도록 하자.

• id 값을 포함시켜서, 이것의 length를 비교 후 어떤 값이 추가되거나 삭제 되었는지 확인하기 용이하게 하자. 이 id 값은 auto increment되게 한다.

  • 마지막 아이디에 있는 값이 삭제될 경우:

    auto increment값으로 계산 되게끔 하도록 유의

• 각각을 비교(탐색)해서 update 해주는 것보다는 전체를 갈이 하는 것이 좋지 않을까?

  • 바뀐 부분을 전체 갈이를 해주게 된다면, prev에 일부만 갖게 되기 때문에 좋지가 않다.
  • 그렇다면, 바뀐 부분을 통째로 치환 한다고 생각해보자.

• 가상 돔의 pos는 진짜 dom을 바꾸기 위해 실제 dom을 가리키는 것이다.

• 가상 돔끼리 비교하기 위한 것: id 값(노드 안에 property로 존재한다.)으로 비교 한다. 이 id 값을 그러면 어디서 갖고 와야 하는 걸까?

  • setState 에서 왜 값을 비교해야 하는 걸까?

이 이후는 내일 오프라인 미팅에서 이어서 회의 하도록 하겠습니다!

---

Backend 진행

• 화영: 인증
• 경수&승효: 짝 프로그래밍 → 인터페이스 정의