개발 창고

[next.js] intersection observer로 무한스크롤 구현하기

본 글은 Next.js 환경에서 무한스크롤 기능을 intersection observer를 이용해 구현한 방법에 대해 작성하였습니다. 구현 설명 우선 처음 데이터는 Next의 getServersideProps로 받고, 이후 데이터는 intersection event가 발생했을 때 다음 배열을 가져오는 api를 호출하도록 구현하겠습니다. 이때 API는 원하는 page를 쿼리 파라미터에 page=1과 같이 지정하면 해당 page의 데이터를 반환하도록 구현되어있습니다. 상세 구현 타입 지정 프로젝트에서 가져오는 정보들을 memory라 명명하여 type도 연관되게 이름지었습니다. GetMemoryListRes 타입은 데이터를 fetching해올 때 무한스크롤 할 정보의 response타입입니다. /** memo..

[Next.js] Next에서 Styled Components와 함께 Storybook 세팅하기

Create-Next-App을 통해 생성한 Next.js 프로젝트에서 storybook 초기 설정하는 방법에 대해 알아보겠습니다. Storybook 설치하기 npx storybook@latest init 위 명령어로 storybook의 최신버전을 프로젝트에 설치합니다. yarn add -D @storybook/nextjs 설치를 완료했다면 nextjs를 지원하는 패키지도 설치해줍니다. 설치를 완료했다면 아래 코드를 .storybook/main.ts 파일에 추가해줍니다. // .storybook/main.ts const config: StorybookConfig = { //... framework: { name: '@storybook/nextjs', options: {}, }, } npm run story..