일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- debounce
- csr
- customModal component 만들기
- 배열
- todolist
- 생명주기
- JS
- google firebase
- SSR
- 리엑트
- 리덕스
- useMutation
- 파이어베이스
- 넥스트
- Firebase
- Redux
- NextJS
- JavaScript
- Next
- React
- lifecycle
- 달리기경주
- 리액트
- programmers
- 투두리스트
- 자바스크립트
- next-pwa
- 겹치는 선분의 길이
- Recoil
- react-query
- Today
- Total
목록JavaScript (7)
끄적끄적
첫번째 실패한 문제해결 방법과 이유) 0 - 200 까지의 array를 만들고, array의 index를 각 꼭지점으로 설정하여 선분이 존재하는 꼭지점에 +1씩 하엿다. 그리고 0 부터 200까지 순회를 한번 하며, array의 요소가 연속으로 2이상이 나온다면 겹치는 선분이라고 판단하였다. 이는 선분이 아닌 양끝에 꼭지점이 있어도 선분이라고 판단되는 잘못된 생각이었다. // 잘못된 코드 function solution(lines) { let arr = new Array(201).fill(0); for(let i=0; i
프로그래머스의 Level1 짜리 문제임에도 불구하고 정답률이 낮은 문제입니다. 문제만 읽고 나면 정말 간단해 보이는 문제 같은데, 정작 중요한 시간초과가 나옵니다. 시간초과를 낸 문제 해결 방법을 먼저 보겠습니다. 문제 해결 방식) 위의 callings를 한번씩 읽으면서 players의 해당 선수의 위치와, 그 앞선수의 자리를 바꿔주기만 하면 되는 것이다. function solution(players, callings) { let answer = players.slice(); callings.map((p,i) => { let pos = answer.indexOf(p); swapWithPrevious(answer, pos); }) return answer; } function swapWithPreviou..
사용자와의 인터랙션중에 수많은 API요청이나, 액션들로 인해 우리의 사이트가 느려질 수가 있습니다. 이중 가장 흔한 건 scroll event, keydown event .. 같은 종류들입니다. 오늘은 scroll event를 인식할 때 동작 하기 위한 throttling 과 debounce에 대해 알아보겠습니다. 우선 둘다 이벤트나 함수 실행의 빈도를 줄이고 효율성을 올리기 위한 함수들입니다. 1. Throttling Throttle 는 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아, 한번씩 출력을 제한한다. 예시로는 javascript 라이브러리인 lodash 의 throttle, debounce를 사용하겠습니다. _.throttle(func, [wait=0], [options={}]) ..
자바스크립트에서 배열에 관련된 함수들이 많이 있습니다. 그 중에서도 배열의 요소를 순환하며 특정 로직을 수행하려면 엄청 자주 쓰이는 map, forEach 가 있죠. 그렇다면 reduce는 무엇일까요 ? Javascript MDN에 보면 'reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.' 라고 되어 있습니다. 이렇게만 보면 이해가 좀 어렵긴 합니다. reduce의 간단한 예시를 통해 알아가보도록 하겠습니다. ① 배열의 요소를 모두 더한 값을 얻기 let Arr = [1,2,3,4,5,6,7,8,9,10]; // forEach를 통한 덧셈구현 let result = 0; Arr.forEach(data=> result += data..
! Javascript ? Typescript 위의 이미지와 비슷하게 Javascript와 Typescript는 비슷해보입니다. 하지만 가장 중요한 차이인 JS는 동적타입언어 이며 TS는 정적타입언어 입니다. 동적타입언어는 런타임시 변수의 타입이 결정되고, 정적타입언어는 컴파일시 변수의 타입이 결정됩니다. TS는 JS의 모든 기능을 포함하면서 정적타입을 지원하는 언어입니다. JS는 타입을 지정하지 않기 때문에 중간 마다 다양한 타입의 값들을 변수에 할당할 수 있습니다. 이러한 자유로움 덕분에 진입장벽이 낮고, 적은 코드에서의 생산성이 높습니다. 하지만 TS는 변수를 선언할 때마다 타입을 고민해야지만, 많은 코드에서의 생산성이 높습니다. 생산성의 차이는 변수와 같은 것들을 다양한 곳에서 사용하고 코드의 잠..
Javascript(JS)에서 중요한 개념인 Closure를 알아보겠습니다. JS를 사용해본 사람이라면 언젠가 들어봤을겁니다. 클로저. 하지만 개념이 어렵고 낯설어 이해하기가 쉽지 않습니다. 지금부터 closure의 개념과 간단한 예제를 통해 왜! 사용하는지에 대해서 알아보겠습니다. ! 클로저(Closure)란? Javascript에만 국한되는 것이 아닌 일급객체를 다루는 함수형 프로그래밍 언어에서 사용하는 개념으로, 함수가 실행될 때 의 스코프(lexical scope)를 기억해 함수가 외부에서 사용됐을 때도 이를 기억해 사용할 수 있게 해주는 것이다. 이렇게만 들으면 매우 어렵습니다. 간단하게 전역변수를 지역변수처럼 사용할 수 있게 해주는 것입니다. 이렇게도 들어도 매우 어렵습니다. :( 코드로 살펴..