분류 전체보기
-
React - reselect 사용하기React/라이브러리 2020. 8. 31. 23:37
들어가기에 앞서, 우선 Selector를 먼저 알아야 한다. Selector는 무엇인가? selector는 state에서 필요한 데이터를 가져오거나, 계산을 수행해서 원하는 형태의 데이터를 가져오는 역할을 말한다. 왜 써야 하는가? 다음 예제를 살펴보자. todoApp 리듀서와 getIncompleteTodos selector가 존재한다. // Reducer function todoApp(state = [], action) { switch (action.type) { case GET_ALL_TODOS: return { todos: action.data.todos }; default: return state; } } // Selector function getIncompleteTodos(state) { r..
-
Redux Toolkit이란?Redux 2020. 8. 23. 16:02
Redux Toolkit의 등장 배경 Redux가 처음 등장했을 때 많은 사람들은 우리의 애플리케이션의 모든 상태 관리 문제가 해결될 것이라고 기대했었다. 하지만 많은 개발자들이 Redux 사용에 대해 몇 가지 불편함을 느꼈다. 사용했을 때 불편했던 이유는 Redux 스토어를 구성하는 것은 너무 복잡하며, Redux를 더 유용하게 쓸려면 많은 패키지들을 추가해야 하며, 불필요한 상용구 코드량이 많다는 것이다. 이러한 Redux의 한계를 깨닫고 "효율적인 Redux 개발을위한 공식적이고 독단적인 배터리 포함 도구 세트" Redux Toolkit (RTK)가 개발되었다. 그렇다면 Redux Toolkit를 어떻게 사용하는가? 설치 방법 createAction createAction은 액션 생성자 함수를 반환..
-
미들웨어(Middleware)란?Redux 2020. 8. 22. 00:21
미들웨어(Middleware)란? 액션(action)과 리듀서(reducer) 함수 사이의 중간자라고 하며, 미들웨어를 통해 전달받은 액션을 콘솔에 기록하거나 취소 혹은 다른 종류의 액션을 추가적으로 디스패치(dispatch)할 수 있다. 단, 미들웨어를 설정하지 않는다면 액션은 바로 리듀서에게 보내진다. 리덕스(Redux)에서의 미들웨어는? 리덕스에서 미들웨어는 액션을 디스 패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다. 리덕스 미들웨어의 구조 // 미들웨어 기본 구조 const loggerMiddleware = store => next => action => { // 하고자 하는 작업 }; 위 코드는 화살표 함수를 연달아서 사용했는데, 일반 function 키워드로 풀어..
-
[level1] - 같은 숫자는 싫어programmers/level1 2020. 7. 27. 17:20
코딩테스트 연습 - 같은 숫자는 싫어 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 programmers.co.kr 문제 설명 : 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1]을 return 합니다. arr = [4, 4, 4, 3, 3]..
-
바닐라 자바스크립트 Redux 적용하기Redux 2020. 7. 26. 13:52
바닐라 자바스크립트를 통해 리덕스를 알아보자. 리덕스(Redux)란 무엇인가? 리덕스(Redux)는 자바스크립트 애플리케이션에서 흔히 쓰이는 state container이며, 리액트(React) 뿐만 아니라, 어떠한 자바스크립트 라이브러리와도 연결할 수 있는 state(상태) 관리 라이브러리이다. 예제를 통해 알아보자. 아래 예제를 보면 버튼을 눌렀을 때, count의 수가 증가하거나 감소하는 자바스크립트 코드가 있다. index.html index.js Add 버튼을 눌렀을 때, 숫자가 증가하고 Minus 버튼을 눌렀을 때, 숫자가 감소한다. 이 자바스크립트로 작성된 코드를 리덕스(redux)로 바꾼다면? 아래와 같은 예제가 될 것이다. import { createStore } from "redux";..
-
자바스크립트 - 클로저(closure)란 무엇인가?JavaScript/기본 2020. 7. 25. 17:17
들어가기 전에, 렉시컬 스코프(Lexical Scope)를 먼저 알고 넘어가자. 참고! 자바스크립트 - 렉시컬 스코프(Lexical Scope) 들어가기에 앞서, Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다. 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였� ljtaek2.tistory.com 클로저(closure)란 무엇인가? 클로저(closure)는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이라고 부르며, 내부 함수가 외부(enclosing) 함수 변수에 액세스(접근) 할 수 있는 자바스크립트의 기능을 말한다. 우선 예제를 먼저 보고 생각해보자..
-
[level1] - 약수의 합programmers/level1 2020. 7. 25. 13:55
코딩테스트 연습 - 약수의 합 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다. 입출력 예 n return 12 28 5 6 입출력 예 설명 입출력 예 #1 12의 약수 programmers.co.kr 문제 설명 : 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 입출력 예 n return 12 28 5 6 접근 방법 : 이 문제는 약수를 구해서 모두 더한 값을 반환하면 되는 아주 간단한 알고리즘 문제이다. 약수란? 어떤 수를 나누었을 때 나머지가 0인 수를 말한다. 주어진 수 N이 있으면 1부터 N까지의 수를 하나씩 나눴을 때, 나머지가 0이면 그것이 약수인..
-
자바스크립트 - 렉시컬 스코프(Lexical Scope)JavaScript/기본 2020. 7. 25. 12:27
들어가기에 앞서, Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다. 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다. 즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다. 다른 말로, 정적 스코프(Static scope)라 부르기도 하다. 아래의 예시 코드가 어떻게 동작할지 생각해보자.