con.chat() 채팅 시작 시 사용자가 사용하는 언어 설정 메세지 출력
- 채팅을 시작할 때 안내 메시지를 출력하며, JavaScript와 React 환경에서 채팅이 가능함을 알립니다.
- 사용자가 사용하는 언어를 설정하기 위해
con.setLanguage("js" 또는 "react")명령을 입력하도록 요청합니다.
con.chat()
// Expected Console
🌽conchat을 시작합니다!
우리는 JavaScript와 React 환경에서 채팅이 가능합니다.
1. JavaScript
2. React
어떤 언어를 사용하고 있나요? con.setLanguage("js" 또는 "react")를 입력해주세요!
con.setLanguage(language) JavaScript 또는 React 언어 설정
- 사용자가 채팅에서 사용할 언어를 설정합니다.
- JavaScript 또는 React 언어를 설정할 수 있으며 Javascript 설정 시 React 관련 메서드는 사용할 수 없습니다.
con.setLanguage("js");
// Expected Console
// js를 지원하는 메서드 리스트 및 설명 출력
con.setLanguage("react");
// Expected Console
// react를 지원하는 메서드 리스트 및 설명 출력
con.setLanguage("python");
// Expected Console
// 유효하지 않은 언어입니다. 'js' 또는 'react'를 입력해주세요.
Debug Element 클릭 시 console 출력 기능
콘솔창에서 출력된 DOM 정보를 클릭하면 해당 요소가 강조 표시됩니다.
con.applyScript() 코드와 타겟을 인자로 받아 디버깅
- javascript 코드 실행하는 메서드 하나의 함수로 취합
- applycodeToElement
- applyScript
- applyCodeToAllComponents
con.shareComponentTree() 두 가지 리액트 어플리케이션 차이점 판별
-
React 애플리케이션에서 컴포넌트 트리를 시각적으로 나타내고, 발신자와 수신자 간의 state와 props를 비교하기 위해 사용됩니다.
-
발신자가 메서드를 실행하면, 수신자의 콘솔에 컴포넌트 트리를 출력하고, 각 컴포넌트의 state와 props를 표시합니다.
-
차이점이 있는 경우에만 해당 컴포넌트의 state와 props 정보를 확인할 수 있습니다.
con.shareComponentTree()
// Expected Console
<App>
├─ <Header>
발신자 userName: FiberNode (state, props)
│ 수신자 userName: FiberNode (state, props)
│ ├─ <Logo>
│ └─ <Nav>
├─ <Main>
│ ├─ <Content>
│ │ └─ <Article>
│ └─ <Sidebar>
└─ <Footer>
~~con.applyJSX(jsxCode, componentName) JSX 코드 삽입~~
- JSX 코드와 특정 컴포넌트명을 인자로 전달하여, 해당 컴포넌트의 DOM 구조를 변경하는 기능을 제공합니다.
- 발신자가 메서드를 실행하면 JSX 코드와 컴포넌트명을 사용하여 해당 컴포넌트의 Fiber 객체를 찾습니다. JSX 코드 내의 props 값을 연결하고, 기존 Fiber 객체와 다른 props를 추가 또는 수정하여 HTML로 변환합니다.
- 변환된 HTML은 컴포넌트의 내부 DOM 구조를 변경하며, 이 변경 사항은 상대방의 브라우저에도 동일하게 적용됩니다.
발신자 console
// JSX 코드와 컴포넌트명을 인자로 전달
const jsxCode = "
<header>
<h1>{text}</h1>
<p className='text'>텍스트 입니다.</p>
</header>
";
const componentName = 'Header';
// con.applyJSX 메서드를 사용하여 컴포넌트의 DOM 구조 변경
con.applyJSX(jsxCode, componentName);
수신자 console
발신자 userName: usename
Component: Header
Code: // html 코드로 변환되어 수신자에게 출력
<header>
<h1>제목</h1>
<p class="text">텍스트 입니다.</p>
</header>
con.showComponentTree() 이진 트리 구조로 컴포넌트 트리를 구현하기
기존 기능 정의대로 유지
기대 수정안
모달창을 띄워 컴포넌트 트리를 이진트리 형식으로 보여준다.
- 모달창으로 트리를 띄울 경우 컴포넌트를 클릭시 컴포넌트에 해당하는 DOM 요소를 포커싱하는 기능은 불가(제외하고 컴포넌트 트리만 출력?)
- 컴포넌트 데이터가 많아 질 경우 모달 영역에 제한된 사이즈를 설정하고 스크롤 처리를 할 수 가 있는데, 사용성에 있어 불편하지 않을지 (예: 하나의 부모 컴포넌트 하위에 자식 컴포넌트가 10개 있을 경우..)