본문 바로가기

전체 글

(75)
[html] 인피니트 스크롤링 - hasMorePost와 같은 state를 만들어서 스크롤링이 마지막부분에 닿았을 때 데이터가 더 있거나 없거나 하는 것을 구분함 - useEffect에 window.addEventListener의 경우 return을 해줘서 이벤트를 없애줘야 메모리에 쌓이지 않음 - 스크롤시 알아야 할 변수 * scrollY : 현재 스크롤 위치 * clientHeight : 화면에서 보이는 스크롤의 길이 * scrollHeight : 스크롤 맨 위부터 아래까지의 총 길이 * 스크롤을 끝까지 내렸을 경우 "scrollY + clientHeight = scrollHeight" - 가장 아래로 내렸을 경우 데이터를 불러오는 것이 아니라 그 전에 불러와야 사용자 경험에 좋음 - 스크롤링의 경우 동작이 연속으로 일어나기 때문..
[React] Form에서 데이터 전송 후 input 초기화 - Form을 submit 한 후 초기화를 submit안에서 해주면 서버에서 오류시 글이 전달되지 않았으나 사용자의 글이 지워지기 때문에 문제가 될 소지가 있음 - useEffect에서 redux에서 post가 성공하였을때 실행되는 변수( signInDone과 같은)를 받아 데이터 전송 성공시 초기화가 되도록 해야 함
[Redux] 비동기 처리 - 비동기 처리의 경우 서버에서 데이터를 받아오는 것이기 때문에 성공/실패 경우를 고려해야 함 * 로그인의 경우 로그인 / 로그인 중 / 로그아웃 중 이러한 액션이 추가로 필요함 - request 액션을 만들고 loading state를 추가하여 loading 효과를 넣으면 사용자 경험이 좋음 - saga에서 success와 failure 같은 경우는 비동기 호출 시 액션을 put으로 생성하기에 reducer에서 작성하지 않아도 됨 - 로그인 시뮬레이션 예 1. 로그인 버튼 클릭 2. 로그인 요청 액션 dispatch 3. saga의 watchSignin이 실행되고 reducer의 로그인 요청 실행 4. saga의 로그인 함수 실행 5. 로그인 요청에서 받아온 action이 로그인 함수의 파라미터로 전달..