반응형 VueJS57 [NuxtJS] 빌드/운영 배포 시 console.log 제거하기 NuxtJS 빌드 시 console 제거하기 개발을 하다 보면 console.log를 쓰면서 확인을 해야 하는 경우가 많은데, 배포를 하면서 미처 지우지 못한 console.log의 잔해들이 남을 수 있다. 그럴 때 사용할 수 있는 두 가지 방법에 대해 기록해 둔다. 아 물론 이 방법들이 NuxtJS뿐만 아니라 다른 곳에서도 사용이 가능할 것으로 보이니 알아두면 좋을 것 같다. 1.babel-plugin-transform-remove-console babel의 플러그인을 사용하여 console을 지우는 방법이 존재한다. npm install --save-dev babel-plugin-transform-remove-console yarn add --dev babel-plugin-transform-remov.. 2023. 1. 14. [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. [VueJS] watch 와 watchEffect 비교 vue3 공식문서를 기반으로 watch와 watchEffect를 비교해보고자 한다. 사실 이 게시글을 작성하기 이전에 [VueJS] computed와 watch 속성 비교라는 게시글을 작성한 적이 있는데, 여기서 watch를 다룰 때 지금 보다 공식문서가 좀 허접(?) 했던 시절에 작성하다 보니 꼼꼼하게 담아내질 못했던 기억이 있다. 마침 이번에 vue3에서 새롭게 생긴 watchEffect와 같이 비교할 겸 정리하려고 한다. watch() watch 속성은 "특정 데이터"의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다. watch라는 속성은 vue2에서부터 계속해서 존재했던 속성이기에 익숙하지 좀 더 개선되었으며, options api, composition api 어느 곳에서나 사용이 가.. 2022. 12. 26. [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. [NuxtJS] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. Nuxt 3 실행 실패 Nuxt를 버전별로 실행을 해보려다가 우선 Nuxt 3를 공식문서를 따라 실행을 시도해 보았다. 프로젝트 생성부터해서 실행까지에 대해서는 따로 정리를 할 것이며, 이번에 작성할 게시글은 공식문서를 따라 프로젝트를 생성하고 실행을 하였는데 에러가 발생한 부분이다. 발생한 에러는 다음과 같다. Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. Nuxt 3는 아무래도 국내에서는 아직 많이 사용하지 않는 프레임워크이기 때문에 한글로된.. 2022. 12. 1. [NuxtJS] Nuxt.js에 대하여 (ft. Nuxt 3 안정화) Nuxt란? Nuxt는 VueJS로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크이다. 좀 더 들어가 보면 React의 Next.js처럼 VueJS의 SSR(서버사이드 렌더링) 애플리케이션을 위한 프레임워크라고 생각하면 된다. 만약 CSR과 SSR의 차이점에 대해 잘 모르겠다면 숙지하고 있는 것을 추천한다. Nuxt의 장점 Nuxt는 기본적으로 Vue + Library를 포함하고 있으며, VueJS를 사용할 때 하나하나 설치하고 설정해줘야 했던 부분들이 자동화되어 따로 설치하거나 설정을 할 필요가 없어져 초기 프로젝트 설정 비용 감소와 생상성을 향상시켜주는 장점을 가지고 있다. 그리고 당연하게도 SSR만의 장점들을 가지고 있는데, Nuxt는 흔하게 알고 있는 SSR방식이 아니라 유니버설(Universa.. 2022. 11. 30. [VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기 Programmatic Navigation 프로그래밍 방식 내비게이션은 를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 있는 방식이다. 개발을 하는 동안에 만 사용하면 좋겠지만 그렇지 않은 경우도 상당히 많기 때문에 아마 Vue Router를 사용하게 된다면 이러한 방식을 사용하게 될 것이다. 만약 VueJS가 Options API를 사용하고 있다면 Vue 인스턴스 내부에서 this.$router를 통해 접근할 수 있겠지만, 요즘은 Composition API를 많이 사용하기 때문에 Composition API의 경우에는 useRouter()를 사용해서 접근한다. (애초에 setup단계에서는 this접근이 불가능하기 때문에 Comp.. 2022. 11. 8. [VueJS] v-memo : 특정 요소가 변경될 때만 렌더링 하기 (메모이제이션) v-memo VueJS의 전체적인 버전들이 3.x로 변경되어가는 현재 나중을 위해 변화에 적응해보고자 시간이 날 때마다 공식문서를 뒤적거리던 와중에 v-memo라는 게 Deriectives의 하나로 추가되어있는 것을 발견했다. 굉장히 흥미로운 지시어이지만 안타깝게도 현재 사용하는 Vue 버전이 3.2이상이 아니라면 사용할 수 없다. 내가 왜 v-memo라는 지시어를 흥미롭게 보냐면 React에서 React.memo, useMemo, useCallback라는 리렌더링을 방지하기 위해 메모이제이션을 사용하는 훅들이 존재했기 때문이다. 여기서 메모이제이션을 사용하게 되면 동일한 입력이 주어졌을 경우 재평가하지 않고 함수가 동일한 값을 반환하도록 하여 성능을 위해 프로그램을 최적화하는 기술이라고 할 수 있다. .. 2022. 11. 5. 이전 1 2 3 4 5 ··· 7 다음 반응형
