programing/Language
-
[JS] JavaScript get call stack traceprograming/Language 2019. 7. 16. 17:03
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 오늘은 자바스크립트로 호출 스택을 얻는 방법을 알아보도록 하겠습니다. 호출 스택 코드 function getStackTrace () { let stack = new Error().stack || ''; stack = stack.split('\n').map(function (line) { return line.trim(); }); return stack.splice(stack[0] == 'Error' ? 2 : 1); } getStackTrace()[2]; // get stack trace info 2 levels-deep 위와 같은 함수를 이용해, 호출 스택을 얻을 수 있습니다. 주의사항 This feature is non-st..
-
[Functional] map, filter, reduceprograming/Language 2019. 7. 15. 18:27
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 2019/06/25 - [programing/JavaScript] - [Functional] 평가와 일급, 고차함수 2019/07/15 - [programing/JavaScript] - [Functional] 순회와 이터러블 2019/07/15 - [programing/JavaScript] - [Functional] 제네레이터와 이터러블 map const products = [ {name: "볼펜", price: 500}, {name: "샤프", price: 1000}, {name: "자", price: 700}, {name: "커터칼", price: 1500}, {name: "수정테이프", price: 3000}, ]; // ..
-
[Functional] 제네레이터와 이터러블programing/Language 2019. 7. 15. 17:37
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 2019/07/15 - [programing/JavaScript] - [Functional] 순회와 이터러블 제네레이터 function *gen() { yield 1; yield 2; yield 3; // 반환값은 {value, done}객체에서, done이 ture가 될 때의 value값이다 // 따라서, 일반적인 순회에서 등장하지 않는 값이다 return 100; } const iter1 = gen(); const iter2 = gen(); for(const e of iter1) console.log(e); // 1 2 3 출력 console.log(iter2.next()); // {value: 1, done: false} ..
-
[Functional] 순회와 이터러블programing/Language 2019. 7. 15. 16:43
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) ES6에서의 리스트 순회 for of // array const arr = [1, 2, 3]; for(const e of arr) console.log(e); // set const set = new Set([1, 2, 3]); for(const e of set) consol.elog(e); // map const map = new Map([['a', 1], ['b', 2], ['c', 3]]); for(const e of map) consol.log(e); for(const e of map.entries()) console.log(e); // ["a", 1], ["b", 2], ["c", 3] 출력 for(const e of ..
-
[Functional] 평가와 일급, 고차함수programing/Language 2019. 6. 25. 20:34
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 함수형 프로그래밍이란? '존재'의 추상화를 함수 형태로 정의한다. 기존 함수를 이용해서 '참거짓'의 추상화를 정의한다. 위 함수를 다른 함수의 파라미터로 제공해서 어떤 동작을 하도록 한다. 함수형 프로그래밍은 일급 함수와 편의성이 중요하다. 함수형 프로그래밍의 자격 관계형 정의 타입 패턴 매치 불변성 순수성 평가(evaluation) 코드가 계산되어 값을 만드는 것. 일급 값으로 다룰 수 있다. 변수에 할당할 수 있다. 함수의 인자로 사용될 수 있다. 함수의 결과로 사용될 수 있다. 일급 함수 함수를 값으로 다룰 수 있다. 함수를 변수에 할당할 수 있다. 함수의 인자로 함수를 사용할 수 있다. 함수의 결과로 함수를 사용할 수 있..
-
[JS] 블로그 드래그 방지 해제programing/Language 2019. 6. 12. 16:09
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 오늘은 자바스크립트 비활성화를 하지 않고 블로그의 드래그 방지를 해제하는 방법에 대해 알아보겠습니다. 해당 포스트는 크롬기준으로 설명하도록 하겠습니다. 크롬 개발자 도구 열기 우선, F12를 눌러 개발자 도구를 열어줍니다. 드래그 방지 해제 영역 선택하기 개발자 도구의왼쪽 위의 버튼을 누른 후, 드래그 방지를 해제하고 싶은 영역에 커서를 옮겨놓습니다. 그러면 위와 같이 파란색으로 영역이 보여집니다. 영역을 잘 선택한 후, 마우스 왼쪽 버튼을 클릭합니다. 이벤트 리스너 제거 개발자 도구의 오른쪽에는 Style, Computed, Event Listeners라는 탭들이 있습니다. 여기서 Event Listeners탭을 누른 후, s..
-
[HTML, JS] ES6문법을 활용한 모듈 export, importprograming/Language 2019. 5. 4. 22:34
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 오늘은 ES6문법인 import와 export를 사용하여 java script 파일을 모듈화하고 html에서 사용하는 방법을 알아보겠습니다. 모듈화하기 파일 구조는 index.html, portfolio.js, portfolioBuilder.js로 세가지 있습니다. 해당 파일들은 Einere.github.io폴더 내에 존재합니다. portfolioBuilder.js portfolioBuilder.js는 다음과 같습니다. function portfolioBuilder(...) { ... } export {portfolioBuilder}; ES6의 문법중의 하나인, 유명 내보내기(named export)를 사용하도록 하겠습니다. 기..
-
[JS] DOM element의 offsetTopprograming/Language 2019. 5. 1. 20:11
안녕하세요, Einere입니다. (ADblock을 꺼주시면 감사하겠습니다.) 오늘은 DOM element의 offsetTop속성에 대해 알아보도록 하겠습니다. offsetTop offsetTop은 뭘까요? MDN에서는 다음과 같이 설명하고 있습니다. offsetTop is the number of pixels from the top of the closest relatively positioned parent element. 음.. 가장 가까운 상대적으로 가장 가까운 부모 엘레먼트의 상단에서부터의 픽셀값이라고 합니다. 중요한 부분은 가장 가까운 부모에 대해, 상대적 픽셀값이라는 것입니다. 상대적으로 가까운 부모라는 말이 조금 이상하긴 하지만, 제가 이해한 바로는 조상이 아닌 '부모'를 의미하는 듯 합니다..