본문 바로가기

분류 전체보기

 (112)
[ Vue Error ] Uncaught (in promise) NavigationDuplicated 오류 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: route.push('경로')로 페이지 이동시 일어날수 있는 오류 원인 기존에 위치하고있는 경로로 라우팅하려고 할때 이런 문제가 생기는것, 현재 위치한 경로와 동일한 주소로 이동한다고 하니까 에러로 잡는것이다. 그래도 나는 해결을 봐야 했기에 아래와같이 해결했다. 해결 1. catch로 오류를 잡아서 오류를 무시 나는 그냥 이렇게 해결했지만 찾아보니 다른 방법도 있어서 아래에 정리 this.$router.push(page).catch(() => {}) 2. 경로가 현재 위치와 다른 경우에만 이동하도록 처리 현재 위치와 같은 경로에 있..
[ REACT ] 리액트 이해, 렌더링과 Virtual DOM 한동안 뷰만 사용했고, 잠깐 사용했던 리액트 공부를 다시 시작할 예정이라 구매한 책을 싹 처음부터 훑어볼예정입니다. 책보면서 정리하면서 블로그에 올리려고 합니다 : ) 리액트는 라이브러리고, 오직 뷰만 담당한다. 리액트는 프레임워크가 아니라 라이브러리고, 다른 프레임 워크가 라우팅등의 기능을 내장한 반면, 리액트는 오직 뷰만 신경 쓰는 라이브러리로 기타 기능은 라이브러리 등으로 구현해서 사용해야 한다. 그래서 원하는 라이브러리를 선택해서 사용할수 있지만 동시에 여러 라이브러리를 다루어야하는 단점이 있다. 그리고 리액트는 라이브러리기 떄문에 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있다. 컴포넌트 재사용이 가능한 API로 수많은 기능들을 내장하고 있다. 컴포넌트 하나에서 해당 컴포넌트의 생김새..
[ FrontEnd ] 웹컴포넌트와 Shadow DOM 웹 컴포넌트 정리하다가 신기한 부분을 발견해서 정리해봅니다 : ) Shadow DOM이라고 들어보기는 했지만 감히 찾아볼 생각은 안하고 있었는데, 우연한 기회에 스터디 하다가 찾은 내용으로 ! 모든 홈페이지에서 확인해볼수 있는 방법과, 간단한 실습으로 실제로 Shadow DOM을 삽입하는 방법을 설명하고자 합니다. 웹 컴포넌트 웹 컴포넌트는 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로이 정한 규격이다. 웹 표준을 기반으로 구축되었으며, 최신 브라우저 및 모든 JavaScript 라이브러리, 프레임워크에서도 사용할 수 있다. 따라서 웹 컴포넌트를 이용하여 코드를 작성하면 Vue나 React와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다. Sh..
promise를 이용한 api 순차 반복 요청 보내기 (with - vue ,axios) for문으로 api를 호출 하는 경우 순차적으로 반복 호출하는 경우를 적용해야하는 경우가 생겼다. api호출이 잦아 트래픽이 높아지면 서버가 뻗어버리는 상황… 😅..? 1초 간격으로 api 반복 요청 처음에는 setTimeout으로 1초 간격을 두고 요청을 보냈다. timeRequest(){ const arr = ['첫번째','두번째','세번째','네번째'] arr.forEach((titem, index) => { setTimeout(function() { this.getRes(titem) }, 1000 * (index + 1)) }) } getRes(){ // api 호출 함수 this.axios.post("api주소",{ num }) . . } arr를 순회하면서 그 값을 순차적으로 api의 body..
[ DataBase ] RDB, RDBMS, SQL, NOSQL 간단 개념정리 데이터베이스 종류인 RDB, RDBMS, SQL, NOSQL에 대한 간단한 개념 정리!! 일단 자세한 설명전에 간단하게 용어들의 관계를 정의하자면 아래와 같습니다. 🅐RDB(관계형 데이터베이스)를 🅑RDBMS(데이터베이스를 관리)로 생성하고 수정하고 관리한다. 🅒SQL은 RDBMS를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이고, 🅓NOSQL(비관계형 데이터베이스)는 RDB 형태의 관계형 데이터베이스가 아닌 다른 형태의 데이터 저장방식. RDBMS가 클라이언트/서버 환경에 맞는 데이터 저장기술이라면, NOSQL은 클라우드 환경에 맞는 저장 기술 아래에 더 자세한 설명을 정리해두었습니다 : ) 🅐 RDB Relational Database RDB는 관계형 데이터 모델을 기초로 두고 모든 데이터를 2..
[ html2canvas ] html을 이미지로 클립보드에 복사하기 ( with Vue.js ) html로 작성된 특정 영역을 클립보드에 이미지로 복사해야 하는 상황에 사용! html2canvas 설치 // Install NPM npm install --save html2canvas // Install Yarn yarn add html2canvas https://html2canvas.hertzen.com/ html2canvas 사용하기 1. 사용할 페이지에 import 하기 import html2canvas from "html2canvas" 2. 캡쳐할 html 가장 바깥쪽 element 에 ref 지정 .. 3. canvas를 캡쳐하는 이벤트를 실행할 버튼을 만든다 ( 필요에 따라 해당하는 이벤트를 만들면된당 ) 4. copyChartImg 메소드 작성 copyChartImg() { html2ca..
[ Vue ] 페이지별 메타태그 | vue-meta 사용법 vue는 SPA이다! 한개의 html파일에 여러 페이지들이 존재하는것처럼 소스코드가 바꿔끼워지는것이기 때문에 메타태그 설정이 조금 까다롭다. 메타 태그를 각 페이지의 html파일의 head부분에 각 페이지에 맞도록 다르게 입력해주어야 하는데, 그래서 SSR방식인 Nuxt를 사용하는 방법도 있는데 이제와서 바꾸기엔 너무 먼 길이기에 vue-meta라는 라이브러리를 사용해 메타태그 설정 하는 법을 정리해본다. vue-meta 설치 yarn add vue-meta npm install vue-meta --save vue-meta 설정 ( main.js ) import Vue from 'vue' // VueMeta import Meta from 'vue-meta' Vue.use(Meta, { attribute:..
[ Git ] stash로 임시저장하기 + 특정 파일만 임시 저장하기 git stash 현재 stage에 있는 파일들을 임시적으로 저장 해 둘 수 있다. stash 관련 명령어 저장하기 git stash 저장하기 - save git stash save "description" description 추가 ex) git stash save '설명추가' 목록보기 - list git stash list 적용하기 1 - apply 적용 후에도 리스트에 유지 git stash apply 가장 최근의 stash내용이 적용된다 git stash apply stash@{숫자} 원하는 저장이력 적용 ex) git stash apply 2 적용하기 2 - pop 적용 후 리스트에서 삭제 git stash pop 가장 최근의 stash내용이 적용되고 삭제된다 git stash pop stash..
[IOS Safari] 아이폰 사파리에서 vh로 생기는 스크롤 해결하기 홈페이지 수정을하고 모바일에서 테스트 하다가 발견한것 100vh를 줬는데 PC에서 모바일 사이즈로 테스트 할땐 문제없이 잘 나오더니 모바일(사파리) 에서 켰더니 쓸데없는 스크롤이 생겨버린것!! 검색하다보니 아이폰 사파리 vh때문인데 아까운 내시간... 왜 매번 아이폰에서만 자꾸 이런일이 일어나지.......??? vh = viewheight 1vh는 현재 화면을 보고있는 디바이스 높이값의 100분의 1의이고, height를 100vh로 지정하면 현재 보이는 화면을 꽉 채운 값을 보여준다 스크롤이 생긴 이유 어쨋든 문제가 뭐냐면 보통 vh라고 하면 상단바, 하단바를 제외한 화면자체 사이즈를 생각하는데, 모바일 사파리는 vh를 진짜 말그대로 화면 사이즈 아래사진의 네모(상단바, 하단바) 영역까지 다 포함한 ..
배포시 console 안보이게 하기 ( with . Vue.js ) 개발하면서 console찍어가면서 값 확인하고, 테스트 하고 삭제 하는 경우는 수두룩하다 특정 console들은 삭제하지 않고 확인용으로 두는 경우들도 있는데, local 환경에서는 아무래도 상관없지만 배포하고 나서 운영에서는 console이 안보이도록 하는 환경을 구축하는 경우를 정리했다. transform-remove-console 사용 1. transform-remove-console 설치 npm install babel-plugin-transform-remove-console --save-dev 2. package.json script > build > --mode production 추가 { "scripts": { "serve": "vue-cli-service serve", "build": "v..

티스토리툴바