Week5(Javascript)

---

이번 주는 JS30 강의의 6강-15강까지 진행하였습니다.

확실히 이론을 실제에 적용해서 사용하는 것은 어려운 일인것 같습니다.

 

---

const cities = [];

fetch(endpoint)
    .then(blob => blob.json())
    .then(data => cities.push(...data))

endpoint는 특정 사이트입니다. 특정 사이트로부터 데이터들은 fetch하고 이 data들을 json화하여 cities 배열에 push하는 순서로 이루어져 있습니다. 

 

이 fetch를 이해하기 위해서는 Ajax 요청에 대한 이해가 필요했습니다.

 

AJAX(Asynchronous Javascript and XML)

->비동기적인 웹서비스를 개발하기 위한 기법. 이름에 XML이 있지만 꼭 XML을 사용하는 것은 아니다. 요즘에는 JSON을 많이 사용함. 쉽게 말해 page 이동 없이 서버에 요청을 보내고 응답을 받는 기술. Ajax 요청은 jQuery, axios, fetch와 같은 라이브러리를 이용해서 보낸다. (client와 server 간의 통신이다.)

 

그렇다면 axios와 fetch의 차이는?

 

1. axios

• 구형 브라우저를 지원한다.(IE11와 같은 구형 브라우저까지도 지원)
• 응답시간 초과를 설정하는 기능이 있다.

axios({
	method:'post',
    url:'login',
    timeout:4000,    //4 seconds timeout
    data:{
    	name:'dong-kyun',
        gender:'male',
        }
   }).then(response => ~~~~~)
   .catch(error => console.error(error)

• JSON 데이터로의 자동변환이 가능하다. (http 통신은 JSON type을 이해하지 못한다. 이 때문에 front->back으로 request를 보낼 때 이 request의 type은 string이어야 한다. 반대로, back->front로 response가 올 때 이 response type은 string이다. 이 데이터를 활용하기 위해서는 JSON type으로 변환해야 한다. 이전에 axios의 내부 코드를 봤었는데 그 코드 말미에 string화 JSON화 하는 코드가 있었다.)
• http 요청을 중간에 가로채서 examine or change 할 수 있다.
• return 값은 프로미스 객체이다.(이 말은 결국 then과 catch로 받아야 한다는 말.)

 

2. fetch

• Javascript의 내장 library이기 때문에 import 하지 않고 사용할 수 있다.
• library의 update의 따른 에러 방지가 가능하다. (React Native의 경우 update가 잦아서 library가 쫓아오지 못하는 경우가 많은데 fetch는 이를 방지한다.
• return값은 프로미스 객체이다.

<Basic Syntax>

 

cosnt options = {
	url:'http://localhost~~',
    method:'POST',
    headers:{
    	'Content-Type':'application/json'
    },
    data:{
    	a:10,
        b:20,
    }
}

axios(options).then(response=>~~~~~~~~~).catch(error=>~~~~~~~~~~~~~~~~~~)

const url = 'http://localhost~~';
const options = {
	method:'POST',
    headers:{
    	'Content-Type':'application/json'
    },
    body:JSON.stringify({
    	a:10,
        b:20
    })
}
 fetch(url,options.then().catch()

---

function findMatched(wordToMatch, cities){
    return cities.filter(place => {
        
        const regex = new RegExp(wordToMatch, 'gi');
        return place.city.match(regex) || place.state.match(regex)
});
}

function displayMatches(){
    const matchArray = findMatches(this.value, cities);
}

const searchInput = document.querySelector('.search');

searchInput.addEventListener('change', displayMatches);

이 코드의 순서는 

const searchInput = document.querySelector('.search');

searchInput.addEventListener('change', displayMatches);

function displayMatches(){
    const matchArray = findMatches(this.value, cities);
    //matchArray를 활용해서 그린다.
}

function findMatches(wordToMatch, cities){
    return cities.filter(place => {
        
        const regex = new RegExp(wordToMatch, 'gi');
        return place.city.match(regex) || place.state.match(regex)
});
}

 

이 순서이다. 

처음부터, search라는 id를 가지는 요소를 searchInput으로 가져온다.
searchInput에 이벤트 함수를 할당한다. 이 함수는 변화(change)가 있을 때마다 displayMatches 함수를 호출하면서 변화된 내용을 value라는 이름으로 전달한다.
displayMatches에서는 findMatches 함수를 호출하고 이를 통해 받아온 결과를 화면에 원하는 방식으로 그린다.
findMatches 함수에서는 정규표현식을 활용하여 데이터를 필터링 한다.

아직 정규표현식을 배우지 않아 정확히는 모르지만,

플래그 설명
g 모든 문자와 여러 줄 일치(global)
i 영어 대소문자를 구분 않고 일치(insensitive, ignore case)
m 여러 줄 일치(multi line)
u 유니코드(unicode)
y lastIndex 속성으로 지정된 인덱스에서만 1회 일치(sticky)

정규표현식에서는 이와 같은 플래그들을 가진다. 이 강의의 코드에서는 gi플래그를 사용했기 때문에 영어 대소문자를 구분하지 않고 일치하는 모든 데이터들을 가져온다.

만약 g를 쓰지 않는다면 조건과 일치하는 하나의(최초의) 검색만을 반환할 것이다.

---

offsetX  offsetY

const canvas = document.querySelector('#draw');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function draw(e) {
 console.log(e);
}

canvas.addEventListener('mousemove' , draw);

마우스가 움직일 때 마다 e.offsetX  e.offsetY 값을 통해 화면에서 마우스의 위치가 어디인지를 알 수 있다.

---

console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

이런 식으로 선언해서 콘솔의 텍스트를 꾸밀 수도 있음. I am some great text에 뒤에 나오는 css 요소들이 모두 붙는다.

---

const checkboxes = document.querySelectorAll('.inbox input[type='checkbox']'); //여러 개의 체크박스들을 모두 가져온다


checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

function handleCheck(e){
   //원하는 내ㅇ용
} 

---

cosnt pressed = [];

window.addEventListener('keyup', (e) => {
	pressed.push(e.key);
}

이런 식의 코드를 통해 유저의 키보드로 입력되는 요소들을 배열에 저장 할 수도 있다.

---

localStorage.setItem('items', JSON.stringify(items));

localStorage 에  data를 보관하는 방법. 첫번쨰 파라미터는 데이터의 이름 두번째 파라미터는 실제 데이터. 이 데이터의 형식을 반드시 string 이어야 한다. 이 때문에 JSON을 스트링화 시킨 것이다.

---

11강의 내용은 비디오 플레이어를 구성하는 내용.  
13강은 slide scroll에 관련된 내용.

이 두 내용은 실제로 내가 어떤 프로젝트를 진행할 때 필요하다면 다시 강의로 돌아와서 보고 참고할 만한 내용이라고 생각했다. 기억해두었다가 나중에 이러한 기능들이 필요할 때 참고하자.