둥지

javascript의 array에 대해서 배우는 시간 2편입니다. 여기서는 some, every, find, findindex에 대해서 공부를하게 됩니다. 1. is at least one person 19 or older? (한 사람 이상이 19세 이상인가?) const isAdult = people.some(person => ((new Date().getFullYear()) - person.year) >= 19); console.log(isAdult); 2. is everyone 19 or older? (모두가 19세 이상인가?) const allAdult = people.every(person => ((new Date().getFullYear()) - person.year) >= 19); conso..

live search 기능을 구현하는 파트입니다. start 파일을 보면 endpoint라는 변수안에 url만 들어있습니다. 이 url로 들어가보시면 데이터들이 들어있는것을 볼 수 있습니다. 우선 여기서는 fetch를 이용해서 데이터를 가져와 cities라는 변수에 넣겠습니다 const cities = []; fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); 그리고 입력한 단어가 cities안에 있는지 비교해서 찾는 findMatches라는 함수를 작성해보겠습니다. function findMatches(wordToMatch, cities) { return cities.filter(place => { const r..

Flex Box에 대해서 공부하는 파트입니다. 기본 코드를 열고 아래의 코드를 추가해줍니다. (...은 기존에 추가되어 있던 코드를 의미합니다.) .panels { ... display: flex; } .panel { ... flex: 1; justify-content: center; display: flex; flex-direction: column; } 위의 css 코드를 추가하면 panels는 flex box로 변경이 되어 밑으로 나열되어 있던 panel 들이 옆으로 나열되게 됩니다. 그리고 panel들은 전부 같은 공간을 할당받기 위해 flex를 1로 설정하였으며 panel 안에 있는 텍스트를 중앙으로 배치하기 위해 값들을 추가하였습니다. 이번에는 아래의 코드를 추가해보겠습니다. .panel > ..