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 > ..
자바스크립트의 배열에 대해서 공부하는 파트입니다. 1. Filter the list of inventors for those who were born in the 1500's (1500년대에 태어난 발명가들을 필터링하라.) let fifteen = inventors.filter((inventor) => (inventor.year >= 1500 && inventor.year < 1600)); console.table(fifteen); console.table로 출력하면 데이터가 테이블 형태로 나옵니다. 2. Give us an array of the inventors' first and last names (발명가의 이름과 성으로 구성된 배열을 제공하라.) let fullNames = inventors.m..
- Total
- Today
- Yesterday
- git log
- flask
- cmd
- 파이썬
- Git
- 플라스크
- django
- 심플 팩토리 패턴
- 깨짐
- 구글 맵
- 한글
- Windwos
- 한글 깨짐
- Apache
- 웹
- 구글맵
- 팩토리 메소드 패턴
- 한글깨짐
- Windows
- 추상 클래스
- Python
- 안드로이드
- 팩토리 패턴
- Google Map
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |