본문 바로가기

nuxtjs5

[Nuxtjs] Plugins의 inject를 쓰는 이유(feat. chatGPT에 물어봤어요.)

Nuxt.js에서 "inject" 플러그인은 애플리케이션 컨텍스트에 변수를 주입하여 애플리케이션 전체에서 변수를 전역적으로 사용할 수 있도록 하는 데 사용됩니다. 컨텍스트는 애플리케이션의 모든 구성 요소에 전달되는 개체이며 수명 주기 후크, 구성 요소 및 애플리케이션의 다른 부분에서 context 매개 변수를 사용하여 액세스할 수 있습니다. 이것은 다음과 같은 다양한 목적에 유용할 수 있습니다. 그래서 사용하면 좋은 점은? 공통 데이터 공유: "inject" 플러그인을 사용하여 애플리케이션 전체에서 API의 기본 URL과 같은 공통 데이터를 저장하고 공유할 수 있습니다. 서비스 주입: "inject" 플러그인을 사용하여 로깅 서비스와 같은 서비스를 애플리케이션에 주입하여 구성 요소에서 쉽게 액세스하고 재.. 2023. 2. 4.

[AWS] Amazon Elastic Container Registry(Amazon ECR)

난 오늘 ECR을 처음 알았다. AWS의 도커 정도로 생각하고 있다. 문서를 보니, ECR에 컨테이너 이미지만 푸시하면 되는 것 같다. ECR에 컨테이너 이미지를 올리고, 컨테이너를 실행하고, Amazon EC2의 요청을 받을 수 있도록 설정하면, EC2로 들어오는 요청을 받아서, 웹을 응답해줄 수 있는 듯 하다. 나 같은 경우, Nuxtjs의 웹 애플리케이션을 S3에 빌드 파일을 올려서 사용하고 있는데, 팀에서 ECR을 도입하였다. NUxtjs를 컨테이너 이미지 파일로 만들어 ECR에 업로드하고, ECR과 EC2를 연결했다. 그리고, EC2의 요청을 CloudFront가 받도록 하였고, CloudFront는 Route53에의해서, 특정 도메인 요청에 의해서 호출되게 해놨다. 좀 더, ECR을 파보면, .. 2022. 9. 26.

[Nuxtjs] @vue/unit-tests 환경 만들기

간신히 해냈다. nuxt 프레임워크를 사용해서, @nuxt/unit-tests를 사용해야 할 것 같지만, 공식 문서에 내용이 부족하고, 레퍼런스가 부족하여, @vue/test-utils를 사용하였다. (nuxt.js의 공식 문서는 빠진 부분이 정말 많은 것을 매번 기능을 추가하면서 느끼는 부분이다. 정말 짜증나게 시간을 잡아먹게 된다.) 테스트 코드 실행 성공 방법 참고: https://test-utils.nuxtjs.org/setup 참고: https://heropy.blog/2020/05/20/vue-test-with-jest/ 1. 설치 @vue/test-utils로 작업했다. @babel-core: 7 버전 이상을 사용하라. yarn add --dev @vue/test-utils@1.2.1 추가 .. 2022. 7. 13.

[nuxtjs + service worker] 구현 방법

nuxt/pwa: https://pwa.nuxtjs.org/ OneSignal Module: https://github.com/nuxt-community/onesignal-module nuxt/pwa 기능 오프라인 캐싱에 대해서 service worker를 등록하게 해준다. manifest.json 파일을 자동으로 생성해 준다. 검색 엔진 최적화에 친근하게 meta data를 추가할 수 있다. 앱 아이콘을 다른 크기로 자동으로 만들어 준다. OneSignal을 사용해서 푸시 알림을 사용 가능 OneSignal Module 웹 사이트와 모바일 애플리케이션을 위한 notification service를 푸시하는데 사용된다. 2022. 5. 16.

[nuxtjs] fetch

두 가지 경우에 호출되어 실행되는 훅 - 서버 사이드 렌더링을 위해 서버에서 화면을 구성할 때, - 브라우저에서 URL 주소 변경으로 페이지를 이동할 때 fetch 실행 시점 created() 훅 -> fetch() 훅 -> mounted() Nuxt lifecycle 참고 https://nuxtjs.org/docs/concepts/nuxt-lifecycle/ 2022. 4. 21.

티스토리툴바