let x = 10;
let code = "x + 5";
let result = eval(code);
console.log(result);  // 15

위 예시에서 eval은 문자열로 제공된 JavaScript 코드를 실행하여 결과를 반환합니다. 그러나 eval은 다양한 보안 위험을 초래할 수 있습니다.

new Function() 사용 예시

new Function()은 문자열을 함수로 감싸서 실행하는 방법입니다. eval보다 상대적으로 더 안전한 방법으로 코드 실행을 제공합니다. new Function()은 다음과 같이 사용할 수 있습니다.

let x = 10;
let code = "x + 5";
let func = new Function('return ' + code);
let result = func();
console.log(result);  // 15

new Function()은 실행할 코드 문자열을 함수로 감싸며, 이 경우에는 return을 명시적으로 추가해야 합니다.

eval을 new Function()으로 변경하는 단계

단계 1: eval로 실행하려는 코드 문자열 추출

먼저 eval에서 사용되는 코드 문자열을 new Function()에서 사용할 수 있는 형태로 변환합니다. 예를 들어, eval에서 x + 5처럼 계산하는 코드가 있다면, 이 코드 문자열을 그대로 new Function()으로 넘길 수 있습니다.

단계 2: eval에서 실행되는 코드에 return 추가

new Function()은 실행하는 코드에서 값을 반환하려면 return 키워드를 사용해야 합니다. 따라서 eval에서 계산된 값을 new Function()으로 변환할 때는 반환값을 명시적으로 지정해야 합니다.

단계 3: 변수 접근 방식 변경

eval은 해당 코드가 실행되는 범위에서 변수를 직접 참조할 수 있지만, new Function()은 별도의 함수 범위 내에서 실행됩니다. 필요한 변수는 new Function()에 인자로 넘겨줘야 합니다.

예시:

eval 사용:

let x = 10;
let code = "x + 5";
let result = eval(code);
console.log(result);  // 15

new Function()으로 변경:

let x = 10;
let code = "x + 5";
let func = new Function('x', 'return ' + code);  // 'x'를 매개변수로 추가
let result = func(x);  // x 값을 전달
console.log(result);  // 15

위와 같이 new Function()은 코드 내에서 외부 변수를 참조하지 않기 때문에, 필요한 변수를 함수의 매개변수로 전달해야 합니다.

변경 시 고려사항

• 보안: eval은 실행되는 코드가 악의적일 경우 심각한 보안 문제를 초래할 수 있습니다. new Function() 역시 외부 입력을 사용하기 전에 반드시 검증해야 합니다.
• 디버깅: eval은 디버깅이 어려운 특성이 있습니다. new Function()은 함수로 변환되기 때문에 디버깅이 조금 더 용이할 수 있습니다.
• 성능: eval은 실행 시에 파싱 및 컴파일 작업이 필요하므로 성능에 영향을 줄 수 있습니다. new Function()은 상대적으로 성능에 영향을 덜 미칩니다.

예외 처리

new Function()을 사용할 때 코드가 잘못된 경우 예외가 발생할 수 있습니다. 이를 처리하기 위해 try-catch 문을 사용할 수 있습니다.

let code = "x + 5";
try {
  let func = new Function('x', 'return ' + code);
  let result = func(10);
  console.log(result);
} catch (e) {
  console.error('Error executing code:', e);
}

결론

• eval을 사용할 필요가 있을 때 new Function()을 사용하면 보안성과 성능 측면에서 더 안전한 대안을 제공합니다.
• 코드를 new Function()으로 변경할 때는 변수를 매개변수로 전달하는 점에 유의해야 합니다.
• eval 사용을 최소화하고, 필요하다면 new Function()을 통해 동적으로 코드를 실행할 수 있는 방법을 적용하는 것이 바람직합니다.

Object.prototype.toString()

toString() 은 문자열을 반환하는 object의 대표적인 방법입니다.

obj.toString();

위와 같은 방법으로 많이 사용합니다.

객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있습니다. 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속됩니다.

이 메서드가 사용자 지정 개체에서 재정의되지 않으면 toString()은 "[object type]"을 반환합니다. 여기서 type은 object type입니다.

.... 까지는 대부분 알고 있고 사용하고 있는 기능입니다만.

toString() 편리한 기능이 있습니다. 

10진수의 값의 경우 toString(arg) 매개변수를 이용하여 다른 진수로 변경할 수 있습니다. 

let baseTenInt = 10;
console.log(baseTenInt.toString(2));   // 2진법으로 변환

let bigNum = BigInt(20);
console.log(bigNum.toString(2))    // 2진법으로 변환

예를 들자면 16진법으로 변경하여 랜덤 색상을 생성할 수 도 있습니다. 

'#' + Math.floor(Math.random() * 16777215).toString(16);

해당 코드는 16777215를 hex로 표현하면 ffffff가 되므로 해당 코드는 000000부터 ffffff 값을 반환합니다.

참고 Link https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Javascript의 map() 함수

자바스크립트 배열의 내장함수인 map을 활용하여 컴포넌트를 반복문처럼 렌더링할 수 있습니다. 

map 함수는 전달된 함수를 사용해서 배열 내에서 원하는 규칙에 따라 가공 후 새로운 배열을 생성할 수 있습니다.

[사용방법]

[예시 - 01 ] - 아래 내용을 개발자 도구에서 수행해 볼 수 있습니다.

var arr = [5, 4, 9, 7];

var result = arr.map(function(vv){
  return vv * vv;
});

//결과
result = [25, 16, 81, 49];

[예시 - 02 ] - ES6 문법으로 작성

const arr = [5, 4, 9, 7];
const result = arr.map(vv => vv * vv);

//결과
console.log(result);

방금 작성한 데이터 배열과 유사한 형태로 컴포넌트를 배열로 작성할 수 있습니다. 

component / IterPrc.js 파일을 생성합니다. 

export default function IterPrc(){


    const datas = ["1번","2번","3번","4번"];
    const dataList = datas.map((item,idx) => <li>{idx}{item}</li>);

    return (
        <>
            <ul>{dataList}</ul>
        </>
    );
}

state에 문자열이나 숫자값이 아닌 Object 형태의 값을 넣어서 컨트롤 해보겠습니다. 

StatePrc.js 파일을 component 폴더 하위에 생성합니다. 

import { useState } from "react";

export default function StatePrc(){

    

    const [msg, setMsg] = useState({"message" : "", "user" : ""});

    return (

        <>
            <div>
                <h1>Event Test</h1>
                <div>message : {msg.message}</div>
                <div>user : {msg.user}</div>
                <input type="text"
                    name="msg"
                    placeholder="입력칸"
                    value={msg.message}
                    onChange={(ev)=>{
                        setMsg({...msg, "message" : ev.target.value});
                    }}
                ></input>
                <input type="text"
                    name="user"
                    placeholder="입력칸"
                    value={msg.user}
                    onChange={(ev)=>{
                        setMsg({...msg, "user" : ev.target.value});
                    }}
                ></input>
                <button onClick={()=>{
                    alert(msg.message + "메세지를 초기화 합니다.");
                    setMsg({"message" : "", "user" : ""});
                }}>초기화</button>
            </div>
        </>
    );
}

App.js에  방금 작성한 StatePrc 컴포넌트가 출력되도록 추가합니다. 

왼쪽 input은 msg.message를 값을 참조하고 

오른쪽 input은 msg.user의 값을 참조하도록 코드를 작성하였습니다.

state의 값중 object의 값을 변경할 때에는 기존값을 spread 연산자라고 하는 ... 연산자를 이용하여 값을 변경합니다.

조건문을 사용하다 보면 조건이 많을 때가 있습니다. 

if( 조건 || 조건 || 조건 .....)

이런 조건이 너무 많으면 가독성이 떨어지게 되고 반복되는 코드로 코드가 늘어지게 됩니다. 

예를 들면 아래와 같은 코드가 있습니다. 

function checkName(arg) {
	let rtn = false;
    if (arg === 'A' || arg === 'B' || arg === 'C' || arg === 'D' || arg === 'E' || arg === 'F'){
    	rtn = true;
    }
    return rtn;
  }

function testCode(){
	console.log(checkName('A')); // true
	console.log(checkName('ZZ')); // false
}

좀더 코드의 낭비가 없도록 작성해봅시다. 

function checkName(arg) {
	const = compareValue = ['A','B','C','D','E','F'];
	return compareValue.includes(arg);
  }

function testCode(){
	console.log(checkName('A')); // true
	console.log(checkName('ZZ')); // false
}