일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- lifecycle
- JavaScript
- customModal component 만들기
- Redux
- todolist
- Next
- 겹치는 선분의 길이
- JS
- 리엑트
- 파이어베이스
- 배열
- 생명주기
- debounce
- 리액트
- Recoil
- csr
- 달리기경주
- React
- google firebase
- SSR
- 자바스크립트
- 넥스트
- programmers
- NextJS
- Firebase
- 투두리스트
- react-query
- 리덕스
- next-pwa
- useMutation
- Today
- Total
목록Javascript (6)
끄적끄적
프로그래머스의 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..
데이터를 저장할 수 있는 것이 오직 서버만인 것은 아닙니다. HTML5에서 Web Storage API를 제공하여 쿠키를 사용하지 않고도 직관적인 key : value 형식의 데이터를 저장 및 사용할 수 있게 해줍니다. (쿠키도 key : valye 형식을 갖습니다) 이번 블로그에서는 Cookie와 Localstorage, Session Storage의 저장소로서의 개념과 특성에 대해 알아보겠습니다. ! 쿠키(Cookie)란? 쿠키는 웹사이트 접속지 접속자의 개인 장치에 다운되고 브라우저에도 저장되는 작은 텍스트 파일입니다. 서버를 통해 이용자의 설정과 과거 이용내역에 대한 일부 정보를 갖고 있습니다. HTTP요청을 흘때 서버는 요청자체만으로 누구에게 오는지 알 수가 없기에 쿠키를 읽어 나를 파악할 수 ..
Javascript(JS)에서 중요한 개념인 Closure를 알아보겠습니다. JS를 사용해본 사람이라면 언젠가 들어봤을겁니다. 클로저. 하지만 개념이 어렵고 낯설어 이해하기가 쉽지 않습니다. 지금부터 closure의 개념과 간단한 예제를 통해 왜! 사용하는지에 대해서 알아보겠습니다. ! 클로저(Closure)란? Javascript에만 국한되는 것이 아닌 일급객체를 다루는 함수형 프로그래밍 언어에서 사용하는 개념으로, 함수가 실행될 때 의 스코프(lexical scope)를 기억해 함수가 외부에서 사용됐을 때도 이를 기억해 사용할 수 있게 해주는 것이다. 이렇게만 들으면 매우 어렵습니다. 간단하게 전역변수를 지역변수처럼 사용할 수 있게 해주는 것입니다. 이렇게도 들어도 매우 어렵습니다. :( 코드로 살펴..
이번 포스팅은 Javascript의 배열에서 자주쓰이는 함수들의 시간복잡도를 알아보려고 합니다. 배열은 정말 많이 쓰이는 자료구조 입니다. 그만큼 잘못사용한다면 성능에 영향을 끼칠 수 있습니다. Javascript에서의 배열 함수들의 실행 구조와 시간복잡도에 대해서 알아보겠습니다. ! 우선 Javascript에서의 배열은 저희가 알고 있던 배열과는 조금 다릅니다. 일반적인 배열이라는 자료구조는 동일한 크기의 메모리 공간이 연속적으로 나열된 자료구조입니다.. 하나의 타입을 갖고 연속적으로 인접해 있는 상태입니다. address(메모리 주소) 1000 1008 1016 1024 array 10 20 30 40 index 0 1 2 3 이러한 배열을 dense array라고 합니다. 이렇게 생긴 형태의 배열은..