프로그래밍-Web/Javascript(13)
-
[이슈] foreach에서 break사용하기
정확히는 foreach대신 some메소드를 사용하면 된다. 그리고 조건을 만족하는 Loop에서 true를 리턴해준다 예시의 경우라면 zoneIndex가 wbsIndex와 같은 조건에 대해 Loop가 종료될것이다.
2021.02.23 -
[정리] 객체,배열 깊은 복사하기
요약: JS에서 깊은 복사를 하는 방법은 라이브러리를 사용하지 않는 이상, JSON을 사용하는 방법 뿐이다. 1. slice 메소드 - nested하지 않은 배열에서 얕은 복사를 수행 - 얕은 복사가 수행된다 2. spread operator - 내부적으로 iterator-looping을 수행, 얕은 복사가 수행된다. 3. Object.assign - object.assign은 첫번째 args에 두번째 value를 담는 것으로 복사를 수행한다. - 얕은 복사가 수행된다. 4. JSON.parse와 JSON.stringify - 객체를 문자열로 바꿨다가 그대로 담으므로 nested도 간단하게 복사 가능 - 객체를 문자열로 바꾼다는 것의 뜻은, primitive type을 다룬다는 것이고, 이 때문에 깊은 ..
2021.02.03 -
[정리] map, filter, reduce, set 사용 꿀팁
1~5번 예시 데이터 1) 특정 key 값만 뽑기 2) value 여러개 사용하여 원하는 결과 뽑기 3) 검색 정규표현식과 test메소드를 사용 4) key별 갯수세기(통계) 5) 인덱싱 age를 index로 하는 테이블을 생성 6) key-value 바꾸기 reduce로 객체의 key들만 뽑은다음 정렬 7) 합집합, 교집합
2021.01.28 -
[정리] canvas API로 이미지 다운받기
리액트로 개발하던 도중, 그림을 수정해서 다운받는 기능 구현할 일이 생겼다. 내 경우에는 그림에 글씨를 새겨 결과물을 스토리지에 저장하는 기능이 필요했다. 이런 경우 canvas 라이브러리를 이용해 구현한다 이미 소스코드에는 targetImg라는 Img 컴포넌트와, uploadContent라는 String 데이터가 있다. targetImg위에 uploadContent를 새겨 그림파일로 만들어주면 된다. 구현을 위해 세가지 객체가 필요하다 canvas는 그림과 글을 올릴 DOM객체이다. 기존 바닐라 자바스크립트 구현에서는 canvas 컴포넌트를 셀렉트했으나, 이 경우에는 DOM객체를 새로 만들었다 ctx는 canvas의 property를 정의한다. 추후 ctx 객체를 이용하여 그림과 텍스트를 올린다 마지막..
2021.01.26 -
[이슈] Map과 ForEach의 차이
forEach() 메소드는 아무것도 리턴하지 않는다(undefined). 단지 제공된 함수로 Array 요소를 콜하는데, 이 콜백은 콜하는 Array를 변경하는 것이다 그러나 map() 메소드는 Array안에 요소들을 콜한다. forEach()와 다른점은 각 요소의 값을 사용하고 Array와 동일한 사이즈의 새로운 Array을 리턴한다는 점
2021.01.18 -
[개념정리] 자바스크립트 엔진 v8이 사용하는 Hidden Class, Inline Cacahing
engineering.linecorp.com/ko/blog/v8-hidden-class/ V8의 히든 클래스 이야기 - LINE ENGINEERING 자바스크립트가 되어 그 기분을 헤아릴 수 있다면 안녕하세요? LINE Fukuoka의 프론트엔드 엔지니어 Yonehara입니다. 저는 프론트엔드 개발자로서 아직 웹 브라우저나 자바스크립트의 기분을 헤아려 engineering.linecorp.com v8.dev/blog/fast-properties Fast properties in V8 · V8 In this blog post we would like to explain how V8 handles JavaScript properties internally. From a JavaScript point of v..
2021.01.18