Javascript30. 06 - Type Ahead
2020-01-07
Javascript30
정리: Javascript30을 공부한 내용 기록
06 - Type Ahead
목표
요구사항
- 문자를 입력하면 유사한 내용을 하단 검색어에 보여준다.
필요기술
- fetch(promise)
- 정규표현식
배운 것
Javascript
fetch
fetch 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있다.
fetch(endpoint)
.then((response) => response.json())
.then((json) => cities.push(...json));🏆
fetch를 사용하면promise를 반환한다. 이에 대해 더 공부해보기.
정규표현식
정규표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다.
const numberWithCommas = (number) => {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용한다.
const findMatches = (wordToMatch) => (cities) => {
return cities.filter((place) => {
const regex = new RegExp(wordToMatch, 'gi');
return place.city.match(regex) || place.state.match(regex);
});
};👋
