프론트엔드
-
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..
-
미들웨어(Middleware)란?Redux 2020. 8. 22. 00:21
미들웨어(Middleware)란? 액션(action)과 리듀서(reducer) 함수 사이의 중간자라고 하며, 미들웨어를 통해 전달받은 액션을 콘솔에 기록하거나 취소 혹은 다른 종류의 액션을 추가적으로 디스패치(dispatch)할 수 있다. 단, 미들웨어를 설정하지 않는다면 액션은 바로 리듀서에게 보내진다. 리덕스(Redux)에서의 미들웨어는? 리덕스에서 미들웨어는 액션을 디스 패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다. 리덕스 미들웨어의 구조 // 미들웨어 기본 구조 const loggerMiddleware = store => next => action => { // 하고자 하는 작업 }; 위 코드는 화살표 함수를 연달아서 사용했는데, 일반 function 키워드로 풀어..
-
자바스크립트 - 스코프 체인(scope chain)란?JavaScript/기본 2020. 7. 20. 20:01
스코프 체인(scope chain)이란? 스코프 체인(Scope Chain)은 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다. 하지만 스코프 체인(scope chain)을 이해하기 위해서 먼저 자바스크립트의 실행 컨텍스트(Execution context)를 알아야 한다. 그렇다면 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)는 우리가 작성한 코드가 실행되는 환경을 말하며, scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리를 말한다. 그리고 이 실행 컨텍스트에는 두 개의 실행 컨텍스트가..
-
React - Virtual DOMReact/기본 2020. 7. 20. 00:25
Virtual DOM이란 무엇인가? 우선 Virtual DOM은 이름 그대로 가상의 DOM을 의미한다. 리액트의 주요 특징 중 하나이며, DOM을 빈번히 업데이트하는 것을 좀 더 효율적인 방법으로 업데이트하기 위해 만들어졌다. 그렇다면 DOM은 무엇인가? DOM은 Document Object Model의 약어이다. 웹 페이지가 화면에 로딩되면 브라우저는 페이지의 문서 객체 모델(DOM)을 만든다. 이 DOM을 더 간단히 설명하자면, 애플리케이션의 UI를 나타내며, HTML 파일의 JavaScript 표현을 말한다. 애플리케이션 UI 상태가 변경 될 때마다 DOM은 트리 형태이기 때문에 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입도 가능하다. 왜 DOM에 바로 접근하는 대신 Virtual D..
-
[level1] - x만큼 간격이 있는 n개의 숫자도움말programmers/level1 2020. 7. 19. 12:58
코딩테스트 연습 - x만큼 간격이 있는 n개의 숫자 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. �� programmers.co.kr 문제 설명 : 함수 solution은 정수 x와 자연수 n을 입력받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 입력 및 출력 x n return 2 5 [2,4,6,8,10] 4 3 [4,8,12] -4 2 [-4, -8] 접근 방법 : 우선 n개를 지닌 리스트를 만들어야 하기 때문에, 배열..
-
[level1] - 제일 작은 수 제거하기programmers/level1 2020. 7. 14. 19:21
코딩테스트 연습 - 제일 작은 수 제거하기 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1 programmers.co.kr 문제 설명 : 정수를 저장한 배열, arr에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를 들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 return하고, [10]이면 [-1]을 return합니다. 입력 : [4,3,2,1] 출력 : [4,3,2] 입력 : [10] 출력 : [-1] 접근 방법..
-
[level1] - 자연수 뒤집어 배열로 만들기programmers/level1 2020. 7. 4. 02:19
코딩테스트 연습 - 자연수 뒤집어 배열로 만들기 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 조건 n은 10,000,000,000이하인 자연수입니다. 입출력 예 n return 12345 programmers.co.kr 문제 설명 : 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를 들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 입력 : 12345 출력 : [5,4,3,2,1] 접근 방법 : 출력값이 배열 타입에 역순으로 정렬된 모습을 보고, 타입이 Number인 12345를 String 타입으로 형 변환하고, spilt("")을 통해 문자열을 각각의 문자들..
-
[level1] 이상한 문자 만들기programmers/level1 2020. 7. 4. 01:32
코딩테스트 연습 - 이상한 문자 만들기 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 programmers.co.kr 문제 설명 : 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백 문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. 입력 : "try hello world" 출력 : "TrY HeLlO WoRlD" 접근 방법 : function solution(s) { const strArr = s.split(); let Arr = ..