Ella 프론트엔드일지

0. 버그 현황 - React-Query 로 리팩토링 하는 도중에 페이지네이션의 버튼을 클릭하면 화면이 렌더링 되지 않는 문제를 겪었다. 분명 createAsyncThunk 리덕스 툴킷으로 할때는 잘 되었는데...? 왜그런걸까 기존 createAsyncThunk 로 할때의 코드는 아래에 첨부한다. https://ella951230.tistory.com/entry/%EC%98%A4%ED%94%88%EB%A7%88%EC%BC%93-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A6%AC%EB%8D%95%EC%8A%A4%ED%88%B4%ED%82%B7%EC%9C%BC%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98-%EA%B5%AC%E..

https://ella951230.tistory.com/entry/%ED%88%AC%EB%91%90%EB%A6%AC%EC%8A%A4%ED%8A%B8-%ED%8E%98%EC%96%B4%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%A0%84%EC%97%AD%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-VS-get-API-%EC%9E%AC%ED%98%B8%EC%B6%9C [투두리스트 페어프로그래밍] 전역상태관리 VS get API 재호출 0. 버그 배경 Todo페이지에서 아침/점심/저녁 버튼을 누르면 각 Category 페이지로 이동되는 로직이다. 왼쪽 그림에서 각 버튼을 누르면 아침(빨간색 포스트잇)/점심(노란색 포스트잇)/저녁(파란색 ella9..

0. Redux-toolkit 의 createAsyncThunk -> React-Query 로 리팩토링 🔸리팩토링을 하게 된 배경 - 오픈 마켓 프로젝트에서 전역상태관리로 Redux-toolkit 을 쓰고, 서버 상태관리를 createAsyncThunk 로 관리하고 있었다. 🔸createAsyncThunk - Redux-Toolkit 에서 내부적으로 thunk 를 내장하고 있어서, 다른 미들웨어(ex: Recus-Saga) 를 사용하지 않고도 비동기 처리를 할 수 있다. - 비동기 작업의 성공,실패 및 로딩 상태를 자동으로 처리하는 액션을 생성하므로, 서버 데이터를 편리하게 전역 상태로 관리할 수 있다. - 전역 상태로 관리되는 서버 데이터는 여러 컴포넌트에서 공유될 수 있으며, 필요한 곳에서 사용할 수..

✅한 줄 요약 : useEffect 는 React 컴포넌트 렌더링이 완료된 직후에 비동기로 호출된다. 0. 버그 현황 - 로그아웃 버튼을 누르면 / 페이지로 리다이렉트 기능을 만들려고 했다. - 로그아웃 버튼을 누르면 토큰 값이 없어져서 / 페이지로 이동해야하는데 Notfound 페이지로 뜸 - 아래 코드를 보면 중간에 useEffect 로 token 값이 없으면 / 페이지로 이동하게 해놨다. function Todo() { const [showInp, setShowInp] = useState(false); const [todoList, setTodoList] = useState([]); const userContext = useContext(UserContext); const navigate = use..

0. 버그 현황 - 우리는 JWT 토큰을 Context API 로 관리를 하고 있다. 토큰 여부에 따른 페이지 접근 제한을 하고 있다. - 하지만, 토큰 값을 삭제한 후 signin 페이지에 가서 로그인을 하면 todo 페이지로 이동할 때 토큰값이 로컬스토리지에 저장되어 있음에도 불구하고 Notfound 페이지로 이동한다. 🔸splash 페이지로 접근 후 token 이 있으면 signin 페이지로 이동, 없으면 todo 페이지로 이동 function Splash(){ const navigate = useNavigate(); const token = useContext(UserContext); useEffect(() => { setTimeout(() => { if (!token) { navigate("/s..

0. 버그 배경 Todo페이지에서 아침/점심/저녁 버튼을 누르면 각 Category 페이지로 이동되는 로직이다. 왼쪽 그림에서 각 버튼을 누르면 아침(빨간색 포스트잇)/점심(노란색 포스트잇)/저녁(파란색 포스트잇)으로 카테고리별로 나뉘는 로직이다. 그런데, 카테고리 페이지에서 수정 API 를 호출하면 상태가 바로 반영이 되는데, Category 페이지를 새로고침하면 다시 예전 값으로 렌더링되는 문제가 있었다. 즉, 수정된 내용이 Category 페이지에서 새로고침하면 반영이 안되었다. 수정 api 는 잘돼서 수정된 내용이 update 되는데 새로고침하면 수정된 데이터가 PostItem 컴포넌트에 반영이 안되고 있음. 1. 버그 코드 - Todo 페이지에서 todolist state를 useNavigate..