리듀서는

- 이전 상태와 동작을 받아 새 상태를 리턴하는 함수

- 순수함수로서 인자가 들어올때 항상 같은 값을 갖는다. 또한 언제나 return 값으로만 소통하고, 데이터베이스 호출 또는 HTTP 호출 등 을 거부하는 함수이다.

-할일을 정의하는 Action, 데이터를 저장하는 State, 그 두개를 받아 새 상태를 return하는 reducer를 부른다.

리덕스는

- 자바스크립트 어플리케이션에선 상태 컨테이너를 일컷는다. 

 순수 리액트에서 어플리케이션을 만들땐, 일반적으로 루트 컴포넌트 하나(App.js)에서 상태를 관리한다. 그러한 대부분의 프로젝트에서는 부모 컴포넌트가 중간자 역할을 한다. 자식컴포넌트는 부모컴포넌트와만 소통을 하고, 내부 컴포넌트끼리는 직접 소통하지 않고 않아야 한다. 

따라서 위의 구조대로라면, 부모 컴포넌트에서 모든걸 관리하고 아래로 내려주는 것이다. 이의 장점은 직관적이고 관리의 편리함에 있다. 다만 앱의 규모가 거대해질 수록 위의 문제는 복잡해진다. 

위의 사진대로 G컴포넌트에 값을 전달하기 위해 Root부터 시작하여 A, E G를 거쳐야 한다.

이런 무시무시한 모습을 방지하기 위해 사용하는 것이 리덕스이다. 

리덕스는 상태관리를 컴포넌트 바깥에서 하여 개별의 컴포넌트가 직접 소통하여 데이터를 받아올 수 있다. 

이렇게 리덕스 상태관리 모음은 리덕스 스토어라고 부르는데, 상태에 변화가 생기면 소통 중인

컴포넌트에게 알려 리렌더링을 하게 한다. 

프로그래머스 문제를 풀다가 사용해야 할 일이 있어 검색 후 좀 더 자세히 파보기로 했다. 

그간 for 과 if를 사용해서 40문제를 풀었는데

이제는 내장함수 내장 메소드를 적극 활용해보려고 한다.

예제로 확인해보는 것이 더 좋을 것 같다

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

React란 무엇인가,

React는 웹 프레임워크이고, 자바스크립트 라이브러리의 하나이다. 대체제로는 Vue.js, Angular.js가 있다. 

Angular.js 는 위 3개의 라이브러리 중 가장 강력하나, 소규모 프로젝트에는 다소 무거운 감이 있다고 한다.

Vue.js 는 Angular.js 보다는 가볍고 기능이 적고, React 보다는 무겁고, 기능이 많다. 

React 는 가장 가볍고, 기능이 적으나, 현재로선 가장 인기가 많고, 커뮤니티의 의존도가 높은 언어이다. 

React의 특징은 다음과 같다. 

1. Data Flow

2. Component Based Structure

3. Virtual Dom

4. Props and State

5. JSX

1. Data Flow

React는 단방향 데이터 흐름을 가진다. 

2. Component Based Structure

Component는 독립적인 단위로서 소프트웨어 모듈을 말한다. UI (View)를 여러 컴포넌트로 쪼개서 만든다. 단위가쪼개져 있으니, 전체 코드를 파악하기가 쉽다. 재사용성이 높다.  

3. Virtual Dom

Virtual Dom 을 사용하여 실제 Tree Dom에 비해, 전후 상태를 비교 한 후, 최소한의 변경사항만 실제 DOM에 반영하여 앱 효율성과 속도 면에서 유리하다. 

4. Props and State

Props는 부모컴포넌트에서 자식컴포넌트로 전달해주는 것.

State는 컴포넌트 내부에서 값을 변경할 수 있도록 함

5. JSX

JSX는 JavaScript를 확장하여 HTML 을 작성한다.

Facts

한 주간 배운 것중 가장 쓸모 있는 문법은 삼항연산자와, Reduce, Map, Set 이었다.

다만, Map과 Set은 그 사용에 있어 차이점을 제대로 알지 못해 어느 순간에 무엇을 선택해야 할지

어려워 아직 적용을 잘 하지 못하고 있다.

Feeling

역시 문법은 문제를 풀면서 활용을 해야 머리가 잘 안다.

arr.push(...items)

배열의 가장 뒤 끝에 아이템을 추가한다.

arr.pop()

배열의 가장 뒤 끝에 아이템을 제거한다.

arr.shift()

배열의 가장 앞에서 아이템을 제거한다.

arr.unshift(...items)

배열의 가장 앞에 아이템을 추가한다.

arr.splice(start[, deleteCount, elem1, ..., elemN])

splice는 추가 제거 교체가 모두 가능하다.

arr.slice([start], [end])

arr.concat(arg1, arg2...)

arr.forEach(function(item, index, array) { // ... do something with item });

Array.prototype.reduce()

    arr.reduce(callback[, initialValue])

Array.prototype.map()

    arr.map(callback(currentValue[, index[, array]])[, thisArg])

Array.prototype.reduce()

    arr.reduce(callback[, initialValue])

callback

배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

accumulator

누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

currentValue

처리할 현재 요소.

currentIndex Optional

처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

array Optional

reduce()를 호출한 배열.

initialValue Optional

callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

Array.prototype.map()

    arr.map(callback(currentValue[, index[, array]])[, thisArg])

브라우저 객체 모델 : BOM 

문서 객체 모델 : DOM

목적 

문서의 구조화 된 표현을 제공하기 위함

프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법 제공

프로그래밍 언어가 문서 구조, 스타일 내용 등을 변경할 수 있도록 도움

단, DOM은 프로그래밍 언어와 독립적으로 디자인

접근법 

별 달리 사용하기 위해 해야 할 것은 없음 

광의로서의 DOM은 웹브라우저가 HTML 페이지를 인식하는 방식

협의로서의 DOM은 Document 객체와 관련된 객체의 집합을 의미

당장 이번주 금요일부터 수강해야할 React.

자바스크립트 심화강의를 들은 이후, 문법만 듣다가 갑작스레 CS가 가미 된 Deep 한 수업을 듣다보니 정신을 차릴 수가 없었다.  

원래 자바스크립트 기초가 부족하다 판단되어 타 사이트의 강의와 함께 병행할까 했었는데, 

추천 받은 코스가 적지 않다. 

익일부터 진행하도록 하겠다. 

긴 시간동안 기초프로젝트를 진행했으며, 잘 마무리를 짓게 되었다. 

이번 프로젝트를 마무리 짓고 나서 회고를 하니, 아쉬움이 남은 부분이 있고, 개선했으면 더 좋았을 점들이 떠오른다. 

우선 모든 기능을 책임지고 제 시간안에 구현해내지 못한 것이 가장 아쉽다고 할 수 있다. 그리고 나머지 아쉬움은 그로인해 파생된 것이라고 생각할 수 있다. 초보코더에게 일주일이라는 시간동안 기초프로젝트를 진행하는 것이 결코 여유로운 시간이 아니었다. 따라서, 프로젝트 사전 기간동안 팀원들 각각의 역량을 파악하는 것이 먼저였다. 그 후 알맞은 직무 배치를 통해 누구도 프로젝트에서 소외되는 느낌을 받지 않게 해야 할텐데. 그 부분이 모자랐었다.  조금 더 나은 팀워크로 프로젝트를 진행하기 위해 그래서는 안되었던 것 같다. 

그래도 협조적이고 결코 분열되지 않은 우리 팀들과 진행했던 프로젝트에 감사한다. 배울 것이 없었던 프로젝트였다면 더욱 문제였을 텐데, 이들 덕분에 코딩의 쾌감이라는 것도 느끼게 된 마당에, 값진 교훈도 배울 수 있었다.