메로그

Vue3 Vue3 Router 의 경우, vue-router 가 아닌, vue-router@next 를 설치해주어야 합니다. yarn add vue-router@next router 폴더 밑에 index.js 를 생성합니다. 아래와 같이 기본 셋팅을 해줍니다. import { createWebHistory, createRouter } from 'vue-router' function getComponent(component) { return () => import(`../components/${component}.vue`) } const routes = [ { path: '/', name: 'Main', component: getComponent('MainComponent') }, // 404 페이지 { ..

Vue3 란 기존 Vue2 에서 버전업이된 상태, vuex, vue-router 등의 대한 버전업도 동시에 진행되어야함. Vue 에서는 기본으로 Vue3 를 지원 중. 실무에서는 아직 Vue2 를 많이 사용하고 있지만, 조금씩 추세가 Vue3 로 이동하고 있기 때문에 어느정도 스터디가 필요로 해보여 시작하였습니다. (아직 몇몇 라이브러리들이 Vue3를 제대로 지원하지 못하고 있음.) Vue2 와 Vue3 의 가장 큰 차이점은 setup 이라는 것만 알아두면 될 것 같습니다. 설치 vue3 의 경우, vite 기반의 create-vue 를 선호함. (vite 가 webpack 보다 빠르기 때문에) https://github.com/vuejs/create-vue script script setup 사용 //..

github actions 란? Github Actions는 Github에서 제공하는 CI/CD 도구입니다. 이를 이용하면 코드의 변경사항이 있을 때마다 자동으로 빌드하고 배포할 수 있습니다. 사용방법 Github 레포지토리에서 Actions 탭을 클릭합니다. "Set up a workflow yourself" 버튼을 클릭합니다. 원하는 언어와 빌드 도구를 선택합니다. .yml 파일을 수정하여 원하는 빌드 및 배포 설정을 추가합니다. 또는 루트 디렉토리에서 .github/workflows/deploy.yml 을 만듭니다. 소스 root 에서 .github/workflows 밑에 deploy.yml 파일을 만들어 줍니다. 아래와 같이 만들게 되면, 우분투, 노드 체크아웃 및 설치 => 노드모듈을 설치 =>..

oneSignal 이란? 웹, 모바일에서 푸쉬 알림 기능을 제공해주는 서비스이자 플랫폼 입니다. 서비스 워커란? 간단하게 브라우저에서 백그라운드(브라우저가 꺼져도)로 실행할 수 있도록 해주는 js 로 작성된 파일입니다. 개발자 도구에 애플리케이션에 서비스워커를 보면 브라우저에서 등록되는 서비스워커를 볼 수 있습니다. 트러블 슈팅 필자는 PWA 와 oneSignal 연동시 oneSignal 에 푸쉬알림이 오지 않고 버튼이 정상동작하지 않는 문제가 있었다. 처음에는 oneSignal 설치를 잘못한 줄 알고 재설치만 10번은 반복했는데,,, 서비스워커 문제였다. PWA 에 서비스워커와 oneSignal에 서비스워커가 서로 충돌하는 문제였고 서비스워크를 독자적으로 분리해서 별도로 등록될 수 있도록 하였다. on..

hyvor talk 이란? 하이버톡은 웹사이트와 블로그에 통합하여 방문자가 기사 및 게시물에 댓글을 남길 수 있는 댓글 플랫폼입니다. 간단하고 사용자 친화적인 댓글 시스템을 제공하여 사용자가 서로 쉽게 토론에 참여할 수 있습니다. Hyvor Talk의 일부 기능에는 실시간 알림, 사이트 소유자를 위한 중재 도구, 다국어 지원, 웹사이트 스타일에 맞게 댓글 섹션의 모양을 사용자 지정할 수 있는 기능 등이 있습니다. Hyvor Talk는 또한 모든 데이터를 유럽에 위치한 서버에 저장하고 GDPR 규정을 준수하는 등 사용자 개인정보 및 데이터 보호를 최우선으로 생각합니다. 전반적으로 독자와 소통하고 콘텐츠를 중심으로 커뮤니티를 구축하고자 하는 웹사이트 소유자에게 유용한 도구입니다. v2가 안정화 버전으로, v..

npkill npkill 명령어는 오래된 라이브러리를 찾아서 삭제할 수 있는 npm 패키지 입니다. 실행 npx npkill