recast.ly 구조

recast.ly 구조를 그려보았다.

 

 

 

fetch 같은 비동기 함수는 componentDidMount() 메서드에 작성하는 것이 좋다.

만약 사용자가 페이지에 접속했을 때 fetch 작업이 10초 정도 걸린다고 하자. 

그렇다면 사용자는 기다리지 않고 페이지를 떠날 것이다. 

10초 정도 걸려도 일단 페이지를 렌더링하면 UX 적인 부분에서 이점이 생긴다. 

 

리액트에서는 익명함수는 가급적 지양해야 한다. 

이벤트 등록 해제시 어렵기 때문이다. 

 

(화살표 함수는 실행 컨텍스트를 만들지 않음)

 

 

recast.ly 구현 스크린샷

search 에 fetch, 디바운싱 및 watch later 에 localStorage 기능도 적용해 보았다. 

테스트를 계속 하다보니 api 할당량이 넘기도 했다. 하루가 지나니 다시 풀렸다 ㅎㅎ 

실제 배포는 어떻게 하는 지 궁금하다

css를 제대로 다루지 못하고 있으므로 시간내서 공부해야겠다