프론트엔드 취업용 프로젝트 작성기 4 (3일차)

3일차같은 4일차... 이틀동안 이 문제에 갇혀서 고생했다

 

첫번째 난관에 부딪혔다...

그냥 북마크의 리스트를 지우는건 바로 재렌더링이 됐는데 북마크 찾기 기능으로 렌더링했던 부분에서 북마크 리스트를 지우면 바로 재렌더링 되지 않는 문제가 생겼다. 이게 dispatch(상태변경 함수)는 asychronous 하게 동작하기 때문에 remove reducer을 통해서 기존 bookmark가 변경되기전에 다음 코드가 동작해버려서 변경되지 않은 bookmark에서 북마크 찾기 기능을 다시 동작시키기 때문에 변경되지 않던 것이었다...

 

그래서 맨 처음 생각했던게 useEffect를 사용해서 state.bookmark가 변경될 때마다 북마크 찾기리스트도 다시 만드는 식으로 하는거였는데... 여기가 진짜 큰 실수였다...

난 useEffect에 redux state를 처음 사용해봐서 저 eslint때문에 뜨는 저 warning이 오류인줄알고 안되는 방법이라고 생각해서 계속 다른 방법을 찾았었는데... 사실 처음 생각했던 useEffect 사용하는게 정답이었다...

 

그래도 그덕분에 asynchronous 해결한다고 동기/비동기부터 promise, async&await, redux toolkit thunk까지 공부하게 됐다... 하지만 결국 저 방법들로는 해결하지 못해서 다시 useEffect를 사용해보려고 했더니 정말 쉽게 해결돼서 너무 허탈했다... 그리고 깃허브를 포트폴리오로 제출할까 싶어서 git도 다시 공부해서 git에 좀 더 가까워졌다.

 

자 이제

3. 드래그 앤 드롭 기능을 추가해서 카테고리간 이동, 카테고리 내에 북마크별 순서 이동을 구현할 것이다.

 

4. SideBar 펼침, 닫힘 기능 구현

 

5. 모바일용 페이지 레이아웃 구현

 

6. 랜딩페이지와 css를 마무리 하겠다.

 

이것들만 완성하면 취업용 포트폴리오 완성이다. 3번을 제외하고는 그렇게 오래걸리거나 어렵지 않을것같다.

그런데 요즘은 프엔만 해서는 취업 힘들다고해서... 일단 이번 포트폴리오 완성시키고 여기저기 지원해놓고

MERN(MongoDB, Express, React, Node.js)풀스택 공부를 시작해서 현재 만든 포트폴리오를 서버와 연결시키기까지 업그레이드 시켜야겠다. 그럼 취업되겠지 뭐...