🌽con.chat

con.chat은 브라우저 개발자 도구의 콘솔창을 이용하여 동일한 웹사이트를 사용하고 있는 유저들 간에 실시간 채팅 서비스를 제공하는 라이브러리입니다. 또한 Javascript 또는 React로 개발된 웹사이트에서 언어별 메서드를 이용한 DOM 조작 및 컴포넌트 트리 비교 기능을 통해 간편한 디버깅 환경을 제공합니다.

🔗 Links

Deployed website | con.chat core Repository | con.chat guide Repository

🗂️ 목차

• 🌽 con.chat
• 🔗 Links
• 💡 기획 동기
• 🔧 기술 스택
• 🔎 기능 설명
• ☄️ 기술 챌린지
  1. 콘솔창에 드러난 메서드 내부 로직의 은닉화
  2. 상대로부터 전송받은 script 코드는 과연 안전할까? - XSS, 메서드 작성
  3. 다양한 DOM 메서드를 데이터베이스에서 어떻게 구분할까?
  4. 변경사항을 적용할 요소를 상대에게 어떻게 전달할 수 있을까? - XPath
  5. React Fiber를 이용한 컴포넌트 트리 탐색과 비교 구현
  6. CDN 관련 이슈 - 빌드 시 해쉬값 변경, jquery 버전 관리 참고
• 💬 프로젝트 회고

💡 기획 동기

팀원 모두가 웹 퍼블리셔로서의 근무 경험이 있어, 웹 페이지의 스타일과 구조를 조정하고, 동적으로 변경하며 개발자 도구를 이용한 디버깅 경험이 많았습니다. 하지만 이러한 업무들은 개별적인 작업으로 팀원들에게 공유하기 어렵습니다.

브라우저 개발자 도구의 기능을 충분히 활용하며, 실시간으로 디버깅 사항을 공유할 수는 없을까? 라는 호기심에서 출발하여 con.chat 프로젝트를 기획하게 되었습니다.

con.chat은 실시간 채팅을 통해 협업할 수 있는 도구로, 브라우저에서 개발자 도구를 사용하는 것처럼 DOM을 실시간으로 조작하고, 리액트 컴포넌트 트리를 분석할 수 있는 기능을 제공합니다. 이를 통해 얻을 수 있는 근본적인 이점은 다음과 같습니다.

1. 의사소통 강화: 팀원들이 실시간으로 같은 화면을 보며 문제를 논의하고 해결할 수 있어, 오해나 불필요한 커뮤니케이션을 줄일 수 있습니다.
2. 디버깅 용이성: 리액트 애플리케이션의 경우, 컴포넌트 트리 구조의 차이를 시각적으로 확인 가능하며, 같은 애플리케이션 내에서 컴포넌트 간의 정보 비교를 통해 버그의 원인을 빠르게 파악할 수 있도록 합니다.

🔧 기술 스택