con.showComponentTree() 트리 구조로 컴포넌트 트리를 구현하기

1. 렌더트리 구조 시도

위의 이미지처럼 자식 컴포넌트의 개수가 너무 많아질 경우 콘솔창에서는 렌더트리 구조로 그려주기에 한계가 있습니다. 콘솔에는 가로 스크롤없이 줄내림 처리되기 때문에 사용자의 개발자 도구의 크기가 다 다를 것이고 모든 환경을 고려할 수 없을 것이라 판단되어 기존 트리 구조에서 최대한 형제 구조가 잘 보이도록 수정해봤습니다.

2. 기존 트리 구조에서 수정안

new Function() 대안

JavaScript를 안전하게 실행하는 방법

con.chat에서 사용자가 JavaScript 코드를 전송하고 상대방 브라우저에서 실행하도록 하는 기능을 안전하게 구현하려면 다음과 같은 방법들이 있습니다.

eval()의 위험성

• eval() 함수는 문자열로 표현된 코드를 실행할 수 있지만, 보안상 매우 위험합니다.
• 악의적인 사용자가 악성 코드를 전송할 경우 이를 실행하는 것은 매우 위험합니다.

const userCode = 'while(true) {}'; // 무한 루프에 빠짐
eval(userCode);

new Function()의 사용

• new Function()은 독립적인 스코프를 가지며 eval()보다 보안성이 높지만 여전히 외부 입력을 그대로 실행할 수 있어 보안상 문제가 될 수 있습니다.
• 실행할 때마다 컴파일하므로 성능 저하와 다양한 에러 발생 가능성이 있습니다.