1. infiniteloading 라이브러리를 등록해주고 component화해서 사용할 준비를 해준다
2. 서버와 연동시키기 위하여 기존의 데이터를 미리 넣고 준비하는 것이 아닌, axios를 이용하여 서버에 있는 것들을
불러오는 작업을 진행해준다.
이 때 아직 백엔드에서 api가 준비되어 있지 않으므로 json-server를 이용해준다
사용한 데이터는 json-server 폴더 안에 db.json이며, 관련 명령어는 readme.md에 기록해놓았습니다
3. axios를 이용하여 http 통신으로 서버에 있는 데이터를 먼저 불러와준다(초기 12개)
5. infinitehandler 함수 구현
여기서 아직 백엔드에서 paging 처리를 통해 한 페이지마다 12개씩의 데이터를 불러오지 못했으므로 임의로 limit값을
늘려줘서 서버 내에 있는 데이터들을 추가시켰다. 이렇게 구현하게 되면 8, 16, 32 누적해서 데이터가 들어오게 되는데
이후에 페이징 처리를 통하여 한번 구현될 때마다 page number를 url에 매핑시켜주면 정상적으로 동작할 것 같다
그리고 데이터가 지정된 이미지 개수(12개) 미만일 경우 로딩을 종료할 수 있도록 구현해주었다.
hackjap
commented
3 years ago
infiniteloading 라이브러리를 이용한 자동 스크롤 기능 구현
1. infiniteloading 라이브러리를 등록해주고 component화해서 사용할 준비를 해준다
2. 서버와 연동시키기 위하여 기존의 데이터를 미리 넣고 준비하는 것이 아닌, axios를 이용하여 서버에 있는 것들을 불러오는 작업을 진행해준다.
이 때 아직 백엔드에서 api가 준비되어 있지 않으므로 json-server를 이용해준다
사용한 데이터는 json-server 폴더 안에 db.json이며, 관련 명령어는 readme.md에 기록해놓았습니다
3. axios를 이용하여 http 통신으로 서버에 있는 데이터를 먼저 불러와준다(초기 12개)
4. 하단부에 infinite-loading을 지정해주고 @infinite에 method 함수명을 기록해준다
5. infinitehandler 함수 구현
여기서 아직 백엔드에서 paging 처리를 통해 한 페이지마다 12개씩의 데이터를 불러오지 못했으므로 임의로 limit값을
늘려줘서 서버 내에 있는 데이터들을 추가시켰다. 이렇게 구현하게 되면 8, 16, 32 누적해서 데이터가 들어오게 되는데
이후에 페이징 처리를 통하여 한번 구현될 때마다 page number를 url에 매핑시켜주면 정상적으로 동작할 것 같다
그리고 데이터가 지정된 이미지 개수(12개) 미만일 경우 로딩을 종료할 수 있도록 구현해주었다.