고양이 사진 검색기 만들기

API 공통 : https://kdt-frontend.cat-search-api.programmers.co.kr/api/cats

자동검색 API : /keywords?q={keyword}
고양이 사진 검색 API : /search?q={keyword} => {data[{id, url, name}]}

//////
css: https://cdn.roto.codes/css/cat-search.css

Heade컴포넌트 : header class="Header"
	SearchBar 컴포넌트 : input class="keyword" autocomplete="off"
SuggestKeywords 컴포넌트 : div class="Keywords"
SearchResults 컴포넌트 : div class="SearchResults"

• 스크립트의 선언과 실행을 분리하자! (App.js-main.js)

• initialState prop을 받아서 초기화하면, 로컬 스토리지 등으로 마지막 데이터를 불러오게 동작할 수 있으므로 이 습관을 들이는게 좋다!

• 비동기 함수를 호출할 때 밑에 추가 코드가 없다면 async await을 붙이지 않아도 된다

• String의 trim 메서드
⇒ 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환
(공백 : 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자)

• Arrow Down, Arrow Up

• switch - case문에서 {}를 안해도 되지만, 블록스코프를 만들 때 감싸줘도 된다.

• input 요소의 텍스트 선택(dragged)하기
• setSelectionRange(start, end) :
• select 메서드 ⇒ 전체 다 선택

• input 요소의 setRangeText 메서드 : (replacement[, start][, end][, selectMode])
• input의 value를 replacement로 대체한다
• start, end : 바꿀 인덱스 지정
• selectMode :
• "select" 바뀐 텍스트 선택
• "start" / "end" 바뀐 텍스트의 시작/끝부분에 커서위치
• "preserve" 암것도 안함(기본값)

• input 요소의 이벤트
• keyDown : 키가 눌렸을 때 발생하는데 input 이벤트 전에 발생됨에 주의!!
• input : value 속성의 값이 바뀔 때마다 발생하는 이벤트입니다. 일반적으로 keyPress 직후에 value 속성이 바뀌면서 input 이벤트가 발생합니다. input 이벤트 객체의 data 프로퍼티는 value 속성에 가장 최근 추가된 한 글자를 가지고 있습니다.(영어의 경우 알파벳 한 글자, 한국어의 경우 초성/중성/종성으로 이루어진 한 글자)
• keyPress : 키가 눌렸을 때 발생하며, keyDown 이벤트 이후에 발생합니다. 한글 입력이나 기능키 입력시에는 발생하지 않습니다. MDN에서 찾아보면 deprecated 되었다고 나오니, input 이벤트 전에 입력을 제어하고 싶다면 keyDown 이벤트를 사용하는게 바람직해 보입니다. keyDown과 여러모로 비슷한 특성을 가지지만 특정 키에는 발생하지 않는 등의 예기치 않은 동작으로 혼란을 줄 수 있는 이벤트가 아닐까 생각합니다.
• keyUp : input 이벤트 발생 후 value가 업데이트 된 이후에 키보드에서 손을 떼면 발생하는 이벤트입니다. 당연하게도 키를 꾹 눌러서 입력을 반복하거나 할때는 발생하지 않습니다.

• localstorage === window.localstorage