[JavaScript30] 6,7,8 강 정리

6강 . Type Ahead

Fetch 란?

Fetch API를 이용하면 Request 나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능.

fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있음.(XMLHttpRequest 기능과 유사)

fetch()는 Promise 객체 반환. HTTP error상태를 reject하지 않고 쿠키를 보내거나 받지 않음.

HTTP Response 객체로부터 실제값을 가져오기 위해서는 blob()메서드를 사용해야 함.

Promise 란?

자바스크립트 비동기 처리에 사용되는 객체 

(비동기처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것)

데이터를 다 받아오기전에 화면에 데이터를 표시하려고 할때 발생하는 오류 및 빈화면 반환 문제점 해결을 위해 사용.

자바스크립트 Promise 쉽게 이해하기 - 캡틴판교

정규표현식(Regular Expression)이란?

문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용.

const regex = new RegExp(wordToMatch, 'gi');

 플래그 

Flag	Meaning	Description
i	Ignore Case	대소문자를 구별하지 않고 검색
g	Global	문자열 내의 모든 패턴을 검색
m	MultiLine	문자열의 행이 바뀌더라도 검색

정규표현식 - Poiemaweb

배열 메소드 .join()

배열의 원소들을 연결하여 하나의 값으로 만듬.

).join('');

기본적으로 콤마(,)로 구분하며 괄호안에 구분할 다른 문자 넣으면 됨.

7강 . Array Cardio Day2

Array.prototype.some() : 조건에 부합하는게 하나라도 있으면 true

Array.prototype.every() : 배열값이 조건에 모두 부합해야 true

Array.prototype.Index() : 찾고있는 값만 반환

( filter 는 판별함수로 배열 반환 . 찾는다는 기능은 같음 ) 

Array.prototype.findIndex() : 배열 색인값 가져옴.

Array.slice() : 배열에 영향을 끼치지 않음

Array.splice() : 배열에 영향을 끼침

//배열로 반환하기 위해서 spead사용

const newComments = [

...comments.slice(0,index), //(start, end) start <= x < end

...comments.slice(index + 1)

]

8강 . Fun with HTML5 Canvas

도형합성 예제 https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Compositing/Example

HTML 색상표 단위 : RGB, HSL, HSV Hex가 있음 참고(https://wepplication.github.io/tools/colorPicker/)

HSL 색공간 H : Hue 색 / S : Saturation 채도 / L : Lightness 명도

HSV 색공간 H : Hue 색 / S : Saturation 채도 / V : Value 명도

 

차이점 : 명도를 어떻게 표현하느냐  ( 참고 : http://blog.naver.com/PostView.nhn?blogId=controlz&logNo=40122207441 )

마우스이벤트

mousedown/mouseup : 마우스 버튼 클릭/안클릭

mouseover/mouseout : 마우스 포인터가 엘리먼트 위에 왔다/갔다

mouse/move : 마우스 왔다갔다

click : mousedown -> mouseup

contextmenu : 마우스 오른쪽 버튼 사용한 경우  mousedown 후 트리거 (?)

dbclick : 두번클릭

참고 : https://javascript.info/mouse-events-basics#simple-events