[프리온보딩] 220512 개인과제 #1

개인과제 #1

공식적인 내생각

하루종일 갤갤대느라 별거 안했다... 처참하다 (ㅋㅋ)

로컬 스토리지에 값 올리는 것까진 했는데 새로고침할 때마다 로컬 스토리지에 있는 값이 자꾸 초기화된다

이부분 내일 다시 한번 봐야겠다

작업 내용 (삽질한 내용)

Suspense에 대해 단단히 잘못 알고 있는 듯한 나

<div className={styles.movieContainer}>
    <Suspense fallback={<ContainerMessage isLoading />}>{renderMovieContainer()}</Suspense>
</div>

딱 이렇게만 해 놓으면 renderMovieContainer() 돌아가는 동안 로딩 컴포넌트가 렌더링 되는 줄 알았다

내 예상은 renderMovieContainer 내의 모든 내용이 렌더링될 때까지 로딩 컴포넌트가 빙글빙글 돌아가는 거였는데 실상은 하나라도 로딩되면 Array.map 메서드의 작업 내용이 끝나지 않아도 suspense가 종료되고 컴포넌트가 렌더링되었다

Suspense, lazy loading 키워드를 찾아보고 리팩토링해야겠다..

누더기골렘코드

처음 데이터를 받아오는 부분만 훅으로 분리하고, 나머지는 옵저버를 연결하느라 컴포넌트 내에 선언해놨더니 컴포넌트 내에 로직만 50줄 가까이 된다 옵저버 생성하는 부분을 훅으로 따로 분리해도 이 모양이다..

그중에 상태값만 거진 10줄이다.. 너무 길어서 가독성이 떨어진다

분명 예쁘게 만드는 방법이 있을텐데... 어떻게 해야할까

영화 한 개를 보여주는 MovieBlock 컴포넌트도 즐겨찾기 기능을 넣으니 비슷하게 불어나고 있다

훅이든 함수든 뺄 수 있는 방법을 생각해봐야겠다 한동안 C만 하다가 와서 그런가 비동기에 대해 손에 익지가 않네

오늘 정리한 내용

localStorage / sessionStorage

localStorage / sessionStorage

localStorage / sessionStorage

store

store

store