Skip to content

5주차 월요일 회의록

ji3427 edited this page Dec 18, 2020 · 1 revision

이번주 해야할일

  • 리팩토링
    • 중복된건 함수로 뺴기
    • 이벤트 클래스 함수형으로 바꾸기
    • 이유있는 성능개선
    • 변수명 통일
    • 데모코드, 코어코드 분리(webpack 설정)
  • 공식문서
    • 다듬을 부분 다듬기
    • HOOKS, 상태관리, 개발현황 채우기
  • 발표자료
    • 금요일 데일리스크럼 참조해서 작성

우선순위

공식문서 >>>>>> 발표자료 > 리팩토링

  • 공식문서 예제 페이지 제외하고 완성
  • 예제 이름 변경
  • 발표 페이지 제작
  • 회의 데이

  • 발표 페이지 제작

  • 발표 페이지 완성 후 배포하기(헤로쿠 > 네트리파이 > 깃헙아이오)


우리가 기술적으로 경험한 것들

발표할 것

  • VRoot에서 parent를 헷갈린 문제 VRoot가 실제 돔의 root인지 아니면 처음으로 그려지는 부분인지
  • children에 child가 빈 배열로 들어오는 문제 또는 children배열안의 배열 처리할 때→ Array.prototype.flat 함수로 배열을 무조건적으로 1차원이 배열이 되게 처리
  • DELETION에서 삭제 노드의 다음 다음 sibling이 추적되지 않는 문제 → DELETION 발생 시 추적되지 않는 부분부터는 전부 DELETION으로 처리한다 → 만약 이후가 삭제되지 않은 게 있으면 어떡하는지, 즉 중간 부분만 삭제된 것이면? → 중간 부분이 UPDATE가 되고 마지막 노드(들)이 DELETION으로 처리된다.
    • key를 도입해서 랜더링을 효율적으로 해보려고 했는데 실패함
  • 경로에 '/'가 없을 시 라우팅되지 않는 문제 → exact 처리로 해결

보류

  • DOM의 Node에 번호를 indexing 하려던 방법 → 발상의 전환 : 프래그먼트 사용으로 렌더링 최소화
  • 이벤트가 있는 Node가 무조건적으로 UPDATE 되던 문제 → 이벤트를 비교해주는 로직을 빼니깐 이벤트 핸들러의 값들이 고정되서 계속 같은 값이 나옴 → 이벤트 델리게이션으로 해결 → 버블링을 안해줬더니 문제 발생 → 버블링 적용
  • style이 안바뀌어도 모든 게 render되는 문제 해결 ( isEqual )
  • 조건을 잘못 줘서 페이지가 상태 변화가 없는데 계속 랜더링 되는 문제

안해요

  • 트리 순회 문제
  • class 삭제 안되던 문제 → jsx는 className이고 js에서는 class여서 attribute가 삭제가 안되었음

  • UPDATE에서 CSS가 사라지는 문제 → UPDATE 시에도 CSS를 "추가해줄" 필요가 있는데, PLACEMENT와 UPDATE라는 단어 어감 때문인지, PLACEMENT에만 CSS를 추가해주고 있었다.
  • 빈 텍스트가 들어왔을 때 node가 터지는 문제 → undefined나 null이 TEXT로 들어올 경우 처리 → 0이 들어올 때도 터져버렸기 때문에 undefined와 null을 따로 처리해주게 되었음.
  • 라우팅시 TODO에 시간이 나옴 → 라우팅시 훅을 초기화 안해줘서 발생한 문제

기술 ( 경험담 ) 적인 내용 위주의 발표

우리는 뭘 보여주고 싶을까?

  • 즐기면서 개발하는 모습?
  1. 표지
    • 제목
  2. React를 만들게 된 이유
    • JavaScript 실력을 올리기 위해서
    • 변화하는 기술에 대응하기 위해서
  3. 우리가 만들려고 하는 프레임워크
    • React와 같은 문법 (HOOK 기능 지원)
    • 자동적인 상태 관리 + 렌더링 (가상돔을 통한 관리)
    • 라우팅 지원
  4. 우리가 직면한 문제들, 어려웠던 점들 (버그)
  5. 가상돔을 구현하면서 겪은 어려움
    • VRoot에서 parent를 헷갈린 문제 VRoot가 실제 돔의 root인지 아니면 처음으로 그려지는 부분인지
    • DELETION에서 삭제 노드의 다음 다음 sibling이 추적되지 않는 문제 → DELETION 발생 시 추적되지 않는 부분부터는 전부 DELETION으로 처리한다 → 만약 이후가 삭제되지 않은 게 있으면 어떡하는지, 즉 중간 부분만 삭제된 것이면? → 중간 부분이 UPDATE가 되고 마지막 노드(들)이 DELETION으로 처리된다.
  6. HOOK
    • useContext, context.Provider
  7. 라우팅
    • 라이브러리 대체
    • exact
    • (선택? 좋은 방법이 있으면?) isContained
  8. 앞으로의 과제
    • 이벤트 여러 개 달 수 있게 하는 것
    • Link tag에도 이벤트를 걸 수 있게 하는 것
    • Node에 key 값 넣어서 자리 바꾸는 로직을 만드는 것 (현재는 삭제, 수정, 추가로 대체됨.)
    • 자체적인 라우팅 (의존성 0%)
    • 모듈화 (파일 분리)
  9. Document나, 만들어놓은 페이지들
  10. 그래서 완성품이랑 리액트랑 비교
    • 알고보니 우리가 버그를 고친 방법이 React랑 유사
  11. 우리는 뭘 배웠는지 (기술적으로)
    • 라이브러리 사용자 입장 vs 라이브러리 개발자 입장
  12. 팀원소개
  13. Q&A
Clone this wiki locally