콘솔 채팅 핵심 기능

상대방 DOM 조작

• javascript DOM 조작
• 리액트 컴포넌트 조작

채팅 기능

• firebase 사용 예정

검증

콘솔환경에서 리액트 DOM을 조작에 대한 정의

• 리액트 개발자 도구에서 편집하고 싶은 컴포넌트를 선택하여 조작

  : 리액트 개발자 도구의 컴포넌트 계층 구조에서 컴포넌트를 “클릭하여 해당 컴포넌트의 state를 $r 선택자를 사용하여 수정 가능, $0 을 이용해 DOM 조작 가능

• 메서드 내에 원하는 컴포넌트를 지정하여 조작

  con.searchReactComponent("컴포넌트 이름")
  // 컴포넌트 내부 구조 출력
  con.manipulateDom("셀렉터", "code")
  // 셀렉터: 선택한 컴포넌트 내의 선택자를 포함한 DOMString, 유효한 CSS 선택자
  

  : 사용자가 컴포넌트 이름만으로 조작하려고 할 때, 렌더링된 DOM 트리를 기준으로 최상위 DOM 요소로부터 리액트 fiber 객체를 찾아 DOM과 리액트 컴포넌트를 맵핑해야 한다.

  → 최상위 DOM 요소로부터 fiber 객체를 얻어내는 것 까지 확인 완료

  (개발 환경에서만 가능, 프로덕션 환경은 컴포넌트 난독화로 지정할 수 없음)

  

실현 여부 판단

이번 PoC에서는 리액트 환경일때, DOM 조작 여부를 검증해봤습니다.

저희가 정의한 리액트 컴포넌트 조작 기능을 정리하면,

1. 리액트 개발자 도구의 컴포넌트 계층 구조 인터페이스에서 사용자가 원하는 컴포넌트를 클릭하면, 해당 컴포넌트에 대한 정보를 상대에게 전송하고, 상대는 그 정보를 바탕으로 DOM 조작 또는 컴포넌트 속성을 수정할 수 있습니다.

   (이 기능은 리액트 개발자 도구가 전제되어있어야 합니다.)

2. 사용자가 컴포넌트명을 명시하여 지정하는 경우에도 리액트 컴포넌트 내부의 DOM Element를 수정할 수 있어야 합니다.

   이 때, 렌더링 된 DOM과 리액트 컴포넌트의 맵핑하기 위해 fiber 객체를 DOM요소로부터 탐색해야 합니다.

1, 2 기술에 대해 검증을 완료하여 실현 가능성이 있다고 판단됩니다.