코드 땜장이

 히든클래스에 대해 잠깐 알아보자. const obj = { a : 1 } console . log ( obj . a ) // 1  자 우리가 위처럼 작성하였을 때, 자바스크립트 엔진은 저걸 어떻게 해석할까? 일단 obj의 주소를 찾아 갈 것이고, 그 주소에서 a를 찾게 될 것 이다.  자 그러면 a에는 어떤 정보가 있을까? Object . getOwnPropertyDescriptor ( obj , 'a' ) { configurable: true , enumerable: true , value: 1 , writable: true , }  위와 같은 행위를 진행 하게 된다. 실제로는 저 a를 접근할 때, 페이로드가 꽤나 큰 비용이 든다.  하지만 매번 저렇게 진행을 할까? 꽤나 비싼 내용인데 말이다.  자바스크립트 엔진에서 동일한 모양을 동일한 Shape로 인식하게 되며, 위와같은 비용을 덜어낸다.  위에서 언급하였듯이 동일한 모양이다. const obj0 = {} // C0 obj0 . a = 'string' // C1 const obj = { a : 1 } // C1  위의 코드를 보면 obj0는 C0 Shape, obj0.a 를 추가하면 C1,  obj는 처음부터 a를 갖고 있기 때문에, C1이 되게 된다.  동적으로 속성을 추가하는 건 좋지 않게 된다. 추가적인 내용은 다음글로 알아보자.

  옛날 코드를 생각하며.... 예전에 eval을 다루었던 적이 있었다. 뭐 대부분의 상황에서 eval은 백엔드에서 script를 전달하여, 클라이언트에서 사용 할 수 있게 만드는 역할을 하였다. 하지만, eval을 듣기만 해도 몸서리치는 사람들이 주변에 한 두명 정도는 있을 것이다.  가장 큰 문제는  코드 인젝션  : eval 은 전달된 문자열을 코드로 실행하기 때문에, 외부 입력을 eval 에 전달할 경우, 악의적인 사용자가 임의의 코드를 실행할 수 있는 보안 취약점이 생깁니다. 이는 XSS(Cross-Site Scripting)와 같은 공격에 취약하게 만듭니다.  신뢰할 수 없는 소스  : eval 에 의해 실행되는 코드가 신뢰할 수 없는 소스에서 온다면, 시스템이나 데이터를 손상시킬 수 있습니다. 위와 같은 문제를 꼽을 수 있다.  그렇다면, 어떤 대안이 있을까? 서버가 클라이언트에 어떤 행동을 하게 하기 위한 대안 말이다. 문자열로 스크립트를 바로 실행 하지 않고, 함수를 만들어내는 것이다.  당연하게도, new Function 키워드의 경우도 완벽한 보안을 제공하지는 않는다. 하지만, eval의 경우, 현재 스코프의 변수들을 접근 할 수 있는 반면, new Function은 글로벌함수만 접근 할 수 있고, 함수를 만들어내는 코드일 뿐, 실행에 대한 제어는 프런트에서 진행을 하게 된다.  일단 오해를 풀고가야 하는 부분이 있다. eval < new Function 상대적으로 보안에 좋다는 거지, 당연하게도 매우 취약하다. 과거의 우리는 어쩔 수 없이 사용하였을 뿐, 대체할만한 코드는 너무나 많고 많다.  하지만, 현대에 new Function이 갖는 의의는 서버에서 제공하는 문자열을 클라이언드에서 함수로 만들어서 실행 하는 것이 아니다!  템플릿 엔진  우리가 사용하는 .jsx에 대해 생각해보자, 자바스크립트에 그러한 문법이 있는가? 1번 const dom = <div> test </div>  자 위의 코드를 생각해보자,