반응형
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 |
31 |
Tags
- useRef
- CSR
- Architecture
- nvm
- ESLint
- 세션스토리지
- task-definition
- 변수 섀도잉
- Apollo Client
- 마이크로 프론트엔드
- Next.js
- 비동기 처리
- Babel
- Spa
- 스코프체이닝
- scrollTo 안됨
- restore scroll position
- Apollo Server
- SAGA 패턴
- NextJS
- redux saga
- Webpack
- 환경 레코드
- Typescript
- 식별자 결정
- 실행 컨텍스트
- graphql
- 무한 스크롤
- SSR
- 타입스크립트
Archives
- Today
- Total
목록NextJS (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