본문 바로가기

프론트엔드

 (40)
[javascript] for in 과 for of 사용법(차이) 막상 쓰려고하면 두개가 헷갈려서 기록한다. for ... in for ... of 반복문으로 사용되는 for in 과 for of는 ES6부터 추가되었다. 우선 두개의 차이는 다음과 같다. for in - 객체 탐색 for of - 배열 요소 탐색(Array뿐 아니라 Map, Set, String 에도 사용 가능하다.) 그럼 예시를 살펴보자 1. for in const param = { a: 1, b: 2, c: 3 } 위와같은 param이라는 변수가 있을때, >> a, b, c 라는 출력값을 얻기위해서는 다음과 같은 로직을 짜면 된다. for (let item in param) { console.log(item) } // output >> a, b, c 해당 로직을 보면 item이 객체의 키값을 반환하..
[javascript] for문 제발 그마아안! (map 사용하여 한줄로 끝내기) 더이상 for문 그마아안! 한줄로 끝내는 map 구문 기록하기! 예를들어, 사용자의 id와 age 정보가 담긴 userInfo 변수가 있다고 가정해보면 나는 해당 객체에서 userAge만 뽑아 새로운 변수에 담고싶다. 주로 이럴때 사용하는것이 for문이다. 예를들면 이런식이겠다. /* userInfo변수의 값이 [{id: "1", age: "20"}, {id: "2", age: "32"}, {id: "3", age: "29"}] 일때 */ let userAge = [] for (let i = 0; i < userInfo.length; i++) { userAge[i] = userInfo[i]['age'] } 하지만 map을 사용하여 한줄로 끝내보겠다. // userInfo변수의 값이 [{id: "1", a..
[javascript] 자바스크립트 객체(Object타입)란..? ag grid 에서 지원하는 API를 사용하던 도중 콘솔로그에 값을 출력해보니 [Object Object] 라는 값이 출력되었다. 세부 내용을 꺼내보려 하다가 문득 객체이란 무엇인지 예전에 공부했던 내용을 기록하려 한다. 1. 객체란? (Object 란?) 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이며, Key - Value 쌍을 저장할 수 있는 구조이다. 자바스크립트는 객체 기반 프로그래밍 언어이며, JS를 이루고 있는 대부분은 객체이다. 객체를 생성하면 하나의 값만 담을 수 있는 변수의 단점을 커버할 수 있다. 아래 예제를 적어보았다. // 객체를 사용하지 않을 경우 let name = 'OhJeongMin' let job = 'developer' let rank = 1 ..
[javascript] 비동기함수 setTimeout, 비동기 작업단위 Promise 동기는 동시에.. 비동기는 안..동시에..? 매일 써도 헷갈리는 개념이라 기록해두려고 한다. 1. 동기 / 비동기 핵심 특징 동기 > 동시에 여러 작업을 수행할 수 없다. > 흐름을 예측하기 쉽다. 먼저, 나중에 수행되는 것들이 명확하다. 비동기 > 동시에 여러 작업을 수행할 수 있다. > 흐름을 예측하기 어렵다. 무엇이 먼저 완료될지 보장할 수 없다. 2. setTimeout 비동기로 동작하는 함수중 대표적인 예는 setTimeout 함수이다. setTimeout 함수는 아무일도 하지않고 기다리기만 하는 자바스크립트 함수중 하나이다. function testFunc(param) { console.log(param); } setTimeout( testFunc(), 2000, 1 ); setTimeout(..
[javascript] ES6 let의 블록스코프, 렉시컬환경 for문으로 알아보자! ES6 등장 이전에 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는것 이였다. 하지만 var의 큰 단점때문에 현재는 거의 사용하지 않는다. 대신에 let과 const를 쓴다. 해당 내용은 공부한 내용을 자세하게 적어볼것이므로, 오늘은 이후에 블록스코프를 가지는 let을 for문에서 사용해보는 예제를 기록 할 것이다. 문제 let funcArr = []; for(let i = 0; i console.log(c) ); } funcArr.forEach( fn => fn() ) 해당 코드는 for문 안에 c라는 변수가 함수레벨 스코프를 가지는 var로 선언이 되어있기 때문에 최종 출력값은 > 8 8 8 8 8 이 된..
[javascript] error: Cannot read property '_wrapper' of undefined. (Vue.js 에러) Vue로 개발하는 과정에서 중간에 빌드 후 테스트를 하면 꼭 한번씩 발생하는 기본적인 에러이다. 오류 발생 시나리오 화면단에 새로운 클릭이벤트 기능을 추가하는 과정에서 빌드 하였을때 화면이 로딩되지 않음. 해결 template단에서 @click을 통해 함수를 호출하였으나 script 단에서 해당 함수를 정의하지 않았기 때문에 발생한 오류이다. 콘솔로그를 반환하는 빈 함수를 정의하여 해결하면 된다. 예시 @click="changeData" changeData () { console.log('temp function!') } - 참고링크 https://stackoverflow.com/questions/55552506/how-to-fix-cannot-read-property-wrapper-of-undefine..
[javascript] html2canvas로 영역 캡쳐하기 (scroll 영역부분이 캡쳐가 안된다면?) 개념 화면의 일부 영역을 이미지 데이터로 변환하여 사용해야할 필요가 있어서 자바스크립트 브라우저 화면 캡쳐 라이브러리인 html2canvas 를 사용하기로 했다. * 공식사이트 https://html2canvas.hertzen.com/ 나는 버튼 클릭이벤트가 발생하면 특정 영역을 이미지로 따와야했기 때문에 해당 함수 호출부분에 아래와같은 코드를 추가하였다. html2canvas(textArea, { }).then(canvas => { const textToImg = canvas.toDataURL() }) 나는 이미지를 서버에 저장할필요가 없이 변환된 데이터값만 필요했기때문에 textToImg 변수로 담아 사용하였다. 만약 서버에 이미지를 다운받아야 한다면, 아래와 같이 사용할 수 있다. html2canv..
[javascript] Array.forEach 자주하는 실수(some, every 사용하기) 자주하는 실수 오늘 설명할 forEach, some, every는 특정 조건을 만족하는지 배열 내부의 원소를 순회하면서 검사한다. some은 특정 조건이 만족할 경우 순회가 중단되고 every는 특정 조건을 만족하지 않을 경우 순회가 중단된다. 반면에 forEach는 순회가 중단되지 않는다. 즉! break를 지원하지 않는다는것! 설명 해시 알고리즘 문제를 풀면서 배열에 forEach문을 이용해 코딩을 했다. 중도에 조건을 만족하면 ealry return 하도록 코드를 짰는데 조건을 만족해도 배열 끝까지 명령문이 계속 수행이 되더라,, 흐음. 그래서 찾아보니 array.forEach()는 break를 지원하지 않는데 중도에 return을 시키려니 원하는 결과가 안나왔던 것이다. 예를들어 아래와같은 코드를..

티스토리툴바