javascript
-
Javascript에서의 thisProgramming/JavaScript & TypeScript 2022. 5. 24. 15:54
다음 코드에서 this는 gangwon객체가 아닌 다른걸 가르키게 된다. var gangwon = { resorts: ["Kirkwood","Squaw","Alpine","Heavenly","Northstar"], print: function(delay=1000) { setTimeout(function() { console.log(this.resorts.join(",")) }, delay) } } gangwon.print() 실제로 setTimeout안에서 this를 찍어보면 다음과 같은 결과를 보여준다. 따라서 this.resorts를 접근할 수 없는 것이다. 아래 소스를 보고 더 분석해보자 //node에서 this /* 함수 밖에서 this는 exports를 의미, 외부에게 제공하기 위한 내장객체를 ..
-
Error 처리Programming/JavaScript & TypeScript 2022. 5. 3. 21:29
JS와 React를 개발하다보면 UI에서 Error가 난 경우에는 아무것도 보여지지 않는다. Error가 발생하기 전까지는 그려져야할것 같은데, JS나 React에서는 그렇지 않다. (왜인지는 모르겠다.) 이번에 다룰 내용은 UI에서 Error가 났을 때, 해당 컴포넌트만 Error를 처리하는 방법이다. 여기서 참고했다.. https://ko.reactjs.org/docs/concurrent-mode-suspense.html#handling-errors 기본 코드 App과 Child Component가 있고, Child에서 Error를 발생시켜보자 더보기 기본 Error 발생 시키기 console에 Error가 나오며, 브라우저에는 아무것도 나오지 않는다. 더보기 Child안에서 'throw new Er..
-
mapProgramming/JavaScript & TypeScript 2021. 9. 26. 13:19
Java script 내장함수 map 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 결과 반환 array.map(callback, [thisArg]) 기본형은 함수를 넘겨서 작업하는 방법 var numbers = [1,2,3,4,5] var processed = numbers.map(function(num){ return num*num }); console.log(processed) 화살표 함수를 이용할 수도 있다. var numbers = [1,2,3,4,5] var processed = numbers.map(num=>num*num) console.log(processed) 결국 map을 어떻게 컴포넌트에 적용하느냐는 다음 예제를 보자 li를 만들어서 저장해두고 u..
-
ES6 변경사항Programming/JavaScript & TypeScript 2021. 9. 25. 16:16
1) 템플릿 문자열 ES6 이전에는 문자열 연결시에는 병합연산자(+) 사용 ES6 이후에는 백틱을 이용해서 표현 //ES6 이전 var string1 = "안녕하세요." var string2 = "반갑습니다." var greeting = string1 + ' ' + string2 //ES6 이후 var string1 = "안녕하세요." var string2 = "반갑습니다." var greeting = `${string1} ${string2}` 2) 화살표 함수 지원 // 예전방식 var lordify = function(firstName, land) { return `${land}의 ${firstName}` } //ES6의 화살표 함수 var lordify = (firstName, land) => `$..