반응형 분류 전체보기703 [VueJS] plugin 활용하여 Infinite scroll 구현하기 Infinite scroll 일명 무한스크롤이라고도 하는데, 보통 무한스크롤을 구현하는 데 있어서 onScroll, Intersection Observer API를 사용하여 만들고는 한다. 하지만 이왕 VueJS를 사용하는김에 사용하기 유용한 플러그인이 있을 거 같아서 플러그인 기반으로 무한스크롤을 만들어 보고자 한다. vue-infinite-loading VS vue-infinite-scroll vuejs에서 무한 스크롤 관련 플러그인을 찾아보면 일반적으로 저렇게 두 개의 플러그인이 나온다. 이왕 선택하는 거 더 좋은 거 선택하고 싶어서 이것저것 비교해 보았다. vue-infinite-loading / vue-infinite-scroll 사용방법 둘의 사용방법은 그렇게 어려운 거 없이 매우 간단해 보인.. 2023. 1. 6. [MacOS] Mac에서 백쿼터(`) 사용하기 Mac에는 충격적이게도 백쿼터(`)가 존재하지 않지만 역시 조합해서 사용하면 뭐든 나온다. ⌥(option) + \(₩) 를 입력하면 백쿼터가 입력된다. 2023. 1. 5. [GIT] Fork 없이 Pull Request 사용하기 왜 pull request를 위해 fork를 먼저 해야 하는 걸까? 왜 Pull Request를 검색하면 Fork를 우선적으로 하는 내용들만 나올까? 우선 공식문서에서 GitHub 프로젝트에 기여하는 방법에 대해 설명한 글을 읽어보자. 6.2 GitHub - GitHub 프로젝트에 기여하기 Git - GitHub 프로젝트에 기여하기 Pull Request는 보통 공개 프로젝트에서 사용한다. 기여자는 수정하고 나서 원 저장소에 Pull Request를 연다. 개발 초창기에는 프로젝트 내부에서도 많이 사용한다. 이미 Pull Request를 열어 놓은 토픽 git-scm.com 뭐 지금 당장 읽을 필요는 없어도 나중에 한 번쯤은 읽어보길 권한다. 결론부터 말하자면 저장소에 대한 접근 권한이 없는 경우 for.. 2023. 1. 4. [Node.js] zsh: bad CPU type in executable: node 이 에러는 사실 Window에서도 발생하는지는 모르겠으나. MacBook M1 에서 발생한 오류이다. Brew를 사용하여 nvm을 설치하고나서 node 버전을 관리해줄 경우 당장은 에러가 발생하지 않을 수 있지만 어느때라도 "zsh: bad CPU type in executable: node" 라는 에러가 발생할 수 있다. 다행히 stackoverflow를 통해 아주 간단하게 해결할 수 있었다. softwareupdate --install-rosetta 위 명령어를 입력만 해주면 정상적으로 작동한다. 이 해결방법 역시 NVM 문서에 있다는거 보니 Mac M1에서 발생하는 에러로 인지는 하고 있는 모양이다. 참고: https://stackoverflow.com/questions/71122488/zsh-ba.. 2023. 1. 4. [VueJS] watch 와 watchEffect 비교 vue3 공식문서를 기반으로 watch와 watchEffect를 비교해보고자 한다. 사실 이 게시글을 작성하기 이전에 [VueJS] computed와 watch 속성 비교라는 게시글을 작성한 적이 있는데, 여기서 watch를 다룰 때 지금 보다 공식문서가 좀 허접(?) 했던 시절에 작성하다 보니 꼼꼼하게 담아내질 못했던 기억이 있다. 마침 이번에 vue3에서 새롭게 생긴 watchEffect와 같이 비교할 겸 정리하려고 한다. watch() watch 속성은 "특정 데이터"의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다. watch라는 속성은 vue2에서부터 계속해서 존재했던 속성이기에 익숙하지 좀 더 개선되었으며, options api, composition api 어느 곳에서나 사용이 가.. 2022. 12. 26. [Node.js] NPM을 사용하여 특정버전 설치하기 글을 작성하다 보니 npm과 node를 vscode라는 카테고리에 집어넣는 게 맞나 싶다. 글이 좀 쌓이다 보면 나중에 카테고리 정리나 한번 해야겠다 NPM 라이브러리 특정 버전설치 보통 일반적으로 npm을 사용하다보면 최신버전을 다운로드하고는 하는데, 기존에 받았던 버전을 최신버전으로 업데이트하거나 할때 라이브러리명 뒤에 @latest라고 적어준 것을 본 적이 있을 것이다. 여기서 사용한 @latest역시 최신버전을 의미하기에 다시 말하면 latest대신 특정 버전명을 입력만 해주면 해당 버전으로 설치가 가능하다는 것이다. npm install 라이브러리명@버전명 이런식으로 간단하게 사용 가능하다. npm install vue@2.7.10 익숙하지 않아서 그렇지 자주 사용하면 굳이 따로 정리까지는 필요.. 2022. 12. 21. [NuxtJS] Nuxt.js 시작하기 (ft. nuxt2/nuxt bridge/nuxt3) Nuxt 시작하기 이번 게시글에서는 Nuxt를 시작해 볼 것인데, nuxt2/ nuxt bridge/ nuxt3 프로젝트를 각각 생성해보고 실행해 볼까 한다. 당연히 공식문서 기반으로 따라 해볼까 한다. Nuxt2 Nuxt2는 create-nuxt-app을 사용하여 간편하게 프로젝트를 생성할 수 있다. yarn/npx/npm에 따라 명령어가 조금씩 달라지기는 한다. yarn create nuxt-app npx create-nuxt-app npm init nuxt-app 해당 명령어를 입력해보면 하나하나 생각보다 많은 설정을 선택해야 한다. 그래도 크게 어려운 거는 없으니 본인 환경에 맞게 설정해주면 된다. 만약 처음부터 완벽하게 할 거야!라고 생각한다면 하나하나 설명해주는 친절한 블로그가 있길래 링크를 .. 2022. 12. 20. [NuxtJS] error:0308010C:digital envelope routines::unsupported Nuxt 2 실행 실패 npm init nuxt-app을 통해 프로젝트를 생성하고 npm run dev를 하는 순가 에러가 발생하였다. 할 때마다 에러가 발생하니 항상 새로운 기분이다. Nuxt2를 빌드할 때 나와 똑같이 에러가 발생하는 경우를 깃허브 이슈에서 발견할 수 있었다. https://github.com/nuxt/nuxt.js/issues/10779 Nuxt2 build fail on node18 Error: error:0308010C:digital envelope routines::unsupported · Issue #10779 · nuxt/nuxt.js Versions nuxt: 2.15.8 node: 18.12.0 Reproduction when 2022/10/25 nodejs relase.. 2022. 12. 20. [Node.js] Node와 NPM 버전 확인 및 최신 버전 업데이트 오랜만에 공부 시작 겸 블로그를 작성한다. 그동안 시간이 너무 없었지만 틈내서 작성한 게 12월 1일인가 그렇다. 마침 급한일은 다 처리를 했으며, 다시 공부할 겸 가볍게 nodejs와 npm 버전 업데이트에 대해 작성하고자 한다. 버전 업데이트 관련한 건 이미 널리 퍼져있는 글들이 많기 때문에 매번 찾기도 귀찮고 완전히 익힐 겸 정리하는 것이다. Node 최신버전으로 업데이트 하기 1. 명령어을 사용 해 Node 버전 업데이트 우선 node를 최신버전으로 업데이트 하기 이전에 현재 버전을 살펴보자. 그래도 나름 v16.14.2 정도면 높은 버전을 사용하고 있다고 할 수 있을 듯하다. 그러고 나서 npm에 남아있는 캐시를 우선적으로 삭제해줘야 한다. 캐시를 지워주지 않는다면 최신 버전 업데이트를 할 때 .. 2022. 12. 20. 이전 1 ··· 3 4 5 6 7 8 9 ··· 79 다음 반응형
