사진 찍는 개발자의 365일

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

v-if는 참 편리한 녀석이다. boolean 값에 따라 html 요소들이 동작하는 방향을 결정할 수 있다보니, 컴포넌트를 표시할 때에도 쓰이고, 각종 로직에 쓰인다. 나는 아직 경험이 많지 않다보니, v-if를 통해 보여지는 컴포넌트를 결정하는 로직을 많이 짰다. 하지만 오늘 드디어 일이 났다. 싱글 컴포넌트 라이브러리를 제작하게 되면서, v-if를 사용하는 부분에서 오류가 났다. 아래는 문제의 해당 코드이다. Process.vue 위와 같이, async & await를 통해 store에 있는 GETSTATUS를 실행시켜 axios로 데이터를 받아오고, 해당 status 값이 done 이면 상위 컴포넌트인 Process.vue로 이벤트를 보내 보여지는 화면이 바뀌도록 하고 싶었다. 하지만... 내 눈에..

프로그래밍을 하다보면 배열을 만나게된다. 진짜... 처음 보았을 땐 죽여버리고 싶을 정도로 짜증나는 녀석이었는데, 쓰다보니까 이 친구가 없었으면 어쨌을까 싶은 고마운 친구였다. 아무튼 이 배열이란건 프로그래밍을 하게 되면 어쨋든 배워야 되는 녀석인데, 오늘은 이 배열을 편하게 나열해주는 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에서 관리하고, 진행도인 퍼센트를..

데이터를 전송하는 일은 많다. 컴포넌트 단에서 바인딩할수도있고, 이벤트로 올리고 프롭스로 받을 수도 있다. 하지만 컴포넌트 간에서 바인딩하고 프롭스를 쓰는 것은 vuex를 쓰면 아주아주 손쉽게 사용할 수 있게되고, 내가 겪은 부분은 API를 통해 데이터를 보내는 부분이었다. Title Authors Add {{ item.author }} Publisher Cover Add Pages Add Submit Clear 대충 이렇게 form 태그 안에 인풋 태그를 덕지덕지 바르고 css로 양념을 쳐놨다. 오늘 볼 부분은 file부분이니 file 태그를 설명하자면, 우선 text타입의 input을 넣어 disabled로 설정 해놓고, 실제로 file버튼은 보이지 않게 css를 변경해놓았다. file은 오직 but..

입사 후 열심히 교육과정을 하다가 이번달 말 부터 바빠질 것 같아 바로 업무에 투입이 되었다. 내가 해야할 일은 책에 대한 정보(제목, 저자, 출판사 등)와 커버 이미지, 페이지 스캔 이미지를 넣으면 자동으로 epub 전자책 파일로 변환할 수 있는 사이트를 만드는 것이었다. 여차저차 이틀만에 만들기는 했지만 참... 뭔가 깔끔하지 않은건 알겠는데 잘 돌아가서 신기한 느낌이다. 아무튼 각설하고, 오늘 겪은 것 중, setInterval에 대해 이야기를 해보자 setInterval은 일정 시간을 간격으로 지정한 함수나 코드를 반복해주는 기능이다. 기본적인 형태는 이러하다 setInterval(() => { ... }, 1000); //여기서 1000은 1000ms로, 1초를 의미한다. //1.5초를 하고 싶..

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

컴포넌트는 화면의 영역을 구분해서 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 위의 그림과 같이, 화면단에서 표현되는 부분들을 컴포넌트 단위로 분리하면 하나 하나에 로직을 넣어 유지보수도 쉽고 코드 관리도 더 쉽게 할 수 있다. 컴포넌트 생성 코드 형식 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); 컴포넌트 생성 후 표시하는 방법 Vue.component('app-header', { template: 'Header Component }); 컴포넌트를 통해 app-header를 선언하게 되면, html 코드에 해당 컴포넌트의 이름을 태그 형식으로 쓸 수 있다. app-header 컴포넌트의 템플..

vue에서 template 문법이란 화면을 조작하는 방법. 템플릿은 크게 데이터 바인딩과 디렉티브로 나뉨. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다. {{ message }} //script 단 new Vue({ data: { message: 'Hello Vue.js' } }); 위와 같은 방법으로 html에 vue의 데이터를 입력시킬 수 있다. 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있다. Hello Vue.js new Vue({ data: { show: false } }); 위와 같은..

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