Ryu.log

Axios인스턴스와 async/await을 통한 콜백 지옥 탈출 LoL-state 프로젝트를 진행하며 Riot API 서버에 접근하여 데이터를 받아오는 통신부분은 Promise 기반의 Axios로 처리했다. 기존 비동기 코드의 콜백지옥을 훌륭하게 탈피한 Promise이지만 작업을 하다보니 처리가 애매한 부분이 생겼다. import axios from 'axios'; const ApiDefault = { url : "https://kr.api.riotgames.com/lol", key : "XXXXXXXXXXXXXX" } getLOLData = () => { let summonerUrl, matchUrl, leagueUrl; if(this.state.input.length { matchUrl = `${Ap..

CRA(create-react-app) Webpack sass-loader 기본 루트 설정CRA (create-react-app)으로 생성된 React 프로젝트는 다양한 컴포넌트 스타일링 방식이 있다.여러 방법이 존재하지만 기본 스타일루트를 지정해주어서 전역변수처럼 활용하는 스타일링 방법에대해 알아본다. src디렉토리 안에 styles라는 디렉토리를 생성하고 utils.scss파일을 만들어서,자주 사용 될 수도 있는 Sass 변수 및 믹스인을 따로 분리하여 전역변수와 같이 사용 할 때 utils.scss에 담긴 변수 및 믹스인을 사용하려면, 위 코드처럼 상대경로를 쭉 입력해 주어야 하는 번거로움이 있다. 이부분은 필수 적인 작업은 아니지만, 해두면 좋을 수 있는 작업이다.Webpack에서 Sass를 처리..

Array.prototype.splice()Array.prototype.splice() 메서드는 배열내 요소를 삭제, 추가, 변경이 자유롭게 가능하다. let months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at 1st index position console.log(months); // expected output: Array ['Jan', 'Feb', 'March', 'April', 'June'] months.splice(4, 1, 'May'); // replaces 1 element at 4th index console.log(months); // expected output: Array ['Jan'..

Array.prototype.unshift()Array.prototype.unshift() 메서드는 새로운 요소를 배열의 맨앞쪽에 추가한 뒤, 합쳐진 배열을 반환한다. let array1 = [1, 2, 3]; console.log(array1.unshift(4, 5)); // output: 5 console.log(array1); // output: Array [4, 5, 1, 2, 3] 반환값메서드를 호출한 배열과 추가된 배열값이 합쳐진 배열예제코드 let arr = [1, 2]; arr.unshift(0); // result of call is 3, the new array length // arr is [0, 1, 2] arr.unshift(-2, -1); // = 5 // arr is [-2, ..

Array.prototype.shift()Array.prototype.shift() 메서드는 배열의 첫번째 요소를 제거하고, 제거된 요소를 반환한다. arr.shift(); 반환값배열에서 제거된 첫번째 요소를 반환한다. 빈 배열일 경우 undefined를 반환한다.예제코드 let myFish = ['angel', 'clown', 'mandarin', 'surgeon']; console.log('myFish before: ' + myFish); // "제거전 myFish 배열: angel,clown,mandarin,surgeon" let shifted = myFish.shift(); console.log('myFish after: ' + myFish); // "제거후 myFish 배열: clown,mand..

Array.prototype.pop()Array.prototype.pop() 메서드는 배열의 마지막 요소를 제거하고, 그 요소를 반환한다. arr.pop() 반환값배열에서 제거된 요소를 반환한다. 빈 배열일 경우 undefined를 반환한다.예제 코드 let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon'] let popped = myFish.pop(); console.log(myFish); // ['angel', 'clown', 'mandarin' ] console.log(popped); // 'sturgeon'

Array.prototype.sort() Array.prototype.sort() 메서드는 배열의 요소를 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다. let months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // output: Array ["Dec", "Feb", "Jan", "March"] let array1 = [1, 30, 4, 21]; array1.sort(); console.log(array1); // output: Array [1, 21, 30, 4]arr.sort([compareFunction]) // ..

string.localeCompare()string.localecompare() 메서드는 기준 문자열과 비교했을 때 비교 대상 문자열이 정렬상 전에 오는지, 후에 오는지 혹은 같은 순서에 배치되는지를 알려주는 숫자를 리턴해준다. str.localeCompare(비교str) //stre : 대상 문자 //비교str : 비교할 문자 예제 코드 console.log('a'.localeCompare('b')); // -1 console.log('b'.localeCompare('a')); // 1 console.log('b'.localeCompare('b')); // 0

String.prototype.repeat() String.prototype.repeat() 메소드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 리턴한다. str.repeat(count); // str : 문자열 // count : 문자열을 반복할 횟수. 0과 양의 무한대 사이의 정수 반환값 현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열. 예외 반복 횟수는 양의 정수여야 함. 반복 횟수는 무한대보다 작아야 하며, 최대 문자열 크기를 넘어선 안됨. 예제 코드 'abc'.repeat(-1); // Error 'abc'.repeat(0); // '' 'abc'.repeat(1); // 'abc' 'abc&#39..

Array.from() Array.from() 메소드는 배열로 변환할 유사 배열 혹은 반복 가능한 객체를 이용하여, 복사된 배열을 리턴 해준다. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] Array.from(Array, MapFn(thisArg)); // Array : 배열로 변환할 유사배열 또는 반복가능한 객체 // MapFn : 모든 배열요소에서 호출할 Map 함수 // thisArg : Map함수 내에 item으로 사용될 값 예제 코드 String에..

Provider 컴포넌트로 리액트 앱에 store 연동 provider 는 react-redux 라이브러리에 내장된 리액트 애플리케이션에 손쉽게 스토어를 연동할 수 있도록 도와주는 컴포넌트 이다.이 컴포넌트를 불러온 후 연동할 프로젝트의 최상위 컴포넌트 (이 프로젝트에서는 App 컴포넌트)를 감싸고, provider 컴포넌트의 props 로 sotre 를 넣어주면 된다.// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './containers/App'; import './index.css'; // 리덕스 관련 불러오기 import { createStore } from 'redux'; imp..

스토어 생성리듀서를 완성했다면 이제 스토어를 생성할 차례이다. 스토어는 리덕스에서 가장 핵심적인 인스턴스이다.이 안에 현재 상태가 내장되어 있고, 상태를 업데이트할 때마다 구독중인 함수들을 호출한다. 이전에 만든 리듀서를 활용항여 스토어를 생성해 보자. 리액트에서 스토어를 생성할 때는 보통프로젝트의 엔트리 포인트인 src/index.js 파일에서 만든다. 리덕스에서 createStore 를 불러와 해당 함수에 우리가 만든 리듀서를 파라미터로 넣어 스토어를 생성해보자.// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './containers/App'; import './index.css'; ..

리듀서 생성앞서 설명했던 대로 리듀서는 액션의 type에 따라 변화를 일으키는 함수이다.이 리듀서를 작성 할 때는 최초 변화를 일으키기 전 가지고 있어야 할 초기상태를 정의해야 한다. reducers 디렉터리에 index.js 파일을 만들고, 액션 타입들을 불러온 후 초기 상태를 선언해보자.// src/reducers/index.js import * as types from '../actions/ActionTypes'; const initialState = { color: 'black', number: 0 }이 리듀서의 초기 상태로는 color 값과 number 값이 있다. 이제 리듀서 함수를 만들어 보겠다.리듀서 함수는 state 와 action 을 파라미터로 가지는 함수이며, 그 함수 내부에서 swi..

액션 생성드디어 리덕스 관련 작업을 할 차례이다. 이제 액션을 정의해보겠다.복습을 해보자면 액션은 객체라 한적이 있다. 그리고 모든 액션 객체에는 type 값이 필수로 있어야 한다고 했엇다.{ type: "INCREMENT" } { type: "DECREMENT" }액션과 함께 전달해야 할 값이 있을 때는 다음과 같이 새로운 키를 추가해서 만들어 주면된다.{ type: "SET_COLOR", color: "black" }type은 액션 이름과도 같다. 나중에 리듀서가 액션을 전달받으면 이 값에 따라서 해야할 작업을 결정한다.그런데 이 값을 사용 할때마다 직접 문자열을 입력해서 사용한다면 관리하기가 조금 힘들 수도 있기 때문에,이들 값은 따로 파일로 만들어서 저장하면 관리하기가 편하다. 1. ActionT..

01. Counter 컴포넌트 생성첫 프리젠테이셔널 컴포넌트인 카운터 컴포넌트를 만들어보자. 이 컴포넌트는 숫자와 색상 값,더하기, 빼기, 색상 변경 함수를 props로 받는다. // src/components/Counter.js import React from 'react'; import PropType from 'prop-types'; import './Counter.css'; const Counter = ({ number, color, onIncrement, onDecrement, onSetColor }) => { return ( { e.preventDefault(); onDecrement(); }} onDoubleClick={onSetColor} style={{ backgroundColor: co..

01. 기본적인틀 생성이전 [ React + redux 01 ] 에서 대부분의 파일을 제거했으니, 다시 만들어줘 보자.우선 containers 디렉터리에 비어있는 App 컴포넌트를 만들자. // src/containers/App.js import React, { Component } from 'react'; class App extends Component { render() { return ( Counter ); } } export default App; 그 다음에는 이를 src/index.js 파일에 반영한다. // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './containers/..

01. 리덕스로 리액트 애플리케이션 상태관리리액트 애플리케이션에서 상태관리를 할 때 소규모 프로젝트에서는 컴포넌트가 가진 state 기능을 사용하는 것으로 충분할지 모르지만,규모가 커지면 관리하기가 번거로울 수 있다.상태관리 라이브러리를 따로 사용하지 않고 state만 사용한다면 다음 문제점이 발생할 수 있다. 상태 객체가 너무 복잡하고 크다.최상위 컴포넌트에서 상태관리를 하는 메서드를 너무 많이 만들어 코드가 복잡해진다.하위 컴포넌트에 props를 전달하려면 여러 컴포넌트를 거쳐야 한다. 이전 공부에서는 리덕스의 기초를 알아 봤다,리덕스에서 함수를 스토어에 구독시킬 때 store.subscribe 함수를 사용했고, store.getState 함수를 사용하여 상태를 가져왔다. 리액트에서 리덕스를 연동할 ..

01. 리덕스의 세가지 규칙이 세 가지는 리덕스 공식 메뉴얼에서 알려 주는 규칙이다.그리 복잡하지는 않지만 이 사항을 숙지한 상태에서 리덕스 관련 코드를 작성해야 상태를 원활하게 관리할 수 있다. 01 - 스토어는 단 한개 스토어는 언제나 단 한개이다. 스토어를 여러개 생성해서 상태를 관리하면 안된다.그 대신 리듀서를 여러개 만들어서 관리할 수있다. 나중에 더 자세히 알아보자. 02 - state는 읽기 전용 리덕스의 상태, state 값은 읽기 전용입니다. 이 값은 절대로 직접 수정하면 안된다. 그렇게 하면 리덕스의 구독 함수를 제대로 실행하지 않거나컴포넌트의 리렌더링이 되지 않을 수 있다. 상태를 업데이트할 때에는 언제나 새 상태 객체를 만들어서 넣어 주어야 한다. 업데이트를 할 때 마다 새 객체를 ..

01. 리덕스 스토어 생성액션과 리듀서가 준비되면 리덕스 스토어를 만들수 있다. 맨 아래쪽에 다음 코드를 입력해보자. // (...) const { createStore } = Redux; // 나중에 우리가 실제로 프로젝트에서 불러올 때는 // import { createStore } from 'redux'; // 이렇게 불러온다. const store = createStore(counter); 스토어를 생성할 때는 createStore 함수를 사용한다. 파라미터는 리듀서 함수가 들어가고,두 번째 파라미터를 설정하면 해당 값을 스토어의 기본 값으로 사용한다. 이 파라미터를 생략하면 리듀서 초깃값을 스토어 기본 값으로 사용하게 된다. 02. 구독리액트 컴포넌트에서 리덕스 스토어를 구독(subscribe)..

01. 변화를 일으키는 함수, 리듀서이번에는 상태에 변화를 일으키는 함수인 리듀서를 알아보자,리듀서는 파라미터를 두개 받는다. 첫번재 파라미터는 현재 상태고, 두번째 파라미터는 액션 객체이다. 함수 내부에서는 switch문을 사용하여 action.type에 따라 새로운 상태를 만들어서 반환해야 한다. 리듀서가 초기에 사용할 초기 상태 initialState값부터 먼저 설정해야 리듀서를 만들 수 있다.우리가 작성할 예제 코드에는 숫자 값이 필요하니 새 객체를 만들어서 그 안에 number라는 키를 0으로 설정해보자. 액션 생성함수 아래쪽에 아래와 같이 initialState를 정의해보자. //기존 코드 이어서 //(...) const initialState = { number : 0 } 이제 리듀서 함수를..