- Keyword
hover / Redux Toolkit / localStorage / axios / CORS / http-proxy-middleware
mouse hover event를 이용하여 강조 및 애니메이션 효과를 주고 있는데, 자꾸 반응했다가 안 했다가 반복해서 이유를 찾아보니, 뒤에 배경으로 둔 div가 hover 되면서 꼬인 것이었다. 뒤에 div position을 relative로 설정해주고 z-index를 조절하여 해결하였다.
어느 정도 UI 작업이 되어 N사의 data를 받아오는 작업을 하였다.
유저 nickname을 검색하여 data를 받아오고, 거기에 해당하는 accessId로 match data를 받아와야 한다.
우선 유저 nickname을 검색하면 해당 nickname으로 받은 data를 localStorage에 저장하였고, 만약 재검색을 하게 될 경우 cache 개념으로 cache hit가 된 경우에는 요청을 하지 않았다.
그 이후는 accessId로 match data를 받아왔다.
오랜만에 CORS error를 만났다.
API 정보를 제공해주는 사이트에서 테스트를 해보다가 직접 구현해서 시도해보니 CORS error가 떴다.
금방 해결할 줄 알았는데 처음엔 제공된 Key를 Header에 설정해줘야 하는 줄 모르고 무작정 시도했다가 결국 이용 가이드를 천천히 보며 Header에 발급받은 Key를 설정해주었다. 그 후로 200번대로 응답이 왔지만 역시 CORS 문제가 해결되지 않았었다. 제대로 http-proxy-middleware도 잘 설정했는데, 자꾸 안 되길래 혹시나 하는 마음에 껐다가 다시 실행했더니 됐다.. 휴.. reload가 되었다고 해서 너무 믿으면 안 되겠다.
CORS와 http-proxy-middleware 그리고 axios까지 주말에 다시 정리해야겠다.
- 오늘 하루 느낀 점
이렇게 과제가 주어지고 몰입하니 재미있다.
확실히 문제를 맞닥뜨리고 이걸 해결하려고 집중하고 해결했을 때의 기분은 정말 좋다.
아직 부족하지만 급하기보단 천천히 꾸준하게, 넘어지더라도 앞으로 넘어지면서 한발 한발 나아가고 싶다.