도로 청소부 베포의 청소방법

[문제 분석] 1. 현재 onChange와 onSubmit 함수는 제대로 작동해서 input 값에 들어오는 값을 잘 감지하고 있다. 새로 바뀔 값(onChange)과 데이터를 요청할 값(onSubmit)이 동일하기 때문이다. 또한, 새로운 queryKey 또한, 그에 맞춰 잘 생성됨을 볼 수 있다. gethub라는 입력값을 타이핑했을 때, 문제가 되는 부분은 검색결과이다. console에 찍힌 검색결과는 이전 queryKey값인 'stale'을 입력했을 때의 결과이다. 결과적으로 이런 현상이 발생하게 된다. (프로필 이미지는 캡쳐를 위해 일부러 삭제했다.) 즉, api 요청해서 해당하는 데이터를 받아오는 것도, 캐시하는 것도 문제가 없지만, 이 데이터를 상태에 업데이트 시켜주는 부분에서 문제가 생긴 것이..

handleSubmit을 다시 보자. localState의 길이를 기준으로 0인지 아닌지를 판단하여 분기 처리하고 있다. 검색창에 입력값 'a'가 있음에도 아직 setLocalState가 반영되지 않았기 때문에, handleSubmit 함수가 호출돼서 입력값이 비었는지 확인하는 유효성 검사에서 빈 값(length === 0)으로 판정되어 'Please Enter github name.'이라는 메시지가 alert된다. 반면, input dom에 바로 접근하는 inputValue는 입력값을 그대로 반영한다.(53째 줄에 입력값 그대로의 검색 결과를 받아오기 위해 인수로 전달) 그 결과 다음과 같은 메시지가 콘솔에 출력된다. 왜 이런 현상이 발생한 것인지 setLocalState의 호출부를 가 보면 알 수 있..

JavaScript에서 debounce(디바운스)는 유저가 입력할 때마다 코드를 오직 한 번씩만 실행되도록 해 주는 함수이다. 검색박스의 제안, 텍스트 필드의 자동 저장, 버튼의 더블 클릭 제거 등이 모두 debounce를 이용하는 사례이다. debounce란? debounce는 전자 공학에서 온 용어이다. 우리가 TV리모컨을 누를 때, 여러 번을 눌러도 마지막에 누른 버튼만 동작하는 것처럼, 일단 버튼으로부터 신호를 받았다면 다시 버튼을 누르는 것이 불가능한 버튼으로부터 온 신호는 처리하지 않는 예를 들 수 있다.(마지막 요청만 처리한다는 의미이다) 사용자가 타이핑을 끝내고 난 뒤에만 추천 검색어를 띄우고 싶다고 해보자. 또는 작성한 양식의 내용을 저장하고자 하지만, 매번 '저장'이 일어나 서버 측의 ..

github으로 git clone 받고 `npm start`하니 출력된 오류문구다. create-react-app으로 생성된 리액트 앱 구동을 위해 node modules가 필요한데 용량이 너무 커서 원격 저장소에 올리지 않은 것 같다. 검색 후 ```$ npm install -save react-scripts``` 해당 명령어를 입력해주니 node modules 폴더가 생기면서 리액트앱이 실행되었다.

"얘, 모모야. 때론 우리 앞에 아주 긴 도로가 있어. 너무 길어. 도저히 해 낼 수 없을 것 같아. 이런 생각이 들지." 그러고는 한참 동안 묵묵히 앞만 바라보다가 다시 말했다. "그러면 서두르게 되지. 그리고 점점 더 빨리 서두르는 거야. 허리를 펴고 앞을 보면 조금도 줄어들지 않은 것 같지. 그러면 더욱 긴장되고 불안한 거야. 나중에는 숨이 탁탁 막혀서 더 이상 비질을 할 수가 없어. 앞에는 여전히 길이 아득하고 말이야. 하지만 그렇게 해서는 안 되는 거야." 그러고는 한참 동안 생각하다가 다시 말을 이었다. "한꺼번에 도로 전체를 생각해서는 안 돼, 알겠니? 다음에 딛게 될 걸음, 다음에 쉬게 될 호흡, 다음에 하게 될 비질만 생각해야 하는 거야. 계속해서 바로 다음 일만 생각해야 하는 거야." ..