[자바스크립트] 배열 안에 배열이 있을때 flat한 배열로 만들기

1. 최신 자바스크립트 API인 flat() 사용 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat Array.prototype.flat() - JavaScript | MDN The flat() method of Array instances creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. developer.mozilla.org 2. 직접 메소드 작성해보기 // arr: 배열, d: 차원 const flatDeep = (arr: any[], d = 1..

[자바스크립트] 이미지 URL을 File 또는 FileList로 변환하기

1개의 이미지 URL을 File 또는 FileList로 변환하기 export const convertImageUrlToFileList = async ( imageUrl: string ): Promise => { const response = await fetch(imageUrl); if (!response.ok) { throw new Error("이미지를 받을 수 없습니다."); } const data = await response.blob(); const ext = imageUrl.split(".").pop() || ""; const filename = imageUrl.split("/").pop() || ""; const metadata = { type: `image/${ext}` }; const fi..

[JS] 클로저란?

클로저란? 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 뜻한다. 자바스크립트만의 고유한 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다. 클로저의 핵심은, 스코프를 이용하여 변수의 접근 범위를 닫는 폐쇄성이다. 스코프를 이해해야 클로저를 이해할 수 있다. https://is-this-it.tistory.com/134 [JS] 스코프(Scope)란? 스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 is-this-it.tistory.com 클로저 스코프 체인 모든 클로저에는 세가지 스코프(범위..

[JS] 스코프(Scope)란?

스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 나눠진다. 특이사항으로, 자바스크립트에서 화살표 함수는 블록 스코프로 취급된다. 규칙 1. 안쪽 스코프에서 바깥쪽 스코프로만 접근 할 수 있다. (반대는 불가능) 2. 스코프는 중첩이 가능하다. 3. 가장 바깥 쪽의 스코프를 전역 스코프(Global Scope), 그 외의 스코프는 모두 지역 스코프(Local Scope)다. 4. 지역 변수는 전역 변수보다 우선 순위가 높다. 변수 선언 키워드 - var, let, const var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프..

[JS] 연속된 정수 배열을 만드는 다양한 방법

기본적인 사용자 지정 함수 function getNumberArray (N) { let a = Array(N), b = 0; while(b < N) a[b++] = b; return a; } getNumberArray(10); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ES6+ API을 활용한 1줄 짜리 방법들 - 0으로 시작하는 기본 수열 Array.from(Array(10).keys()) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] [...Array(10).keys()] // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] Array.apply(null, {length: 10}).map(Number.call, Number) // [0, 1, 2, 3, 4, ..

자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API

Intersection Observer API Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰할 수 있게 한다. 예시 let observer = new IntersectionObserver((e) => { e.forEach((el) => { console.log(el.intersectionRatio); // 화면에 포함된 퍼센트 if (el.isIntersecting) { console.log(el.intersectionRatio); el.target.style.opacity = el.intersectionRatio; } else { el.target.style.opacit..

자바스크립트 반복문 총 정리

1. for 기본적인 반복문. for (let i = 0; i 0~4 까지만 출력 console.log(i); } // for 문에서 continue 사용하기 for (let i = 0; i 홀수만 출력됨 console.log(i); } 2. for in 배열 뿐만이 아니라 object에서도 사용할 수 있다. Object 내 키 값을 가져오기 위..