20200314 TIL

Web Dev Matching

1. vanilla js에 익숙치 않아서 modal 동작(display: block. none)시에 esc 누르면 modal 나가기(e.KeyCode==27)일 때 해당 style.display: none 으로 하는것, 다른 화면 클릭 시 → 다른 화면누를 때 다른 class 가 나오기 때문에 해당 클래스일시 none
2. 'api 수정해서 정보 나타나게 하기'는 이전에 공부하던 내용이 있어서 맞는지는 모르겠지만 구현에는 성공.
3. 대신 해당 값 return시에 마지막 검색어 저장해두었다가 새로고침하면 검색 그대로 나타나게 하는 작업은 localStorage를 활용하면 될것같았는데 못했음(이거 개인플젝에서 좀더 해보면 좋을듯)
4. data 전달 단계는 중간 단계에 loading state를 만들어 두고, 구현하는 것에 포커스를 맞추다보니 if, else if, else를 사용해서 loading일때는 검색중입니다. 없을때에는 null 전달, 그리고 검색어가 없습니다. 를 구현했음.
5. 나머지 dark mode 적용이나 반응형으로 width 줄어들 때 크기 늘리는 코드는 시간이 더 있으면 구현할 수 있었던 문제였다고 생각함 .

계속해서 사용하다가 너무 불편함을 느꼈던 redux-actions보다는

typesafe-actions 모듈을 사용하는게 좋다고함.

+) 계속해서 Object map 방식으로 reducer를 구성하려고 했었는데,

asyncActionCreator Util함수와 같이 사용하려면 switch문으로 3가지 case를 정리하는게 더 좋은방법인듯 하다.

refactoring에 대한 문법적 초석을 다지느라 시간이 조금 걸렸던것 같다.