토이 프로젝트/서울시문화행사9 프로젝트 - 무한 스크롤 구현 무한 스크롤 구현 모바일 버전을 베이스로 프로젝트를 만들고 있기 때문에 페이지네이션을 무한 스크롤로 구현하기로 했다. React Query의 useInfiniteQuery 함수를 사용하여 구현하기 위해 자료를 찾아보는데 아래 블로그에 잘 정리되어 있는 것 같아서 이걸 기반으로 구현해보기로 했다. https://s0ojin.tistory.com/58 [React] react-query useInfiniteQuery로 무한스크롤 구현하기 무한스크롤(Infinite Scroll)? 게시판 글 리스트처럼 많은 데이터를 배열로 받아오는 경우, 그 데이터가 너무 방대해지면 api 요청으로 데이터를 받아오는 시간이 오래걸릴 수 밖에 없게됩니다. 우리 s0ojin.tistory.com 기본적인 개념은 Intersect.. 2023. 8. 20. Next.js 프로젝트 - 프로젝트 세팅 Next.js 프로젝트 생성 일단 Next.js 프로젝트를 만들면서 시작한다. npx create-next-app@latest 아직 많은 회사들이 12버전을 사용하기도 하고, 13버전 Reference도 많이 없어서 12버전형태인 pages router로 프로젝트를 만들기로 했다. 설정은 따로 건들이지 않고, 필요없는 파일 삭제 후 프로젝트를 초기화했다. MUI 및 emotion사용 준비 CSS 라이브러리를 처음 써보는 것이어서 따로 세팅이 필요한지 찾아봤는데, 그냥 일반 모듈처럼 import 해와서 사용하면 돼서 편했다. 공식문서에 api 정리가 잘 되어 있어서 필요한 컴포넌트의 api문서를 확인하면서 사용하면 될 것 같다. 커스터마이징이 필요하면 sx 속성으로 style을 위와 같이 적용하면 된다. .. 2023. 7. 28. Next.js project - 서울시 문화행사 정보 이전에 React로 만들다가 말았던 프로젝트를 Next.js로 다시 만들어보기로 했다. https://riverpigeon.tistory.com/142 React로 웹페이지 만들기 - 서울시 문화행사(1) 지금 까지 배운 여러가지 내용을 바탕으로 웹페이지를 만들어 보기로 했다. React를 사용해서 다른 곳에서 정보를 받아서 웹페이지를 만들어 보려고 오픈 API를 뒤적이다가 적당한 소재를 찾았다. riverpigeon.tistory.com 만들던 과정에서 부트캠프 과제로 todolist를 만들다가 이것저것 기능을 추가하다보니 길어졌고, todolist 만들기를 끝내니 바로 그룹 프로젝트를 시작해버려서 중간에 그만둔채로 4달동안 방치되어있었다... 다시 처음부터 만들려는 이유 다시 프로젝트를 뜯어보니 약간.. 2023. 7. 22. React로 웹페이지만들기 - 서울시 문화행사(6) 단일 필터링 구현 처음에는 가볍게 하나의 필터만 구현해봤다. api문서에 따르면 서울시 문화행사의 행사가 총 16개의 분류가 있어서 이것을 바탕으로 필터링을 구현했다. 일단 select 요소에 option으로 각각의 분류를 지정하고 상태변수를 하나 만들어 value, onChange 이벤트와 함께 연동했다.(나중에 배열로 만들어서 렌더링 해야할거같다.) handleClassChage 함수에 상태 변경과 함께 분류에 맞게 fullItem을 필터링하여 배열로 만들어서 store에 있는 전역상태변수 filteredItem에 넘겨준다. 필터링하면 현재 페이지도 1페이지로 만들어준다. const handleClassChange = (event) => { setClassification(event.target.va.. 2023. 3. 13. React로 웹페이지만들기 - 서울시 문화행사(5) 일단 저번에 만든 pagination 과 api로 받은 서울시 문화행사 데이터를 연동해서 나열해보기로 했다. store로부터 전체 데이터(fullItem)과 현재페이지(currentPage), 한페이지당 item개수(limitItems) 변수를 전달받아서 한 페이지당 6개의 item이 렌더링 될 수 있도록 코드를 작성했다. currentPage와 연계해서 index를 설정하는데 알고리즘 문제푸는 기분이었다.. // itemBox.js const ItemBox = () => { const { fullItem } = useSelector((state) => state.fullItem); const { currentPage, limitItems } = useSelector((state) => state.cur.. 2023. 3. 11. React로 웹페이지 만들기 - 서울시 문화행사(4) Pagination 버튼 구현 앞에서 상태를 저장할 store를 만들고 상태를 꺼내와서 쓰는 것을 적용시켜보았는데 이번에는 상태를 사용하면서 이벤트가 일어났을 때 액션 객체를 보내서 상태를 변경시키는 연습겸 구현하는 작업을 진행하였다. 현재 페이지 상태를 만들고 현재 페이지 상태를 변경시키는 Reducer 를 만들고 Pagination 버튼을 구현해 보았다. State, Reducer 일단 createSlice 메서드로 현재 페이지 상태와 reducer를 만들어 보았다. // itemSlice.js export const currentPageSlice = createSlice({ name: "currentPage", initialState: { value: 1 }, reducers: { prevPage:.. 2023. 3. 6. 이전 1 2 다음
