Ryu.log

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 } 이제 리듀서 함수를..

01. 액션과 액션 생성함수액션은 스토어에서 상태 변화를 일으킬 때 참조하는 객체이다. 이 객체는 type 값을 반드시 가지고 있어야 한다. 액션 타입은 해당 액션이 어떤 작업을 하는 액션인지 정의하며, 대문자와 밑줄을 조합하여 만든다. { type: "INCREMENT" } 이 액션은 상태에 있는 값의 수치를 올린다. 이 값을 어떻게 업데이트 할지는 나중에 리듀서라는 함수에서 정의한다.지금은 우선 액션을 이해하는데 집중해보자. 액션 객체 안에서 type 값은 필수고, 나머지는 선택이다. 즉, 있어도 되고 없어도 되며 형식도 자유다.예를 들자면 아래와 같이 작성 가능하다. { type: "INCREMENT_NUMBER" text: "리덕스 깨부시기" } 또한 아래와 같이 객체 형태로 넣을 수도 있다. {..

01. Redux의 소개Redux에 대해서 알아보자. Redux는 React에서 상태를 더 효율적으로 관리하는데 사용되는 상태 관리 라이브러리이다.이전에 진행했던 React프로젝트에서 상태관리 로직은 상태관리를 쉽게 하기위하여 App 컴포넌트에서 모든 로직을 처리했다. App 컴포넌트에서 모든 상태로직을 관리했기 때문에 App 컴포넌트의 state를 업데이트하면,App 컴포넌트가 리렌더링 되고, React의 특성상 하위 컴포넌트도 모두 리렌더링 된다. 그렇기 때문에 컴포넌트 최적화 과정에서 shouldComponentUpdate()를 통하여 방지해 주었는데,기존 프로젝트의 경우에는 사용한 컴포넌트의 개수가 많지 않기 대문에 App 컴포넌트에서 상태관리를 하고, 최적화 하는것이 그리 어렵지 않았다. 하지만..

01. console 객체console객체에 대해서 알아보자.Front-End에서 에러 확인시 console객체를 아주아주 자주 사용하는데 이는,Node에서도 마찬가지이다 일단 Node에서 console객체에 무엇이 있는지 알아보자.먼저 nodeStudy루트에 console.js파일을 만들어서 코드를 입력할 준비를 한다. 그 뒤에 터미널에서 아래와같이 입력해보자 // C:\Junho\nodeStudy/>node>console 위와같이 터미널에서 Node의 console객체를 입력하였을 때 아래와같은 메서드들이 나온다. console객체 안에는 디버깅을 도와주는 많은 메서드들이 들어있다.console.log, console.error정도는 알거라 생각하지만 이 외에도 유용한 메서드들 몇개를 알아보자. 먼저..

1. global 객체지금부터는 Node내장객체에 대해 알아보자.브라우저에서 window라는 전역 객체를 많이 사용했을것이다.그렇다면 Node에서 window를 찍어보면 어떻게 될까? 한번찍어보자. window is not defined.. 찾을수 없다고나온다... window를 사용할 수가 없다.그렇다면 Node에서는 전역 객체가 없는 것일까?... 아니다. Node에는 global이라는 새로운 전역 객체가 존재한다.같은 방식으로 global을 찍어보면 global을 console.log()로 찍었을 때 위같은 정보들이 쏟아져나온다. ( 최신브라우저에서는 Node와 통일을위해 global객체를 반영했다. )어짜피 쓰다 보면... 외워질 것이니 일단 각각이 무엇인지는 패스하고.익숙한것 하나만 봐보자. 익..

01. 모듈 시스템이번에는 모듈을 만들어 보자, 먼저 이전에 만들어놓은 nodeStudy 라는 디렉토리에 (본인이 편한곳 아무데나 상관없음) var.js 라는 js파일을 생성한 후, 아래와 같이 코드를 입력해보자. // nodeStudy/var.js const odd = '홀수입니다.'; const even = '짝수입니다.'; 그 뒤에 func.js 파일을 만들어보자,만약 odd와 even이라는 변수를 var.js가 아닌 비어있는 func.js 파일에서 사용 하기위해서는 어떻게 해야할까? 기존 front-end 방식으로는 아래와 같이html 파일에 var.js 를 먼저 링크하고 그 뒤에 func.js 링크를 걸어서, func.js에서 var.js안쪽에 선언된 변수를 사용할 수 있었다. 기존에 위같은 방..