Uncaught (in promise) TypeError: filteredFacilities.forEach is not a function 에러는 데이터가 배열이 아닌 다른 타입(예: undefined 또는 null)이어서 발생하는 에러이다. forEach는 배열에서만 사용 가능한 메서드이기 때문에, 데이터가 배열이 아닐 경우 이 오류가 발생한다.해결 방법은 아래 코드와 같이 isArray() 배열 메서드를 이용해 데이터가 배열 타입인지 확인하고 배열이 아니면 빈 배열([])이 평가되도록 한다.const result = Array.isArray(arr) ? arr : [];

1. ESModule 사용 후 발생한 net::err_aborted 404 (not found) 에러 타입 스크립트를 사용한 프로젝트에서 ESModule을 사용해 불러오기를 하였는데 [그림 1]과 같은 에러가 발생했다. 2. 모듈의 확장자까지 작성해야 한다! 아래의 코드와 같이 app.ts 파일에 new 키워드로 클래스의 인스턴스를 생성했다. new ProjectInput(); app.ts에는 ProjectInput 클래스가 없으며 components 폴더 내 project-input.ts 파일에 클래스가 존재한다. 따라서 아래와 같이 해당 모듈을 임폴트했다. 이때 직접 작성하지는 않았고 VSCode의 "ctrl + space" 단축키를 이용해 자동 완성하였다. import { ProjectInput }..

1. 두 배열에서 일치하지 않는 객체 요소 구하기 const arr1 = [{ id: 1, name: "a" }, { id: 2, name: "b" }]; const arr2 = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }]; 위와 같이 객체를 요소로 가진 두 개의 배열이 있다. 이 두 배열을 비교해 일치하지 않는 객체 요소인 { id: 3, name: "c" }를 구하고자 한다. 2. filter(), some() 배열 요소 활용한 문제 해결 filter() 배열 메서드는 매개 변수로 true/false를 반환하는 콜백 함수를 가진다. some() 배열 메서드는 ||연산자와 비슷해서 요소 중 하나라도 true이면 true를 반환한..

1. Python의 count() 문자열 메서드 문자열에서 특정 문자열의 개수를 구하고자 한다. Python에는 count() 문자열이 존재하기 때문에 아래 코드와 같이 쉽게 구할 수 있다. # 파이썬 코드 s = "javascript" a_count = s.count('a') # count() 문자열 메서드 이용하여 특정 문자열 개수 구하기 print(a_count) # 2 2. javaScript의 split() 문자열 메서드 응용 JavaScript에는 Python과 같은 메서드가 존재하지 않지만 split() 문자열 메서드를 응용하면 같은 결과를 얻을 수 있다. // 자바스크립트 코드 const s = "javascript"; const aCount = s.split("a").length - 1;..

1. 코테 문제 풀다가... 프로그래머스 코테 문제 "소수 만들기"를 풀이하고 있었다. 나의 경우 동일한 문제를 파이썬과 자바스크립트로 각각 풀이해오고 있다. 이 문제를 해결하기 위해 주어진 숫자가 소수인지를 판별해야 해서 소수 판별을 위한 함수를 정의하였다. 해당 파이썬 코드는 다음과 같다. # 소수 판별 - 파이썬 def is_prime_num(n): for i in range(2, n): if n % i == 0: return False return True 인자로 들어온 숫자가 소수이면 True, 아니면 False를 리턴하는 파이썬 문법의 함수인데, 자바스크립트에서 for문을 이용하지 않고 작성하고자 하였다. 😉 소수는 1보다 큰 자연수 중 1과 자기 자신만을 약수로 가지는 수다. 2. every..

이 글은 유데미의 "클린코드 자바스크립트" 강의 내용(섹션 7: 객체 다루기)을 정리한 것이다. 1. Shorthand Properties ES2015 이후로 Shorthand Properties 덕분에 키와 값으로 이루어진 속성들을 축약할 수 있다. 1.1. CSS에서도 비슷한 것이 있다! 아래의 코드를 통해 CSS attribute가 축약되는 것을 보자! before는 after와 같이 축약될 수 있다. .before { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; } .after { margin : 5px, 5px, 5px, 5px; } 1.2. JavaScript 객체의 축약! 아래의 코드는 축약하기 전의 코드..

1. canvas에서 base64 데이터를 다룰 때 만난 TypeError 에러 react-camera-pro를 이용해 캡처한 이미지를 base64 데이터로 받을 수 있었다. 캡처한 이미지를 mind-ar에서 Target으로 사용하기 위해 compile 하는 과정에서 다음과 같은 에러가 발생했다. Uncaught (in promise) TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or Offscree..

이 글은 유데미의 "클린코드 자바스크립트" 강의 내용(섹션 6: 배열 다루기)을 정리한 것이다. 1. 배열은 객체이다. 배열은 인덱스로 값에 접근한다. 하지만 [ ]에 키를 넣을 수도 있다. obj라는 키에 빈 객체를 할당해 보겠다. const arr = [1, 2, 3] arr["obj"] = {} console.log(arr) // [ 1, 2, 3, obj: {} ] console.log(arr[3]) // undefined console.log(arr["obj"]) // {} arr의 요소에 obj요소가 있는 것을 확인할 수 있다. 시각적으로 볼 때 인덱스 3번에 위치해 있는 것처럼 보이지만 arr[3]으로 접근하면 요소가 없는 것을 확인할 수 있다. 하지만 "obj"라는 키로 접근하면 {}라는 ..