반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
Tags
- Typescript
- restore scroll position
- 비동기 처리
- 마이크로 프론트엔드
- 세션스토리지
- NextJS
- useRef
- Architecture
- redux saga
- scrollTo 안됨
- ESLint
- 식별자 결정
- Apollo Server
- task-definition
- CSR
- Spa
- Webpack
- 환경 레코드
- SAGA 패턴
- 타입스크립트
- Next.js
- Babel
- graphql
- 스코프체이닝
- nvm
- SSR
- 실행 컨텍스트
- Apollo Client
- 무한 스크롤
- 변수 섀도잉
Archives
- Today
- Total
목록useRef (1)
minguri brain is busy
무한 스크롤 리스트에는 뒤로가기를 갔다가 보던 위치를 기억해주는 기능은 UX적으로 필수적이다. 다른 페이지에 갔다가 뒤로가기로 페이지에 돌아올 경우, 더보기로 새로 로드된 데이터는 초기화되고 없으므로 실제로 보던 위치로 돌아가지 못하는 문제가 있다. sessionStorage를 사용해서 해결한 방법을 적고자한다. 우선 리스트에서 상품을 클릭할때 sessionStorage에 현재 스크롤 위치와 로드한 데이터를 저장한다. // ProductItem.tsx const handleProductClick = async () => { await setScrollDataInStorage(); handleChangeLocation(`${publicRuntimeConfig.config.productHost}/produc..
FE/개발
2022. 12. 23. 17:51