JavaScript
-
ES6+ | reduce 배열 메서드JavaScript/ES6+ 2020. 5. 21. 15:47
Reduce 배열 메서드 중 하나로 함수형 프로그래밍의 기초 중 하나 배열의 각 요소에 콜백 함수를 실행하고, 해당 반환값을 누적값에 합친 뒤 최종 누적값을 반환 잘 활용하면 거의 모든 코드를 한 줄의 코드로 바꿀 수 있는 강력한 메서드 두 개 이상의 배열 메서드가 필요할 때 reduce 메서드만 사용해서 해결가능한 경우가 많음 복잡한 문제를 깔끔하게 해결할 수 있는 디자인 패턴의 기초가 됨 구조 ARRAY.reduce((total, value, index, array) => { // javascript code }, initialValue) total: 매 리턴 값을 합친 누적값 value: 배열의 각 요소 값 index: 배열 인덱스 array: 전체 배열을 뜻하는 값 initialValue: 누적을..
-
ES6+ | Array Methods 배열 메서드 간단 정리JavaScript/ES6+ 2020. 5. 21. 15:38
every 배열의 모든 요소가 조건에 맞으면 true를, 그렇지 않다면 false를 반환 수행 중 거짓이 나온다면 수행을 멈추고 false 반환 예제 const arr = [2, 3, 4]; const isBiggerThanOne = arr.every((key) => key > 1); console.log(isBiggerThanOne); // true find 배열 내에서 특정 요소를 찾는 데 사용하며 조건에 맞는 요소를 반환 예제 const arr = ["node.js", "올인원"]; const res = arr.find((key) => key === "올인원"); console.log(res); // 올인원 includes 배열 내에 특정 요소가 있다면 true를, 그렇지 않다면 false를 반환 ..
-
ES6+ | Async AwaitJavaScript/ES6+ 2020. 5. 18. 14:42
Async Await async await은 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능 ES2017에 자바스크립트 표준으로 등록 프로미스의 then 메서드를 체인 형식으로 호출하는 것보다 가독성이 좋음 프로미스는 비동기 상태를 값으로 다룰 수 있는 async await 보다 큰 개념으로, async await이 프로미스를 완전히 대체할 수는 없음 async await 이해 async await 함수는 프로미스를 반환 프로미스는 객체로 존재하지만 async await은 함수에 적용되는 개념 async function getData() { return 123; } getData().then(data => console.log(data)); // 123 // Promise {..
-
ReactJS | Test 개요 및 Component Test 기초JavaScript/React JS 2020. 5. 18. 12:29
TEST 테스트 테스트는 어떤 가설을 검증해 나가는 과정이며 고품질의 소프트웨어를 개발하기 위해선 꼭 필요한 기본 중의 기본 테스트의 종류 피라미드 테스트에서의 테스트 단위 단위(Unit): 단위 테스트는 기능의 개별적인 단위를 테스트, 리팩토링에 도움이 되며 모듈화를 증진 서비스: 서비스 테스트는 기능의 집합에 집중, 범위의 규모나 테스트 수행 대상에 관한 집중도 수준이 매우 다양 통합(Integration): 애플리케이션의 여러 부분을 통합해서 테스트하는 높은 수준의 테스트에 집중, 이 테스트는 인터페이스 자체를 이용해서 테스를 진행 테스팅 트로피 Kent C. Dodds에 의해 잘 알려진 테스팅 트로피는 프론트엔드 테스트에서 두각을 보이는 방법 통합 테스트가 투자 대비 얻는 것이 가장 많기 때문에 ..
-
Redux | 리덕스 사가를 이용한 비동기 액션 처리JavaScript/Redux 2020. 5. 15. 10:47
리덕스 사가를 이용한 비동기 액션 처리 리덕스 사가는 리덕스에서 비동기 액션 처리를 위해 사용되는 패키지 중 하나 비동기 액션 처리에 많이 사용되는 리덕스 패키지 API 호출을 통해서 서버로부터 데이터를 받아 오는 것이 대표적인 비동기 코드 패키지명 선택 기준 특징 redux-thunk 여러 개의 비동기 코드가 중첩되지 않음 비동기 코드의 로직이 간단함 가장 간단하게 시작 가능 redux-observable 비동기 코드가 많이 사용됨 RxJS 패키지를 기반으로 만들어져서 리액티브 프로그래밍을 공부해야 하기 때문에 진입 장벽이 가장 높음 redux-saga 비동기 코드가 많이 사용됨 제너레이터를 적극적으로 활용 테스트 코드 작성이 쉬움 리덕스 사가 개요 ES6의 제너레이터를 기반으로 만들어짐 모든 부수 효..
-
Redux | Reselect 패키지로 선택자 함수 만들기JavaScript/Redux 2020. 5. 15. 10:17
Reselect 패키지로 선택자 함수 만들기 reselect 패키지는 원본 데이터를 다양한 형태로 가공해서 사용할 수 있도록 도와줌 특히 리덕스의 데이터를 리액트 컴포넌트에서 필요한 데이터로 가공하는 용도로 많이 사용 구현 기능 친구 목록에 연령 제한 옵션과 개수 제한 옵션 추가 연령 제한을 적용한 친구 목록과 연령/개수 제한을 모두 적용한 친구 목록을 보여줌 reselect 패키지 없이 구현해 보기 옵션 선택 컴포넌트 작성 옵션을 선택할 수 있는 기능을 가진 컴포넌트 작성 friend/component 폴더 밑에 NumberSelect.js 파일 작성 import React, { Component } from "react"; class NumberSelect extends Component { onCh..
-
Redux | 리액트 상탯값 리덕스로 관리하기JavaScript/Redux 2020. 5. 15. 09:40
리액트 상탯값 리덕스로 관리하기 리덕스는 리액트뿐만 아니라 자바스크립트를 사용하는 모든 곳에서 사용 가능하지만 리액트와 궁합이 잘 맞음 리액트 컴포넌트의 상탯값과 마찬가지로 리덕스의 상탯값도 불변 객체임 상탯값이 불변 객체이면 값의 변경 여부를 빠르게 확인 가능 → 리액트 성능 향상의 한 가지 요인 리액트에서 리덕스를 사용할 때는 react-redux 패키지가 많이 사용됨 react-redux 패키지 없이 직접 구현하기 앞에서 작성한 친구 목록/타임라인 코드를 기반으로 작성 스토어 분리하기 스토어 객체를 원하는 곳에서 가져다 쓸 수 있도록 별도의 파일로 분리 common 폴더 밑에 store.js 파일 생성 후 아래 코드 입력 import { createStore, combineReducers } fro..
-
Redux | 데이터 종류별로 상탯값 나누기JavaScript/Redux 2020. 5. 14. 17:33
데이터 종류별로 상탯값 나누기 프로그램 안에서 사용되는 데이터 양이 많아지면 모든 액션을 하나의 파일에 작성하거나 하나의 리듀서 함수로 작성할 수 없음 리덕스에서 제공하는 combineReducer 함수를 이용하면 리듀서 함수를 여러 개로 분리 가능 실습 프로젝트 생성 CRA 기반 프로젝트 생성 $ npx create-react-app redux-test # src폴더 밑에서 index.js 파일을 제외한 모든 파일 삭제 # index.js 파일의 내용도 지우고 다음 두 개의 패키지 설치 $ npm i redux immer 구현 기능 ① 타임 라인 사용자에게 보여 줄 여러 개의 게시물을 관리 각 게시물 데이터를 배열로 관리 게시물의 CRUD가 가능해야 함 무한 스크롤 기능이 필요하기 때문에 페이지 번호도..