사진 찍는 개발자의 365일

프로젝트를 진행하던 중, 우리가 알고 있는 식상한 기본 스크롤이 아닌, 마음대로 스타일링이 가능한 스크롤을 제작하게될 일이 생겼다. 스크롤에는 대표적인 라이브러리에는 perfect-scrollbar, vuescroll 정도가 있을 것 같고, 뷰 전용 라이브러리가 아닌 자바스크립트 라이브러리로는 iscroll 도 모멘텀스크롤을 위해 자주 사용하는 것 같았다. 여러 라이브러리들을 갖다 붙여봤지만 우리가 사용하는 vue는 vue 3였고... 대부분 뷰 전용 라이브러리들이 vue 2에 모여있는데... 우리는 vue 3를 사용하고 있었기에 마땅한 스크롤바를 찾을만한게 없었다. (제발 vue2 꾸준히 업데이트해줘요...) 아무튼 결국 스크롤을 내가 따로 만들게 되었다. 거두절미하고 대략적인 모습은 이렇게 생겼다. ..

프로그래밍을 하다보면 배열을 만나게된다. 진짜... 처음 보았을 땐 죽여버리고 싶을 정도로 짜증나는 녀석이었는데, 쓰다보니까 이 친구가 없었으면 어쨌을까 싶은 고마운 친구였다. 아무튼 이 배열이란건 프로그래밍을 하게 되면 어쨋든 배워야 되는 녀석인데, 오늘은 이 배열을 편하게 나열해주는 v-for에 대해서 이야기 해 보겠다. 그 동안 배열의 나열은 내가 배웠던 자바를 기준으로 이야기하자면 ArrayList list = new ArrayList(); for(int i=0; i

우리가 자주 보는 ui중, 업로드 중에 몇 퍼센트가 업로드가 되었는지 확인할 수 있는 ui가 있다. 진행바라고도 하는데, 해당 부분을 하기 위해 부단히도 노력했다. 처음에는 통신API를 따로 폴더를 만들어서 관리했었다. 하지만 통신 API를 따로 만들어 둘 경우, onUploadProgress에서 퍼센트를 가져와서 값을 바인딩하는 과정에서 문제가 생겼다. 아마 api폴더의 index.js로 가면서 컨텍스트가 사라져 버려서 그런게 아닐까하는 생각이 있는데, 아무튼 그래서 전전긍긍하다가 api를 전부 vuex의 store로 옮기기로 했다. 이게 사이즈가 큰 프로젝트라면 다른 방법을 찾아봐야겠지만, 우선 통신관련 api는 3개 밖에 없었기에, api를 store의 actions에서 관리하고, 진행도인 퍼센트를..

요즘 계속해서 일이 끝난 후 한~두시간씩 캡틴판교님의 강의를 보면서 vue.js를 익히고 있다. 비동기 처리, Promise, this 등 자바하고는 다른 개념이 많아서 처음엔 이해 안가는 부분들이 많았는데 듣다보니 이해가 되는 부분들이 생기는게 신기하다. 우선 이 글은 캡틴판교님의 인프런 강의 'Vue.js 완벽 가이드'를 참고로 했다. 사용하는 코드들도 해당 코드들이고, 티스토리에 따로 적는 이유는 단순히 보고 따라치는게 아니라 내가 제대로 이해한 것이 맞는지 확인할 겸 해서 올리는 것이다. 현재까지 진행된 상황은 이렇다. 클릭시 페이지가 바뀌도록 하기 위해 router를 설치, routes 폴더의 index.js를 통해 각 패스를 통해 어떤 컴포넌트를 호출할지를 정의했다. routes/index.j..

인스턴스는 뷰로 개발하게되면 필수적으로 사용해야하는 코드. new Vue(); 보통 이런식이나 var vm = new Vue(); 이런 식으로 사용한다. 이 Vue 인스턴스에는 미리 정의되어있는 속성과 메서드(API)들이 있기 때문에, 이를 활용해서 개발을 진행하면 편하다. 우선 대표적인 인스턴스 속성과 API를 살펴보면 new Vue({ el: , //인스턴스가 그려지는 화면의 시작점(특정 HTML 태그들) template: , //화면에 표시할 요소(html,css등) data: , //반응성(Reactivity)이 반영된 데이터 속성. 여기서 선언된 데이터는 html에서 {{ }}로 사용 가능 methods: , //화면의 동작과 이벤트 로직을 제어하는 메서드. created: , //뷰의 라이프 ..