본문 바로가기

전체 글

 (262)
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 태그에 입력해야한다.
vue - 조건에 따른 style class 주기 프로젝트를 진행중 데이터에 따라 스타일을 다르게 줘야할 경우가 있었다. 나중에도 참고하기 위하여 기록을한다. 예를들어 아래 이미지와 같은 경우이다. 두 리스트는 같은 컴포넌트이며, 데이터가 방문알림 or 입찰알림에 따라 텍스트 색이 달라야했다. 이를 구현하는 방법은 검색결과 생각보다 간단하였다. 아래와같이 class에 조건을 주면 간단히 구현되었다. noticeName이라는 변수의 값에 따라 다른 스타일을 적용하는 것이다.
Js - var, let, const의 차이점 1. var - var는 변수 선언에 있어 큰 단점을 가지고 있다. var name = 'sik' console.log(name) // sik var name = 'ms' console.log(name) // ms 위 코드는 같은 name이라는 변수 명을 가지고 한번 더 선언을 하였음에도 각자 다른값이 출력된다. 간단한 코드에서는 유연한 변수 선언을 통하여 편리할 수 있으나, 코드가 복잡해 진다면 변수를 파악하기 힘들것이다. 이를 보완하기 위해 변수를 선언하는 방식이 let과 const이다. 2. let - let을 통하여 변수를 선언시 이미 선언되 있는 변수가 있으면 이미 선언되있다는 오류메세지가 출력된다.(재선언 불가) let name = 'sik' console.log(name) // sik let..
Vue - 컴포넌트($emit 자식 -> 부모로 데이터 전달하기) Vue.js를 공부하면서 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야할 경우가 생겼다. $emit을 통하여 해결하였으며 이를 기록하고자 한다. 1. 자식 컴포넌트 - $emit을 사용하여 부모컴포넌트에게 값을 전달한다. - $emit의 파라미터로는 (어떤이름으로 부모에게 보내줄지, 보내줄 값) 이다. methods: { // 버튼 클릭시 부모 컴포넌트에게 false를 전달하는 함수이다. DialogNoBtn () { // 파라미턴는 (부모에게 보내줄 이름, 보내줄 값) this.$emit('dialog-no-btn', false) }, }, 2. 부모 컴포넌트 - 자식 컴포넌트에서 보내준 이름을 가져온다. - 받아올 method => dialogNoBtn methods: { // 다이얼로그에서 아..

티스토리툴바