보통 프로미스에서 비동기통신을 한 뒤 then()에서 가져온 데이터를 정제할 때 this 객체를 이용하면 아래와 같이 undefined가 뜨는 것을 볼 수 있다... 샘플코드 결과 this객체는 누가 호출했냐에 따라 동적으로 변한다. Window에서 thisFun()을 호출하였으니, thisFun()에서의 this는 Window가 될 것이며, Window객체가 콘솔에 찍히는 것을 확인 할 수 있다.. 그런데 3번째 라인을 보면 undefined가 콘솔에 찍혔다. 즉 then()안에서는 this가 Window객체를 바라보고 있지 않다는 의미... 왜 then()에서는 this객체가 undefined로 뜰까? 구글링을 해본 결과 this객체는 함수를 호출 하는 "녀석"을 가르키게 되는데 then() 안에서는..

보통 프론트단 개발을 하면 개발자도구에 중단점을 걸어서 디버깅을 자주 하는데.. import하는 js파일이 많아지도, 하나의 함수가 여기저기 엮이면, 이 함수를 누가 어디서 호출하는지 찾기 힘들어진다. 제일 좋은 방법은 처음부터 돌아가서 찾는거겠지만.. 힘들다.. 그럴때 개발자도구의 Call Stack(호출 스택) 탭을 활용하면 현재 함수를 누가 어디서 호출하였는지, 현재 함수를 호출할 때까지의 흐름을 한눈에 알 수 있다.. 그럼 바로 알아보자. 샘플코드 샘플코드는 간단하다. 흐름은 이렇다. 1) 콘솔로그를 찍는 showConsole 함수 생성 2) showConsole함수를 호출하는 callConsoleFunc이라는 함수 생성 3) callConsoleFunc 함수 호출 4) showConsole 함수..

이번에 회사동기 블로그를 보다가 이게 뭐지 하는게 있어서 한번 정리해본다. contextmenu라는 이벤트인데, MDN에도 한글지원하는 문서가 없어서... 간단히 풀어 말하면 "우클릭 했을 때 생기는 메뉴를 사용자가 컨트롤 하겠다" 라는 이벤트이다. 어려운 건 없으니 바로 샘플코드를 보면서 배워보도록 하자~ 샘플코드 컨텍스트 메뉴 테스트 페이지 우클릭 메뉴 데스크탑 모니터 스피커 마우스 코드를 보면 간단하다. 전체화면을 대상으로 하니 document에 addEventListener를 통해 이벤트를 추가해주고 있다. 우클릭 했을 때 실행하고자 하는 이벤트(메뉴 표출)와, 아무곳이나 좌클릭하면 실행하고자 하는 이벤트(메뉴 숨김).. 그리고 스타일을 주는 정도... 어려운 건 없다. 꼭 메뉴가 아니라도, 우클..

오늘은 ES6에서 추가 된 문법인 전개구문( Spread Syntax )에 대해 알아보자. 배열이나 객체를 복사하여, 새로운 배열 및 객체를 생성 할 때 사용하는 문법으로, 연결 및 복사 할 때 유용하게 쓰이는 문법이다. 1. 배열에서의 Spread Syntax ----------------------------------------------------------------------------------------------------------------------------------- ES6에 추가된 문법으로 기존에는 각 배열을 합쳐 새로운 배열을 생성할 때 concat함수를 이용하고는 했는데, 전개구문이 나오면서 더 깔끔하게 구현할 수 있게 되었다. 1) 배열병합 2. 배열복사 2. 객체에서의..

기존 ES5에서의 indexOf와 비슷하지만, ES6에서 findIndex()라는 메서드를 지원하며 더욱 강력한 배열 검색 기능을 지원하게 되었다. 가장 큰 차이점은 indexOf이 특정값만 찾는 데 사용되었다면, findIndex()는 filter등의 다른 함수와 조합하여 더욱 복잡한 조건의 검색도 가능하다는 점이다. findIndex()이란? ----------------------------------------------------------------------------------------------------------------------------------- Array.prototype.findIndex() : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니..

문자열이나, 배열에서 특정 값이 있는지 확인 할 때 Includes도 사용하는데, IndexOf도 자주 사용했었다. 정확히 말하면 IndexOf는 true/false를 리턴하는 게 아닌, 값의 위치값을 리턴해주는데.. 값이 없으면 -1을 값이 있으면 0이상을 반환해주기 때문에, -1이 리턴되면 false라고 판단하여 사용을 했었었다.. 함수의 용도는 다르지만, 그때그때 사용자의 방식에 따라 달라지는 것 같다.. IndexOf()란? ----------------------------------------------------------------------------------------------------------------------------------- 문자열 및 배열에 특정값이 있으면 해당 ..