일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 올리브영 발색비교 기능구현하기
- new Promise()
- 자바스크립트 reduce 함수 직접 만들어보기
- 코어자바스트립트
- 자바스크립트 검색 구현하기
- 자바스크립트
- react 배열 재정렬하기
- 자바스크립트로 하는 자료 구조와 알고리즘
- 리액트 고차컴포넌트
- 검색 자동완성
- 리엑트 검색 기능 구현하기
- compose 함수
- 노드교과서
- range 함수 직접 만들기
- 유저접근제한
- next seo
- 순수함수
- 리액트 이미지 미리보기
- 러닝리액트
- 넥스트 검색엔진최적화
- search input
- JavaScript
- 프로미스 직접 구현하기
- 프로미스
- react-beautiful-dnd
- 자바스크립트로 달력만들기
- debound
- 리액트 dragdrap
- react search input
- 초집합
- Today
- Total
목록자바스크립트 (12)
미주알고주알
자바스크립트를 사용하면서 클래스를 사용할 일이 그렇게 많이 없었는데, stack, queue, array 에서 공통적인 개념을 모아 collection 이라 부르고, 이를 필요에 맞게 상속함으로써 클래스를 완성하는 연습을 해보았다. 1. Collection 이터레이터 객체에 내장되어 있는 메소드 및 프로퍼티를 만들어보았다. class Collection { #arr; constructor(...args) { this.#arr = Array.isArray(args[0]) ? args[0] : [...args]; } push(val) { this.#arr.push(val); } pop() { return this.#arr.pop(); } shift() { return this.#arr.shift(); } c..
Javascript의 splice 메소드는 독특하게도 배열의 기존 요소를 "삭제", "교체", 그리고 새 요소를 "추가"하여 기존 배열의 내용을 변경하는 기능을 갖고 있다. 참 다재다능한 친구구만. 매개 변수에 대한 설명은 mdn 문서를 참고!!! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.prototype.splice() - JavaScript | MDN splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. developer.mozilla.org 근데, 이런 splice 는 기존의 배열을 변경한다는 점에서 비순수 함..
배열의 메소드를 사용하는 일이 많은데, 다음의 네 메소드는 순수함수라기 보다.. 배열의 값 자체를 바꿔버리는 함수들이기 때문에 함수 실행의 시기 및 횟수에 따라 변경된 배열을 참조하게 된다. 이런 점에서 빈번하게 사용되는 push, pop, shift, unshift 메소드를 순수 함수로 바꿔 만들어 보기로 했다. 들어온 인자에 대해 결과를 리턴할 뿐이기 원래의 배열 값을 변경시키지 않는다. 구현에 사용한 배열의 filter 함수 및 새로운 객체 변화시키는 것은 기존 객체를 활용할 뿐이지, 변경시키지는 않기 때문이다. const push = (arr, ...args) => [...arr, ...args]; const pop = (arr, cnt = 1) => arr.filter((_, i) => i < ..
배열을 거꾸로 뒤집기 위해서 일반적으로 사용하는 방법은, const reverseArray = arr => { const ret = [] for (let i = arr.length; i > 0; i -= 1) { ret.push(arr[i]) } return ret; }; 또는 const reverseArray2 = arr => arr.map((a, i) => arr[arr.length - 1 - i]); 이렇게 배열 인덱스를 그 길이에서 맞춰 하나씩 줄여가는 방식을 사용해도 좋지만, 배열의 길이에 비례하게 순회해야 하기 때문에(복잡도가 O(n)), 이보다 더 좋은 방법을 생각해야 할 것 같다. const reverseArray3 = arr => { const maxIdx = arr.length - 1;..
JavaScript의 `reduce` 함수는 배열의 모든 요소를 하나의 값으로 줄이는(reduce) 함수다. `reduce` 함수는 콜백 함수를 사용해 배열 요소를 하나의 값으로 줄여 반환합니다. mdn에서 다음과 같이 reduce 함수의 구문을 보여준다. array.reduce(callback[, initialValue]); 배열 요소 처리 함수 `callback`, 초기값(선택) `intialValue` 그리고 이 callback은 인자에 순서대로 `acc(누적값)`, `cur(현재 요소)`, `idx(인덱스)`를 갖는다. 요런 특징을 가진 `reduce` 함수를 배열의 prototype 메소드가 아닌 일반 함수로 만들어보자. const reduce = (arr, f, initialValue) => ..
시작점과 끝점 그리고 간격에 따라 그 배열을 출력할 수 있는 함수를 만들어보자. 가령, `range(1,5)` 면 `[1,2,3,4,5]`를, `range(1,5,2)`면 `[1,3,5]`, `range(1,5,-1)`면 `[5,4,3,2,1]` 를 출력하는 `range`함수 말이다. 가장 먼저, 범주가 만들어지지 않을 조건에 대해선 빈 배열값을 반환한다. 그 다음 start, end, step이 비어있을 경우에 대해 (조건에 따라) 초기값을 할당한다. 이때 step 값에 따라 배열을 순회하는 방향이 달라짐을 반영한다. (`until`) 이런 논리를 다음과 같은 코드로 옮겨보자. if문을 사용하지 않고 삼항연사자를 써봤는데, 뭔가 더 읽기 어렵게 느껴지는 건 기분 탓일까? const range = (st..
Javascript의 `Set(집합)`객체는 수학적 개념에서 알 수 있듯이 중복을 제거할 때 사용될 수 있다. 고유한 값만을 갖고 있으니까 말이다! 이런 특징을 토대로 좀 더 다양하게 활용해보자. 가령, 집합을 교집합, 합집합, 차집합, superset 과 같은 더 세부적인 개념으로... 어려울 것 없이, 간단하다. 두 개 이상의 집합 간의 요소를 비교하고 (어떤 조건에 의해) 부분을 추출하는 원리이기 때문에 `Array.prototype.filter`메소드를 활용하면 된다. 1. 교집합 const intersect = (arr1, arr2) => { const [a, b] = arr1.length < arr2.length ? [arr1, arr2] : [arr2, arr1]; return new Set..

서울 지하철 2호선 노선도를 기준으로 출발역에서 도착역까지 몇 정거장을 건너가야 하는 지를 알려주는 코드를 짜보자. 일반적인 배열을 사용해도 좋겠지만, `next`란 메소드를 사용해서 `done`여부를 확인할 수 있는 `iterator`의 개념을 활용해보려고 한다. 일단 서울 2호선 지하철 노선도 데이터를 js 파일에 담았다. 이 값을 순회하면 될 것이다. export const LINE2 = ['신도림','성수','신설동','용두','신답','용답','시청','충정로','아현','이대','신촌','공항철도', '홍대입구','합정','당산','영등포구청','문래','대림','구로디지털단지','신대방','신림','봉천','서울대입구','낙성대','사당', '방배','서초','교대','강남','역삼','선릉..