ASH_Blog 전체보기
-
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(..
-
개발자와 기획자가 꼭 알면 좋은 css - 3 display : inlinehtml, css/css-display속성들 정리 2018. 7. 23. 02:22
display: inline이 조금 내용이 많을 수 있는대요, 일단 대는대로 포스팅을 하겠습니다. (저도 어디까지 포스팅을 할지를 몰라서요;;;) 다음과 같이 background 색만 적용 시킨 2개의 sapan 태그가 있습니다. 초록 상자를 보시면 width와 height 가 240.7 , 21.6 이라고 나왔는대요, span 태그에 width: 220px; height: 200px; margin-top: 10px 을 적용 시켜 보겠습니다. 그러면 길이가 다른 2개의 span 태그의 width는 220px이고 height 는200px에 위에 간격이 10px 벌어진 span 태그의 모습이 예상이 될 겁니다. 띠로리~~~ 하지만 예상한것과는 달리 녹색 박스와 빨간 박스를 보시면 알겠지만 분명 css는 들어..
-
섹션 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. ..
-
개발자와 기획자가 꼭 알면 좋은 css - 2. display : inline-blockhtml, css/css-display속성들 정리 2018. 7. 14. 18:12
2. display : inline-block;특징 lnline-block의 특징에 대해서 알아보겠습니다. 저번 장에서 input 태그가 display : inline-block 인 것을 알았는대요, 그래서 다음과 같은 스타일을 적용한 input 태그 2개를 코딩한 화면 과 소스를 보겠습니다. 위에 이미지를 보시면 display : inline-block 의 특징을 알 수 있는대요, 제일 먼저 확인 할 수 있는 특징은 display : block 이랑 다르게 display : inline-block 은 태그 끼리 옆으로 붙는 것을 볼 수 있습니다. (저번장에서 display: block은 태그 순서대로 위, 아래로 쌓는 모습으로 화면에 나타 나는 것을 확인 하엿습니다.) 그리고 그다음 특징은 displa..