Front-end/Vue.js (6) 썸네일형 리스트형 Angular와 Vue, 둘 중 어느 것을 골라야 할까? 학생 시절에는 주로 Vue를 사용했지만, 입사 이후에는 Angular를 사용 중입니다. 구글에 전문적으로 Lifecycle이나 유지보수, 트렌드를 다루는 글들은 많지만, 초보 프론트엔드 개발자가 참고할만한 간단한 요약이 없어 설명해보려 합니다. 1. Anuglar와 Vue는 매우 유사합니다. Template 문법이 유사하고, 전체 구조도 유사하며, 둘 다 양방향 바인딩을 지원합니다. Vue 개발자라면 쉽게 Angular에 적응할 수 있고, 그 반대도 마찬가지입니다. 다만 아래서 언급할 굵직한 차이점이 몇 개 있습니다. 2. 차이점 : Typescript 물론 Vue도 요즘은 Typescript를 사용할 수 있습니다. 하지만 Angular는 아예 Typescript 기반으로 만들어진 프레임워크입니다. 적어.. Vue.js 개발을 위한 조언 진행중인 프로젝트의 PM분으로부터 개발에 관련된 조언을 받았다. 여기에 이번 개발을 진행하면서 느낀 점들과 종합하여 간단하게 정리해보려 한다. 1. Vue.js의 코딩 스타일 가이드를 참고하자. https://kr.vuejs.org/v2/style-guide/index.html Style Guide — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 사실 프로그래머라면 당연히 이런 문서를 먼저 보고 시작했어야 하는데, Vue.js를 건드린지 몇년이 되었음에도 이 문서의 존재를 모르고 있었다. 앞으로 새로운 언어를 배울 땐 반드시 스타일 가이드를 먼저 확인하는 습관을 들여야겠다 싶었다. 대표적으로 놓치고 있던 부분들은 Prop의 경우 최소한 변수형을 지정해주는 식으로.. Vue.js 동적 배열 이미지 출력 및 반응형 처리하기 잡담 외주 개발 진행 중 조금 복잡한 조건의 디자인이 있어 개발일지 겸 정리하고자 한다. 기본적으로 썸네일 이미지 4개를 매장별로 출력하는것이 목표이다. api를 통해 이미지 배열을 반환받는데, 아래와 같은 조건을 맞춰야 한다. 1. 배열에 4개 이상의 이미지가 있어도 최대 4개까지만 출력한다. 2. 배열에는 4개 미만의 이미지가 있을 수 있다. 3. 모바일에서는 최대 2개의 이미지만 출력한다. 해결법 전체 코드는 아래와 같다. ... ... 하나씩 살펴보자. 우선 pickItems가 전체 매장 정보와 이미지를 담은 배열이다. 따라서 v-for="(item, index) in pickItems" 를 통해 pickItems 만큼 반복 출력하도록 하였다. (item, index) 에서 index는 반복문의 .. Vue.js에서 주소(라우팅) 변경 감지하기 잡담 Nuxt.js에서 SSR모드로 Layout을 사용하는 경우, 혹은 Vue-Router를 통해 SPA로 개발하는 경우 경로 변경에 따른 기능을 mounted() 로 구현할 수 없다. 이는 해당 컴포넌트가 다시 불러와지는(mounted)것이 아니라 그대로인 상태에서 내용만 바뀌는 방식으로 구현되기 때문인데, 결국 주소가 변경되는 경우를 감지해서 그 때마다 원하는 기능이 동작하도록 만들어야 한다. watch 를 쓸 것이라고 쉽게 유추가 가능하지만, 막상 watch 안에서는 vue.js의 data() 안의 변수가 아니면 일반적인 문법으로 변경을 감지하도록 만들 수 없다. 다행히 Vue-router 공식 문서에서 라우팅 변경을 감지하는 내용을 찾을 수 있었고, SSR모드에서도 똑같은 방법이 통했다. 해결법 .. Vue.js에서 외부 클릭 인식하기 (input Select 만들기) 잡담 평소대로라면 Vuetify나 Bootstrap에서 제공하는 Selector UI를 사용했겠지만, 현재 진행중인 프로젝트에서는 디자이너가 요구한 대로의 결과물이 나와야 하기에 직접 만들어보려고 했다. CSS만을 이용할 경우 리스트가 출력되는 부분을 마음대로 바꾸기가 힘들고, Javascript를 이용하는 레퍼런스의 경우 대부분 JQuery기반으로 되어있어 적합하지 않다고 판단했다. 결국 Vue.js 기반으로 처음부터 만들어보려고 했는데, 여기서 마주한 문제가 지정된 영역을 제외하고 바깥 부분을 클릭할 경우를 인식하지 못한다는 점이었다. directive를 이용하면 가능한데, 방법이 꽤나 복잡하다. 결국 찾아낸 방법은 v-click-outside라는 모듈을 이용하는 것이다. vue-click-outsi.. Vue.js 컨텐츠 사이드스크롤 컴포넌트 만들기 npm install --save vue-scrollto 잡담 진행중인 프로젝트에서 디자이너가 요구한 인터페이스가 다음과 같았다. 1. 총 6개의 컨텐츠를 가로로 배치한다. 2. 화면에는 한번에 2개의 컨텐츠만 표시된다. 3. 좌,우 버튼 클릭을 통해 다른 컨텐츠를 볼 수 있다. 4. 좌측 끝, 우측 끝에서는 각각의 버튼이 숨김 처리된다. 처음엔 v-tabs같은 Vuetify Component로 해결하려 했으나, 특정 수치만큼 스크롤을 이동시키는 기능이 없어 포기했다. ES6의 scrollLeft 등의 함수를 이용하여 구현할 수도 있지만, 이 경우 어쩔수없이 $ref를 통해 직접 DOM을 조작하게 되는데, Vue 공식문서에서는 가급적 이런 방식을 쓰지 않을것을 권장하고 있어 순수 Vue.js 코드만으로 .. 이전 1 다음
