문제상황{ message.items.map((data, idx) => { // Uncaught TypeError: Cannot read properties of undefined (reading 'map') // 생략 } )} 원인데이터가 전부 넘어오기도 전에 렌더링되었기 때문에 발생한 에러였다. 해결단축평가를 사용했다.{ message.id && message.items.map((data, idx) => { // 앞에 message.id 추가 // 생략 } )} 참고단축평가 (short-circuit evaluation)

문제상황vscode에서 typeScript 코드를 불러왔더니 전체적으로 빨간줄이 뜨면서 다음과 같은 에러메시지가 나타났다.JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. JSX 요소가 any 타입으로 간주되어, 'JSX.IntrinsicElements'라는 인터페이스가 정의되지 않아 정확한 타입을 알 수 없다는 뜻이다. 원인타입스크립트에서 JSX를 사용하려면 JSX를 이해할 수 있는 React 타입 정의 파일이 있어야 하는데, React 타입이 설치되어 있지 않거나 누락된 경우, JSX가 뭔지 몰라서 나타나는 에러라고 한다. 참고로 JSX.IntrinsicElements는 나 처럼 기본 ..

"현진님 Math.random() 보안 취약점에 걸렸어요.""네???" Math.random()javaScript에서 0이상 1미만의 난수를 반환하는 함수로, 같은 값을 반복하지는 않지만 내부적으로 의사 난수 생성기(PRNG, Pseudorandom Nubmer Generator)를 사용하기 때문에 완전 랜덤 값은 아니라고 한다. 보안 취약점으로는 다음 2가지가 있다.1. 예측 가능한 난수 생성 (Deterministic)Math.random()은 랜덤한 수를 생성하는 것처럼 보이지만, 사실 의사 난수 생성기를 기반으로 동작하는, 특정 알고리즘을 통해 계산된 값이다. 브라우저마다 Math.random()의 구현 방식은 다를 수 있지만, 대부분 기존의 내부 상태를 기반으로 난수를 생성한다. 내부 상..

들어가며ES6부터 Symbol 데이터타입이 추가되었다고 한다. 이게 왜 필요한거지? SymbolSymbol은 ES6에서 도입된 고유하고 변경할 수 없는 값을 생성하는 원시(primitive) 데이터 타입이다.다른 원시 타입(숫자, 문자열, 불리언 등)과 다르게, 심볼은 유일한 식별자로 사용되며 객체의 프로퍼티 키로 주로 활용된다.심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다.이때 생성된 심벌값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. 1. 객체 프로퍼티의 고유한 키 생성문자열 키는 충돌할 위험이 있지만 Symbol을 사용하면 절대 중복되지 않는 고유한 프로퍼티 키를 만들 수 있다. 같은 키 이름 "id"를 사용했더라도..

const arr = [1, 2, 3];arr.forEach(console.log); 1 2 3 이 한 줄씩 출력되겠지 ? 어라 ? 와이 ?? forEach()forEach() 함수는 반복문을 통해 배열의 요소를 접근하지 않고도 콜백 함수로 간편하게 배열 요소들을 처리할 수 있는 함수이다.각 요소의 값뿐만 아니라 인덱스와 배열 자체도 콜백 함수에서 사용할 수 있다.forEach는 콜백 함수에 세 개의 인자를 전달한다.valueindexarray 따라서 위 코드의 실행 결과는 value, index, array가 한 줄씩 출력된 결과가 나오는 것이다. value만 출력하고 싶다면, 명시적으로 첫 번째 인자만 받도록 해야 한다. const numbers = [273, 52, 103];const..