전체 글

딥다이브

[딥다이브] 36장 디스트럭처링 할당

36장 디스트럭처링 할당 디스트럭처링 할당(destructuring assignment, 구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열 디스트럭처링 할당 ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. 즉 순서대로 할당된다. const [a,b] = [1,2]; console.log(a,b); // 1 2 const [c,d] = [1]; console.log(c,d); // 1 undefined const [e,f] =..

딥다이브

[딥다이브] 35장 스프레드 문법

35장 스프레드 문법 ES6에서 도입된 스프레드 문법(spread syntax) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. Array, String, Map, Set, Dom 컬렉션(NodeList, HTMLCollection), arguments 와 같이 for...of 문으로 순회할 수 있는 이터러블에 한정된다. 함수 호출문의 인수 목록에서 사용하는 경우 요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우가 있다. // Math.max 메서드는 숫자를 인자로 받는다. Math.max([1,2,3]); // NAN Math.max(...[1,2,3]); // 3 배열 리터럴 내부에서 사용하는 경우 ..

알고리즘/알고리즘 설명 및 예제

[알고리즘] 완전탐색(브루트 포스)

완전 탐색(브루트 포스) 모든 경우의 수를 시도하는 방법 경우의 수가 매우 많아지는 문제에 대해서는 제한 시간 내에 해결이 힘들 수 있다. 완전 탐색을 사용하는 경우 입력으로 주어지는 데이터의 크기가 작은 경우 답의 범위가 작고, 임의의 답을 하나 선택했을 때 문제 조건을 만족하는지 역추적할 수 있는 경우 사용되는 알고리즘 기법 단순 브루트 포스 단순히 반복문과 조건문을 사용하는 방법이다. 난이도가 높은 문제에서 단독으로 사용되는 경우는 거의 없다. 비트마스크(Bitmask) 2진수를 이용하는 컴퓨터의 연산을 이용하는 방법이다. 각 요소가 두 가지 상태만을 가질 수 있을 때 사용한다. 각 원소가 포함되는지 0 or 1(존재하지 않는 경우 or 존재하는 경우) 등으로 구분하여 저장하는 식으로 사용할 수 있..

알고리즘/프로그래머스

[프로그래머스] 배열 조각하기

https://school.programmers.co.kr/learn/courses/30/lessons/181893# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 시도 query 를 순회하면서 반복하기 때문에, 반복문을 통해 짝수/홀수 판단하여 각각에 맞는 인덱싱을 이용해 풀었다 def solution(arr, query): for idx in range(len(query)) : if idx%2==0 : arr = arr[:query[idx]] else : arr = arr[query[idx]:] return [-1] if len(arr)==0 else..

딥다이브

[딥다이브] 34장 이터러블

34장 이터러블(iterable) 이터레이션 프로토콜(iteration protocol) ES6에서 도입된 이터레이션 프로토콜은 순회 가능한(iterable) 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전에는 순회가능한 데이터 컬렉션들은 통일된 규약 없이 각자 나름의 구조를 가지고 for 문 등의 다양한 방법으로 순회할 수 있었습니다. 하지만 ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했습니다. 이터레이션 프로토콜 이터러블 프로토콜(iterable protocol) Well-known Symbol 인..

알고리즘/기타

부분집합 여부 확인 (isSubsetOf )

부분집합 여부 확인 (isSubsetOf) 문제 두 개의 배열(base, sample)을 입력받아 sample이 base의 부분집합인지 여부를 리턴해야 합니다. 접근 방법 base,sample을 합친것을 세트처리 한 것과 base의 값이 같으면 부분집합입니다. spread를 통해 합치고, JSON.stringify를 통해 값을 비교하는 방식으로 해결합니다. 해결 방법 const isSubsetOf = function (base, sample) { return JSON.stringify([...new Set([...base,...sample])]) === JSON.stringify(base) };

딥다이브

프로미스,async/await 문제

문제 문제1 // 방법1 then과 catch 사용 get('url') .then(res=>console.log(res)) .catch(err=>console.log(err)) ); // 방법2 then 하나만 사용 get('url').then( res = > console.log(res), err => console.error(err) ); 1. 프로미스의 에러 처리 시 방법1보다 방법2를 사용하는 것이 더 좋다 2. Promise.all 은 여러 개의 비동기 처리를 병행 처리할 때 사용되는 메서드로 모든 프로미스가 fulfilled 상태가 되면, resolve된 처리 결과를 fulfilled 상태가 된 순서대로 배열에 저장해 그 배열을 resolve 하는 새로운 프로미스를 반환한다. 3. async ..

프론트엔드/Section3

React Custom Component

[React] Custom Component CDD(Component Driven Development) CDD는 재사용할 수 있는 UI 컴포넌트를 미리 생성하고, 컴포넌트를 결합하여 페이지를 조립하는 개발 방법입니다. CDD 특징 부품단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다. 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발이다. 재사용할 수 있는 컴포넌트를 개발할 수 있다. CSS in JS 구조화된 CSS 등장배경 프로젝트의 규모나 복잡도가 커짐에 따라 CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었고, CSS를 구조화하는 방법에 대한 연구가 필요해졌습니다. CSS 전처리기 등장 이러한 문제점들을 해결하기 위해 CSS 전처리기(CSS Pre..

_차누_
탄탄한 개발자 성장일지