javascript
-
react - 1. SPA, React란? SPA, React 에 대해서javascript/React 2018. 10. 23. 00:21
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. AJAX 가 생기면서 단일페이지 앱(Single-page Application) SPA 가 생겼다.자바스크립트를 사용해 DOM 변경을 효율적으로 처리하는 일은 아주 복잡하고 시간이 오래 걸리는 일이다.이에 대한 해법이 리액트다. React.js는 한가지 문제를 해결하기 위해서 만들어졌다,시시각각으로 변화하는 데이터를 사용하는 큰 규모의 애플리케이션을 만들기 위해서 이다. 리액트는 브라우저 DOM을 갱신 하기 위해 만든 라이브러리다.우리는 DOM API를 직접 조작 하지 않고 리액트 엘리먼트로 이루어진 가상돔을 다루거나 리액트가 UI를 생성하고 브라우저와 상호 작용하기 위해 사용하는 몇가지 명령을 다룬다. 리액트 엘리먼트는 개념..
-
client와 scroll 로 시작하는 프로퍼티 정리javascript 2018. 10. 19. 22:37
모든 html 요소에는 다음의 프로퍼티 들을 가지고 있다고 하는데.그래서 다음의 프로퍼티들을 정리 함 왼쪽 value 에는 mdn의 링크를, 오른쪽 Description 에는 w3schools의 링크를 연결 하였으며 자세한 정보는 링크 연결하여 확인 할 수 있습니다. Value Description offsetWidth 요소의 레이아웃 폭을 정수로 반환. 요소의 border, padding, 세로 스크롤바 를 포함한다. offsetHeight 패딩, 테두리 및 스크롤 막대를 포함한 요소의 높이를 반환합니다. offsetLeft offsetParent 요소를 기준으로 왼쪽 위치(픽셀 단위)를 반환합니다. offsetTop offsetParent 요소의 상단을 기준으로 맨 위 위치(픽셀 단위)를 반환 off..
-
es6 - 2. 화살표 함수 =>javascript/es6 2018. 8. 24. 23:40
"learning react" 책의 내용을 보고 정리 한 것입니다. es6 에서는 function 을 쓰지 않고 함수를 만들 수 있고, return 을 사용하지 않아도 식을 계산한 값이 자동으로 반환 된다. 화살표 함수를 처음 보면 어떻게 봐야되고 어떻게 써야 되는지 금방 파악이 되지 않았는데, 다음의 예제를 보니 금방 이해가 되었다. 평상시 쓰는 함수 var 명언 = function(firstname) { return `하루라도 책을 읽지 않으면 입안에 가시가 돋는다. ${firstname}` } console.log( 명언("안중근") )화살표 함수 var 명언 = firstname => `밥을먹어야 응아를 한다 - ${firstname}` console.log( 명언("an") )위에 소스만 봤을때..
-
es6 - 1. let, const의 개념javascript/es6 2018. 8. 18. 21:50
1. const는 값을 변경 할 수 없는 변수. (자바스크립트도 es6에서 상수를 도입) var 를 사용한 코드처음 var 를 사용하여 pizza 라는 변수를 만들고 true를 담았고,그리고 다음 라인에서 다시 pizza 의 값을 false로 변경 하고콘솔 로그로 pizza를 확인 하면 마지막에 변경 한 false 로 변경된 것을 확인 할 수 있다. const 를 사용한 코드 처음 const를 사용하여 pizza라는 변수를 만들고 true를 담고,그리고 다음 라인에서 pizaa 의 값을 false로 바꾸려고 하면 하단의 하얀 박스 처럼 콘솔 오류가 발생하는 것을 확인 할 수 있다.위에 코드처럼 const는 값을 변경 할 수 없다. 그런데 이런경우에는 값이 변경이 될 수 있다. 상수를 사용하여 변수에 할당..
-
섹션 4. 자바스크립트에서의 지연 평가javascript/인동님 인프런강의 정리 2018. 8. 1. 02:53
섹션 4. 자바스크립트에서의 지연평가 - 지연평가 부분 내용 정리 (https://www.inflearn.com/course-status-2/ ) 다음의 value들이 있고 , 실행 해야하는 함수 들이 있고, 최종 결과를 얻는 함수 가 있다. value : val1 , val2 , val3 , val4 , val5 , val6 실행해야하는 함수 : map , filter , map , reject 최종 결과 함수 : take(2) 원래의 엄격하게 평가 되는 방식처음 map 에서 val1 에서 부터 val6 까지 다 평가 한다. 그 다음 filter 에서 또 val6 까지 다 평가 하면서 걸러낼 것 들만 걸러 낸다.그 다음 map 에서 filter 에서 걸러낸 val 들을 다 평가 한다.그 다음 rejec..
-
섹션 3. 컬렉션 중심 프로그래밍 (거르기– reject, compact)javascript/인동님 인프런강의 정리 2018. 7. 23. 04:09
섹션 3. 컬렉션 중심 프로그래밍 - 거르기– reject, compact 부분 내용 정리 (https://www.inflearn.com/course-status-2/ ) reject 함수기능 : filter 함수의 반대기능 (true 로 평가되는 것을 제외)function _reject(data, predi){ return _filter(data, function(val){ return !predi(val) }) } filter 함수의 리턴 값을 뒤집은 값 을 리턴 한다. function _negate(func){ return function(val){ return !func(val); } } function _reject(data, predi){ return _filter(data, function(..
-
섹션 3. 컬렉션 중심 프로그래밍 (수집하기 – map, values, pluck)javascript/인동님 인프런강의 정리 2018. 7. 21. 16:41
섹션 3. 컬렉션 중심 프로그래밍 - 수집하기(map, values, pluck) 부분 내용 정리 (https://www.inflearn.com/course-status-2/ ) 컬렉션 중심 프로그래밍은 컬렉션을 잘 다루는 함수 세트들을 구성하는 식으로 프로그래밍 해 나가는 것 컬렉션이란?배열이나 돌림직한 데이터들을 다루는 것 컬렉션 중심 프로그래밍의 함수들은 4가지 유형으로 구분 할 수 있는데 다음과 같다.1. 수집하기 - map, values, pluck 등2. 거르기 - filter, reject, compact, without 등3. 찾아내기 - find, some, every 등 4. 접기(축약) - reduce, min, max, group_by, count_by map , filter , f..
-
섹션 2. 함수형으로 전환하기 (_filter 함수, _map 함수)javascript/인동님 인프런강의 정리 2018. 7. 18. 04:29
섹션 2. 함수형으로 전환하기 - filter 함수 부분 내용 정리 (https://www.inflearn.com/course-status-2/ ) _filter 함수로 함수 줄이기 다음의 명령형 코드가 있습니다. var users = [ { id: 1, name: 'ID', age: 36 }, { id: 2, name: 'BJ', age: 32 }, { id: 3, name: 'JM', age: 32 }, { id: 4, name: 'PJ', age: 27 }, { id: 5, name: 'HA', age: 25 }, { id: 6, name: 'JE', age: 26 }, { id: 7, name: 'JI', age: 31 }, { id: 8, name: 'MP', age: 23 } ]; // 1. ..