하이어오더 컴포넌트를 겹쳐서 계속하여 컴포넌트의 기능을 확장한다. recompose라이브러리의 compose()함수 사용
분류 전체보기
recompose라이브러리 이 라이브러리는 하이어오더 컴포넌트 중 자주 사용하는 패턴을 모은 하이어오더 컴포넌트 라이브러리이다. recompose는 반복해서 입력해야하는 불필요한 코드의 양을 줄여야 하는 경우에만 적절히 최소한으로 사용하도록 한다. 라이브러리를 설치하기 위해 명령 프롬프트에 다음의 명령어를 입력한다. $ yarn add recompose 라이브러리를 import할 때는 필요한 함수만 추출하여 임포트한다. ex) import branch from 'recompose/branch'; recompose라이브러리의 함수 종류 branch()함수 조건식에 따라 다른 하이어오더 컴포넌트를 출력해야 하는 경우 사용한다. branch( condition: props => boolean, left: Hi..
하이어오더 컴포넌트를 보기 전에 하이어오더에 쓰이는 데코레이터 패턴에 대해 먼저 알아보자 데코레이터 패턴을 이해하기 위해선 상속패턴을 알아야 한다. 상속 패턴 : 공통 기능은 부모로부터 물려받고, 추가 기능만 구현하여 중복 코드의 양을 줄일 수 있는 패턴 상속패턴은 여러 부모의 속성을 동시에 가질 경우 상속 구조가 변경되어 원치 않는 상속을 받게 되는 등의 문제가 발생한다. 이를 해결해 기존의 구조를 해치지 않으면서 원하는 기능만 상속받기 위해 제안된 디자인 패턴이 '데코레이터 패턴'이다. 데코레이터 패턴이란? 클래스 간의 종속성 없이 기능만을 공유하는 디자인 패턴이다. 하이어오더 컴포넌트란? 기존 컴포넌트에 기능을 덧붙여 새 컴포넌트로 반환하는 함수를 말하는 것으로, 커링함수를 고차함수라고 하는 자바스..
커링이란? 반환값이 함수인 디자인 패턴으로 중복된 코드를 반복적으로 입력하지 않고 원하는 기능을 조합하여 알맞게 사용할 수 있다. 사용 예시) const equation = (a, b, c) => x => ((x * a) * b) + c; const formula = equation(2, 3, 4); const x = 2; const result = formula(x); equation함수는 a,b,c 값을 인자로 받아 ((x * a) * b) + c 라는 함수를 반환한다. 이와 같이 인자를 나중에 받아 실행할 함수를 생성해주는 equation() 함수와 같은 함수를 커링함수라고 한다. 함수조합기법 함수의 적용 순서와 작성 순서의 흐름이 달라서 코드의 가독성이 떨어지고 작성 시에 실수를 할 수 있다. c..
비트코인으로부터 최초의 블록체인 개념 탄생 분산환경에서 모르는 사람끼리 거래 가능! 블록체인 거래방식 거래기록을 10분마다 담아놓은 블록을 하나하나 연결해서 거래장부에 담아놓음 비트코인을 시작하면 암호화된 거래장부를 공유 -> 공공거래장부 (거래자 모두 거래장부 공유) 따라서 거래내역 위조가 어렵다 모든 거래내용을 비교하고 과반수 이상 동의한 데이터를 모아서 블록화를 시킨다. 요청에 바로 응답하는 것이 아니라 트랜잭션을 묶어 블록을 만들고 다른 블록체인 노드에 연결되면 그때 처리가 된다. => 실제 화폐처럼 사용할 수 없는 이유 중 하나 10분단위로 일어나는 내용대조에서 과반수 이상의 동의를 얻지 못할 경우 폐기가 된다 위조하기 위해서는 블록체인 사용자 컴퓨터보다 높은 연산력이 필요하다. 비트코인 프로세..
JSX (JavaScript XML) 자바스크립트에 XML을 추가한 확장형 문법이다. 하나의 파일에 자바스크립트와 HTML 동시에 작성이 가능하다. 리액트 엔진은 JSX의 XML구조를 분석하여 자바스크립트 함수코드로 변환한다. *리액트 앱 구동시켜 웹 브라우저에서 확인 가능 (오류도 웹에서 바로 확인 가능) 컴포넌트 기존의 웹 프레임 워크는 MVC방식으로 정보 (Model), 화면(View) , 구동(Controller) 코드를 분리하여 관리하였으나 MVC 각 요소의 의존성이 높은 탓에 재활용이 어려웠다. 컴포넌트가 등장하여 MVC의 뷰를 독립적으로 구성하고 재활용할 수 있게 되었다. 이는 각 요소가 비슷하고 반복적으로 사용하는 경우가 많은 웹사이트에 더 적합한 방식이다. 컴포넌트는 프로퍼티 / stat..
리액트 프런트엔드 프레임워크 중 하나로 화면 출력에 특화된 프레임워크 컴포넌트로 화면 구성을 효율적으로 할 수 있음 작고 독립적인 코드블록인 컴포넌트를 조합하여 원하는 화면 구성 게임 엔진 원리를 도입하여 화면 출력 속도가 빠름 다음 장면에 필요한 화면을 미리 그려두어 변경된 화면의 일부만 수정 리액트 개발환경 설치 노드 버전 매니저로 노드제이에스 설치 yarn과 create-react-app 설치 비주얼 스튜디오 코드와 플러그인 설치 리액트 ES6 문법 템플릿 문자열(template string) : 문자열 안에 변수와 연산식을 혼합하여 사용 - 백틱으로 문자열 표현 - $를 사용하여 변수 또는 식 포함 - Enter를 사용하여 줄을 바꾸는 것도 허용 var string 1 = '안녕하세요'; var ..
Kibana란? ElasticSearch를 시각화하는 도구 Kibana 설치방법 (리눅스에서 docker사용하여 v.7.9.1 설치) 1. kibana 이미지 다운 $ docker pull docker.elastic.co/kibana/kibana:7.9.1 2. kibana 컨테이너 실행 $ docker run -d --link elasticsearch7:elasticsearch -p 5601:5601 --name kibana7 docker.elastic.co/kibana/kibana:7.9.1 Kibana 접속방법 1. kibana 컨테이너 실행 $ docker start kibana7(name) 2. 웹 브라우저에 localhost:5601 입력하여 포트 접속
어그리게이션(Aggregation) : 갖고 있는 document 중에서 어떤 값을 조합해서 값을 내는 방법 매트릭 어그리게이션 (Metric Aggregation) : 산수를 사용하여 값을 내는 aggregation 1. aggregation 파일을 확인한다 { "size" : 0, //보고싶은 값만 보기 위해 size는 0으로 "aggs" : { "avg_score" : { //aggregatino 이름 "avg" : { //사용할 aggregation "field" : "points" //사용할 field값 } } } } field중에서 points값을 사용하여 평균을 낸 것을 도출시키는 avg_points_aggs.json 파일 avg자리에 count / min / max / avg / sum 모..
1. 인덱스 생성 $ curl -XPUT 'http://localhost:9200/classes' 인덱스를 최초 생성하면 mapping이 비어있다. 2. 매핑 생성 $ curl -XPUT 'http://localhost:9200/classes/class/_mapping' -d @classesRating_mapping.json 3. 생성된 매핑 확인 $ curl -XGET http://localhost:9200/classes/?pretty 4. 인덱스에 실제 데이터 삽입 $ curl -XPOST http://localhost:9200/bulk?pretty --data-binary@classes.json bulk사용하여 여러개의 document추가
GET (인덱스 확인) $ curl -XGET [elasticsearch주소] [Index이름] (?pretty) PUT (인덱스 생성) $ curl -XPUT [elasticsearch주소] [Index이름] POST (document 생성) $ curl -XPOST [elasticsearch주소] [Index이름] [type명] [id] [Content-type] -d ' 파일을 직접 올릴 경우 @파일명 추가 예) curl -XPOST http://localhost:9200/classes/class/1/ -H'Content-Type: application/json' -d ' DELETE (인덱스 삭제) $ curl -XDELETE [elasticsearch주소] [Index이름] 데이터 업데이트 $ ..
