Web (45) 썸네일형 리스트형 [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이 로그인 함수의 파라미터로 전달.. [Redux] redux-saga - reducer를 분할하였으면 saga도 root-reducer처럼 분할해야함 - generator 사용시 yield로 걸어 놓은 부분을 next()로 한 줄씩 실행 할 수 있기에 테스트에 매우 유리 - generator 함수 * 중단점이 있는 함수 * yield가 있는 곳에서 멈추어 실행함 * yield 뒤에 숫자를 넣으면 객체안의 value key에 숫자를 넣어 return - saga의 원리는 generator 함수에 while(true)문안에 yield를 넣어 사용하는 것, 이벤트리스너의 동작과 비슷 - all, fork, call, put, take등의 effect가 있음 * all : 범위안의 함수를 모두 실행 * fork : generator 함수를 실행 * take : action이 실행.. [CSS] fixed로 화면 전체를 체우기 - top / left / right / bottom의 속성을 0으로 정의 [React] component로 빼면 좋은 것들 - 큰 부분으로 되어 있는 부분 - map안에 들어가는 JSX - component를 미리 작성해놓고 설계하는것이 편리하다 [Redux] dummy 데이터 - redux 사용시 useState를 사용하여 dummy 데이터를 만들 필요 없이 redux의 initialState를 사용하여 만든다 - id는 shortId, 기타 데이터들은 faker 라이브러리를 사용하여 reducer 파일에 더미데이터를 만들고 사용하면 좋다 [Redux] reducer 분할하기 - reducer의 함수의 경우 합치는 것이 배열 혹은 객체와 같이 쉽지 않기 때문에 redux 안의 combineReducer를 사용하여 합쳐줘야 한다 - combineReducer가 자동으로 initialState들을 합쳐주기 때문에 합친뒤 메소드를 불러서 사용하는것 처럼 사용한다 - 데이터는 useSelector로 받아 사용하고 action은 dispatch를 하여 데이터를 변경한다. action creator를 정의하여 사용하기도 한다( 함수로 action을 만들어서 return) [nextjs] script에서 포트 변경 package.json 파일의 script에 "next -p 3060"으로 정의하면 3000인 포트를 3060으로 바꿔서 사용 가능하다 [Redux] 원리 및 불변성 흐름 - 중앙저장소( state) - action - dispatch - reducer로 연결이 되어있다 - action을 dispatch하면 reducer에 명시한 방법에 따라 값을 불변성으로 변경하여 중앙저장소에 저장한다 장점 / 단점 - action의 추적이 가능하고 내역 확인이 되기 때문에 버그 발생시 수정이 매우 편리함 - 데이터의 rollback이 가능하기에 테스트하기 편하다( redux devtools) - 데이터를 바꾸고 싶을때마다 action을 만들고 reducer를 정의해줘야하기 때문에 코드량이 매우 많아진다. 이러한 문제점을 해결하기 위해 Redux toolkit이 개발되었다 사용 - reducer에 불변성으로 데이터를 넘기는 이유는 불변성 넘기는 것은 객체를 새로 생성하는 것이고 이.. 이전 1 2 3 4 5 다음
