개발 이야기9 [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. [고민] 주니어 개발자의 고민: 같은 내용, 다른 코드 주니어 개발자의 고민: 같은 내용, 다른 코드 좋은 코드란 무엇일까에 대한 고민 고민의 시작 좋은 코드란 무엇일까? 개발 공부를 시작한 이후로 늘 하게 되는 고민이다. 개발이라는 분야에 처음 들어왔을 때는 단순히 '개발자가 되는 것'이 목표였는데, 개발자가 되고 난 후에는 '좋은 코드를 짜는 개발자가 되는 것'이 목표가 되었다. 시간이 흐르고 연차가 차면 무조건 좋은 코드를 짤 수 있게 될까? 꼭 그렇지만은 않을 것 같다😢 매일 의미 없는 코드만 작성한다면 시간이 흘러도 개발 실력에는 발전이 없을 것 같다는 두려움이 있다. 그렇다면 어떻게 해야 의미 있는 코드를 작성할 수 있을까? 이제 막 개발 분야에 발을 들인 주니어로서 좋은 코드를 위해 어떤 연습을 해야 할지 고민이 되었다. 같은 내용, 다른 코드 .. 2023. 9. 4. [React] 반응형 디자인 직접 코드로 구현해보기 반응형 디자인 직접 코드로 구현해보기 커스텀 반응형 구현하기 웹 개발을 하던 중 문득 궁금해졌다. 반응형 디자인을 직접 만들어 보면 어떨까?! css 라이브러리 혹은 @media로 구현하던 반응형 디자인을 React 코드로 구현할 수 있을까? 직접 구현해보면 재밌을 것 같아서 찾아본 결과, useEffect를 사용하면 가능하다는 걸 알게 되었다. 🥴 # 화면 사이즈에 event 걸기 const [screenWidth, setScreenWidth] = useState(window.innerWidth); useEffect(() => { const changeScreenWidth = () => { setScreenWidth(window.innerWidth); }; window.addEventListener(".. 2023. 8. 9. [고민] 기술 블로그에는 어떤 글을 작성해야 할까 기술 블로그에는 어떤 글을 작성해야 할까 좋은 글이란 뭘까에 대한 고민 기술 블로그 시작 계기 처음 기술 블로그를 시작한 이유는 단순 공부 기록용이었다. 개발 공부를 시작한지 얼마 안 된 시점이었을 때의 나는 기본적인 개발 지식이 부족했다. 그런 의미에서 내가 공부한 내용을 노트 정리하듯 글로 기록하면 더 이해가 잘 되지 않을까? 라는 마음으로 기술 블로그를 시작하게 됐었다. 학창 시절 수업 시간에 배운 내용을 노트에 다시 정리하며 공부했던 것처럼, 공부한 내용을 나의 언어로 다시 작성해보는 것이 얼마나 도움이 되는지 알기 때문에 기술 블로그에 꾸준히 공부한 내용을 기록하는 글을 작성했었다. 또한 기술 공유의 의미도 있었다. 내가 개발 과정에서 알게 된 것, 그리고 개발하는데 필요한 기본 지식을 글로 올.. 2023. 6. 8. 이전 1 2 다음
