화요일 회의록

오늘 할 일

createContext

• createContext에서 적절한 Provider가 없을 때는 defaultValue를 사용하게끔 수정

→ 잘 만든 Provider 커밋 100개 안 부럽다. (Provider에서 처리할 수 있다는 뜻)

defaultValue 매개변수는 트리 안에서
적절한 Provider를 찾지 못했을 때만 쓰이는 값입니다.
컴포넌트를 독립적으로 테스트할 때 유용한 값입니다.
Provider를 통해 undefined을 값으로 보낸다고 해도
구독 컴포넌트들이 defaultValue 를 읽지는 않는다는 점에 유의하세요.

Provider

• Provider에서 자식에게 props로 context 값을 전달 하게끔 수정
• 하위 Provider의 값이 우선시 됨. (test 필요)

Provider 컴포넌트는 value prop을 받아서
이 값을 하위에 있는 컴포넌트에게 전달합니다.
값을 전달받을 수 있는 컴포넌트의 수에 제한은 없습니다.
Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며,
이 경우 하위 Provider의 값이 우선시됩니다.

• Provider의 value prop이 바뀔 때마다 렌더링 되어야 함
• context 값의 바뀌었는지 여부는 Object.is와 동일한 알고리즘을 사용해 이전 값과 새로운 값을 비교해 측정됩니다.

→ 스택을 이용하여 해당 부분 구현할 예정임

Consumer

함수형 컴포넌트에서는 useContext를 사용할 수 있기 때문에

render 형식으로 동작하는 것을 지원하지 않아도 될 것 같다.

• Provider가 있을 경우에는 가장 가까운 ? 가장 아랫것의 Provider에서 context value를 가져온다.
• Provider가 없이 consumer만 있는 경우도 고려해야 함
• Consumer의 함수를 가져와 실행시킨 후 결과 값을 현재 노드의 자식에 넣어주는 로직이 필요함

어제 작업에 이어 할 부분

• useContext 내에서 수정 필요
  • useContext의 Hook (element)에는 임의의
    를 반환하도록 하였다.
    • React에서는 반환되는 것이 없으나, 코드 적용을 위해 임의로 적용.
    • 이후 수정 예정.
  • useContext_id 제거 예정. (기존과 아이디어 변경)
  • vRoot에서만 동작하는 것을 전체 범위에서 동작하게 수정해야 한다.

지금 작성된 HOOK 목록

• useState
• useReducer
• useEffect
• useContext

오늘 새로 기획한 부분

• 실제 페이지를 만들어본다.

  • 각자 아이디어 말하는데, 아이디어는 거창할 필요가 없다.
    • 렌더링이 잘 일어나는 페이지여야 한다.
    • HOOK들을 여러 개 사용할 수 있어야 한다. 어떤 HOOK을 사용할 지 미리 말할 것.
      • 소외되는 HOOK 친구가 없도록 한다.
      • 기왕이면, 이렇게 만든 페이지에서 테스트 코드 작성하면 좋을 것.
      • TDD 연습한다고 생각하자.

• 테스트를 넣는다.

  • index file (test용 file)을 여러 개 만들어서 import 해서 돌릴 수 있게 한다.
  • jest 사용한다.
    • DOM rendering 부분은 render한 객체가 일치하는 지 테스트하면 될 것.
  • 가상돔 → 실제 돔으로 렌더링하는 부분.
  • HOOKS
    • rendering이 되는지. ( getElementById로 값을 읽어서 실제 브라우저에 띄워졌는지까지.)
    • 크롱님의 강의 참고.
      • useState : useState 결과가 잘 반영되는지.
      • useReducer : 결과가 잘 반영되는지.
      • useEffect : 결과가 잘 반영되는지.
        • 분기가 굉장히 많은데, 3가지 모두 테스트할 수 있도록 한다.
      • useContext : 결과가 잘 반영되는지.
        • useContext는 파일을 여러 개로 나누어서 값이 전달되는지를 봐야 한다.
      • HOOK들을 혼용하였을 때 정상적으로 동작하는지.

페이지 구현 및 테스트

• VDOM이 제대로 동작하는지 확인을 해보기 위해, TODOList 만들기
  • input 창 + li 여러 개를 추가할 수 있는 것.
    • useState로 만들기
  • 삭제 로직 (x 클릭 시 삭제가 가능하게.)
  • 업데이트 버튼 추가
    • useEffect에 [...input.children] 칼럼 배열을 넣어서, 로그를 찍는다.
  • 순서 바꾸기 버튼.

숙원사업

• root의 effectag의 update 랑 placement 임시 땜빵 처리한 것 처리
  • 페이지가 바뀔 때 placement로 되어야 하는데 현재는 update로 처리 되고 있음.
• useContext 다중으로 사용 시 스코프 문제 해결
• createdocumentfragment 시간 날때 적용
• 공식 문서 제작
• 라우팅(라이브러리 적용이 가능한가?)
• 불필요한 파일 삭제
• TEST 코드 작성
• 리펙토링 ( 최종보스 )

오늘 바닐라마켓 삭제식 진행

추모 게시판

• 잘 가.. 고마웠어.. 벤딩머신이자 바닐라마켓이었던 .. 너..
• 시작은 안좋았지만......잘가.....
• 처신 잘하라구 ㅋㅋ
• 어쩔 수 없었어요. 쟤 말하는 싸가지가, 사람 빡 돌게 하잖아요 - 스카이캐슬