개발 이야기/직접 해보기7 [JavaScript] React에서 Pagination 라이브러리 사용해보기 React에서 Pagination 라이브러리 사용해보기 Pagination 라이브러리: item-pagination 페이지네이션을 간단하게 구현하고 싶어서 라이브러리를 만들었다🤩 item-pagination이라는 라이브러리이고, 객체 배열을 페이지로 나누어주는 함수를 제공한다. 개발 공부를 처음 시작했을 때 페이지네이션 구현을 참 어려워했던 기억이 있다. 그때의 기억을 살려 나처럼 페이지네이션을 어려워하는 누군가에게 조금이라도 도움이 되기 위해 라이브러리를 제작해보았다. NPM: https://www.npmjs.com/package/item-pagination 문서: https://item-pagination.vercel.app/ 사용 방법 1. 설치 npm, yarn, 혹은 pnpm을 이용하여 설치를 .. 2024. 1. 17. [JavaScript] CommonJS와 ESM을 모두 지원하는 React 라이브러리 개발 (Feat. 모듈이란 무엇인가) CommonJS와 ESM을 모두 지원하는 React 라이브러리 개발 모듈이란 무엇인가 프론트엔드 개발을 하다 보면 모듈(module)이라는 개념을 마주하게 된다. script 태그에 type="module"을 입력하기도 하고, React 프로젝트에서 갑자기 발생한 에러를 해결하기 위해 package.json에 module을 설정해주기도 한다. 그렇다면 모듈이 무엇일까? 프론트엔드 개발에서 모듈이란 무엇이고, 이걸 어떻게 이용할 수 있을까? 이번 글에서는 자바스크립트의 모듈 시스템인 CommonJS와 ESModule을 알아보고, 실제로 이 개념이 적용된 라이브러리를 배포해보려고 한다. 그럼 시작! 😎 1. 모듈(module)이란 무엇일까? 우선 기본으로 돌아가서, 모듈(module)이라는 개념을 알아보자... 2023. 12. 9. [CSS] 마우스를 올리면 움직이는 3D 책 만들기 마우스를 올리면 움직이는 3D 책 만들기 인터랙티브 웹과 어울리는 컴포넌트 3D 컴포넌트 Next.js 공식문서를 읽던 중, 3D 컴포넌트를 발견하였다. 마우스를 올리면 책이 움직인다. 이 컴포넌트를 보자마자 어떻게 구현한 것인지 궁금해져 바로 개발자도구를 켜서 이 페이지의 HTML, CSS를 구경해보았다. CSS 부분을 읽어보니 프레임워크나 라이브러리 없이 순수 CSS만을 이용해서 구현했다는 것을 알 수 있었다. 충분히 간단하게 구현해볼 수 있을 것 같다는 생각이 들었고, 바로 vscode를 켜서 만들어 보았다. 완성된 모습은 이렇게 생겼다. 라이브러리 없이 단순 CSS만으로 만들기 때문에 코드도 간단하고 자바스크립트 환경 어디서든 사용할 수 있다. 구현하는 방법 HTML 제목을 입력하세요 부제목을 입.. 2023. 11. 20. [React] 반응형 디자인 직접 코드로 구현해보기 반응형 디자인 직접 코드로 구현해보기 커스텀 반응형 구현하기 웹 개발을 하던 중 문득 궁금해졌다. 반응형 디자인을 직접 만들어 보면 어떨까?! css 라이브러리 혹은 @media로 구현하던 반응형 디자인을 React 코드로 구현할 수 있을까? 직접 구현해보면 재밌을 것 같아서 찾아본 결과, useEffect를 사용하면 가능하다는 걸 알게 되었다. 🥴 # 화면 사이즈에 event 걸기 const [screenWidth, setScreenWidth] = useState(window.innerWidth); useEffect(() => { const changeScreenWidth = () => { setScreenWidth(window.innerWidth); }; window.addEventListener(".. 2023. 8. 9. [React Query] useQuery로 검색 기능을 만들던 중 마주친 문제 useQuery로 검색 기능 만들기 # 문제 상황 검색 기능을 구현하기 위해 useEffect와 if 조건문을 사용하였다. input 태그로 검색어(searchText)를 입력하면 isSearching 변수가 true가 되고, isSearching가 true일 때 백엔드에 데이터를 요청하는 함수가 실행된다. 이를 구현하기 위해 사용한 코드는 다음과 같다. const [submitCheck, setSubmitCheck] = useState(true); const getItems = async (page: number) => { try { const response = await fetch(`/api/items?page=${page}`); const result = await response.json(); .. 2023. 5. 15. [React] Pagination + 검색 기능 로직 직접 만들어보기 Pagination + 검색 기능 만들기 Pagination 구현을 위해 고민한 기록 +) 2024. 01. 17. 업데이트 Pagination 라이브러리를 배포하였습니다. 필요하신 분들은 사용해보세요! 😀 https://inthedev.tistory.com/104 여러 아이템을 페이지로 구분하는 페이지네이션 기능을 구현하기 위해 많은 고민을 하였다. 아이템을 12개씩 한 페이지로 하고 싶어서 아이템에 index를 부여하여 아이템 개수를 계산했다. 0~11번 아이템은 1페이지, 12~23번 아이템은 2페이지, ... 이렇게 코드를 작성했다. 여기까지는 별 문제 없었으나, 문제는 검색 기능과 같이 쓸 때 있었다. 특정 키워드로 검색을 하고 나면 아이템의 개수를 index로 구분할 수 없었다. 아이템을 특정.. 2023. 2. 18. 이전 1 2 다음
