본문 바로가기
반응형

분류 전체보기706

[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.
[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.
[SCSS] 반복문 (@for / @each / @while) @for @for는 through를 사용하는 방법과 to를 사용하는 방법으로 나뉜다. through 방식은 마지막 종료 숫자를 포함하며, to의 경우에는 마지막 종료 숫자를 포함하지 않는다. $base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } @for $i from 1 to 3 { li:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } to css /* use through */ ul:nth-child(3n + 1) { background-colo.. 2022. 11. 3.
[VueJS] 뷰 라우터(Vue Router) 라이프사이클(LifeCycle) (ft. Navigation Guards) Vue Router LifeCycle 뷰 라우터 라이프사이클 이라고는 했지만 결국에는 뷰 라우터의 내비게이션 가드(Navigation Guards)의 흐름이라고 생각하면 된다. 공식문서에서 안내하고 있는 전체적인 흐름은 다음과 같다. Navigation triggered. Call beforeRouteLeave guards in deactivated components. Call global beforeEach guards. Call beforeRouteUpdate guards in reused components. Call beforeEnter in route configs. Resolve async route components. Call beforeRouteEnter in activated comp.. 2022. 11. 3.
반응형
TOP

티스토리툴바