1. RSSI를 이용한 거리 환산 [그림 1]과 같이 네이버 지도 API에 히트맵을 찍어야 하는 상황이다. 위경도 좌표 데이터는 없으며 rssi와 방향 정보를 이용해 좌표를 따야 한다. 이를 위해 rssi를 m로 환산할 필요성이 생겼다. 😘RSSI(Received Signal Strength Indicator): 수신된 신호의 강도를 지표로 나타내는 파라미터 2. RSSI to m 자바스크립트 코드 아래 코드는 와이파이 수신 감도(rssi)를 미터(m)로 환산하는 함수이다. function calculateDistance(rssi) { var txPower = +59; var n = 2; var distance = Math.pow(10, (txPower - rssi) / (10 * n)); return ..

스터디에서 알고리즘 문제를 풀어가고 있다. 어제 가졌던 모임에서 파이썬의 enumerate()와 비슷한 역할을 하는 자바스크립트 문법은 무엇인가라는 질문이 나왔다. 함께 고민한 결과 Array.prototype.entries() 메서드라고 결론지었다. 예제 코드는 아래와 같다. for (const [i, v] of ["a", "b", "c"].entries()) { console.log(typeof i, typeof v); console.log(i, v); } // 출력 결과 // // number string // 0 a // number string // 1 b // number string // 2 c forEach() 배열 메서드로도 동일한 결과를 얻을 수 있었다. ["a", "b", "c"].f..

알고리즘 문제를 풀이하다가 [1, 2, 1, 2, 1, 2, 1] 이렇게 생긴 배열이나 [1, 1, 2, 2, 3, 3, 4]와 같은 배열이 필요했다. 제출한 문제는 for문을 사용해 해결했는데 forEach 배열 메서드로 해당 배열을 만들어 보고 싶었다. 작성한 코드는 아래와 같다. let n = 2; let arr = ["hello", "one", "even", "never", "now", "world", "draw"]; // 이 배열과 대응하는 정수 요소의 배열을 생성하는 것이 목적이다. const newArr = new Array(arr.length); const result = []; newArr.fill(1); newArr.forEach((_, idx) => { if ((idx + 1) % n..

ERROR in ./src/components/layout/Navi.js 31:40-44 export 'ReactComponent' (imported as 'Home') was not found in './home_black_24dp.svg' (possible exports: default) @ ./src/components/index.js 3:0-33 6:0-39 @ ./src/index.js 12:0-40 42:42-51 React.js 컴포넌트에서 svg 파일을 import 하기 위해서 시도했는데 다음과 같은 에러가 발생했다. import 명령 코드는 아래와 같았다. import HomeIcon from '@assets/svg/home_black_24dp.svg'; 정확한 경로를 잘 입력했는데 뭐가..

서버로부터 데이터를 불러오는데 비동기적으로 데이터를 가져오기 때문에 데이터가 없는 상태에서 렌더링이 되어 발생한 에러이다. 옵셔널 체이닝(?.)을 이용하여 프로퍼티가 존재하지 않을 경우 에러를 발생시키지 않고 undefined를 반환할 수 있다. 아래는 옵셔널 체이닝을 적용한 코드이다. dashboardStateTotalTest.batch_total_nowDTO?.count 참고 자료 : https://velog.io/@party3205/React-Cannot-read-properties-of-undefined-reading-%EC%97%90%EB%9F%AC [React] Cannot read properties of undefined (reading) 에러 Cannot read properties of..

https://react.vlpt.us/basic/21-custom-hook.html 21. 커스텀 Hooks 만들기 · GitBook 21. 커스텀 Hooks 만들기 이번에 사용 될 코드는 다음 CodeSandbox 에서 확인 할 수 있습니다. 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생합니다. 예를 들어서 input 을 관리하는 코드는 관리 할 react.vlpt.us "벨로퍼트와 함께하는 모던 리액트"로 학습 중에 궁금한 점이 있었다. useState의 setForm의 파라미터로 객체를 넣는 경우와 콜백함수를 넣는 경우에 어떤 차이점이 있을까? 테스트 결과 객체를 파라미터로 넣을 경우 useInput 커스텀 Hooks로 input 창을 두 개 이상 사용할 시 앞서 input 창에 작성한 내용이..

button 태그의 onClick 이벤트에 함수 할당 후 만난 에러이다. 해당 코드는 아래와 같다! makeHeatmapLngLat 함수 내에서 useState에 값을 set 하는 과정에서 무한루프가 발생한 것이다. 이 문제는 onClick에 콜백 함수를 할당하여 해결할 수 있었다. 수정한 코드는 아래와 같다. makeHeatmapLngLat(heatmapInfo)} > 참고 자료: https://anerim.tistory.com/161 [리액트 에러 React Error] Too many re-renders. React limits the number of renders to prevent an infinite loop. 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는..

1. 자바스크립트에서 작동하는 코드가 리액트에서는 작동 안돼?! Javascript에서 문제없던 코드가 React.js에서 에러를 토해냈다! 단지 배열로 되어 있는 위경도 데이터를 객체로 변경하고자 했을 뿐이었다. 자바스크립트에서는 잘 작동되는 for문과 map이 현재 진행 중인 리액트 프로젝트에서는 작동하지 않는 난처한 상황이었다. [그림 1]과 같은 에러를 토해낸 코드는 아래와 같다. 실행해 보면 알겠지만 전혀 문제없는 코드이다. const arr = [ [128.63362792028676, 35.2215073061068], [128.63362792028676, 35.2215073061068], ]; const newArr = []; const obj = {}; for (const el of arr)..