본문 바로가기

study

 (80)
vue - 카카오내비 연동 웹뷰를 이용하여 프로젝트를 진행 중 네비게이션이 필요해서 카카오내비 api를 프로젝트에 반영하였다. 반영에 어려움은 없었으나 내용을 기록하고자 한다. *카카오내비를 이용하기 위해선 사용자가 카카오내비 앱을 설치하여야 한다. 1. index.html 파일에 kakao javascript sdk 추가하기 2. main.ts(main.js)에서 window객체에 kakao js key init ts를 이용한다면 main.ts 아니라면 main.js에 kakao js key를 init 한다. key는 보안 때문이라도 문자열 값을 그대로 넣는 것이 아닌 환경변수에 등록하여 사용하는 것이 좋다. // 카카오디벨로퍼에서 발급받은 js key window.Kakao.init(process.env.VUE_APP_KAKA..
Js - JSDoc 진행하던 프로젝트를 어느정도 마무리 지어 놓고나니 주석이 부족함을 느끼게 되었다. 효율적인 주석을 달기위해 구글링 결과 JSDoc에 대하여 알게 되었고 현재 프로젝트는 vue.js로 구현되어 있으며, Type Script를 사용하지 않아 타입 추론에 불편함이 존재하였다. JSDoc은 VsCode와 같은 에디터에서도 기능을 지원해준다고 하며 JSDoc을 이용하면 타입 추론도 가능해서 프로젝트에 반영 중 너무 편리한 기능인것 같아 기록하려 한다. JSDoc이란 JavaScript 소스 코드에 대한 설명을 하기 위해 사용하는 마크업 언어라고 한다. JSDoc의 주목적은 JavaScript 앱 또는 라이브러리 API를 문서화하는 것이며 모듈, 네임스페이스, 클래스, 메서드, 파라미터 등과 같은 항목을 문서화할때..
vue - watch로 object 감시(모니터링) 프로젝트 진행중 object안에 있는 값을 변경되는것을 감시해야할 일이 생겼다. 기존에 watch를 사용하던데로 작업을 진행하였으나, object를 감시하지 못하였고 이를 해결한 방법을 기술하고자 한다. - 기존에 watch를 사용하던 방법은 아래와 같다. 아래와 같은 방법으로 watch를 사용하였으나 object안에 있는 a, b 값이 변경되어도 watch는 동작하지 않았다. - 해결한 방법 구글링을 통하여 간단히 해결방법을 찾았다. 객체 속의 객체의 값에 대한 변경을 감시하기 위해서는 watch의 옵션인 deep: true를 설정하고, 변경에 관련한 데이터 처리는 handler에 기술한다고 하여 구현을 해보니 정상적으로 동작하였다. 이번 경험을 기반으로 앞으로는 잊지않고 잘 사용할 것 같다!
vue - 이미지 확대(pinch-zoom) 웹앱 프로젝트를 진행 중 이미지 확대를 구현해야했고, 나중에도 손쉽게 하기위해 이곳에 기록한다. 1. 우선 의도하지 않은 확대를 막기 위해 index.html에 아래 소스를 추가 하였다. user-scalable=no를 설정하게 되면 사용자가 화면을 확대할 수 없게 된다. 2. 이미지 확대를 위해 vue-pinch-zoom 라이브러리를 활용하였다. 2.1) vue-pinch-zoom 설치 npm i vue-pinch-zoom 2.2) 사용할 vue 파일에 import import PinchZoom from 'vue-pinch-zoom' 2.3) component에 추가 2.4) pinch-zoom 태그 사용 pinch-zoom 태그를 사용할때는 img 태그를 덮어줘 사용하면 된다. 아래 소스에 disab..
vue - 무한 스크롤 프로젝트를 진행하며 무한 스크롤 기능이 필요하여 구현하였다. 다음에도 참고하고자 이곳에 기술한다. template script data: () => ({ // 10개의 리스트를 보여주기 위한 더미 데이터 pushList: [1,2,3,4,5,6,7,8,9,10] }), methods: { handleNotificationListScroll(e) { const { scrollHeight, scrollTop, clientHeight } = e.target; const isAtTheBottom = scrollHeight === scrollTop + clientHeight; // 일정 이상 밑으로 내려오면 함수 실행 / 반복된 호출을 막기위해 1초마다 스크롤 감지 후 실행 if(isAtTheBottom) { s..
Js - 사용자의 os 가져오는 방법 프로젝트를 진행중 사용자의 OS를 가져와 OS별로 처리해줘야 할 일이 생겼다. 이를 구현한 방법을 메모해 놓으려고 한다. (match 함수를 이용하여 해결) var userOs = navigator.userAgent.replace(/ /g, '').toLowerCase() if( userOs.match(/macintosh/i) == "macintosh") { return this.$store.commit("User/setUserOs", "mac") }else if(userOs.match(/window/i) == "window") { return this.$store.commit("User/setUserOs", "window") }else if(userOs.match(/android/i) == "andro..
vue - 새로고침시 vuex데이터 초기화 방지 프로젝트를 진행중 새로고침시 vuex state데이터가 초기화 된다는것을 알게 되었다. vuex 에서 관리하는 데이터 중 초기화되면 안되는 데이터가 있기에 이를 해결하는 방법을 찾아봣으며, 이곳에 기술하려고 한다. 검색 결과 vuex-persistedstate를 사용하면 된다고한다. vuex-persistedstate는 localstorage를 이용하여 초기화를 방지해주는 vue 플러그인이라고 한다. vuex-persistedstate를 사용하기 위해선 우선 프로젝트 파일에 설치를 진행해준다. 1. vuex-persistedstate 설치 npm install --save vuex-persistedstate 2. 적용 이번 글에서는 vuex store에 전역적으로 적용하려고 한다. 당연히 적용하고 싶은 ..
vue - style 태그 scoped vue 파일에는 아래에 style 태그가 있으며, 그곳에 스타일을 적용할 수 있다. 아래 이미지와 같이 style 태그에 scoped를 넣지 않고 style을 적용시 전역적으로 style이 적용되며, 굉장히 위험하다. 전역적으로 sytle을 적용하지 않고 해당 vue 파일에서만 style을 적용하기 위해서는 scoped를 style 태그에 입력해야한다.

티스토리툴바