Front-end (15) 썸네일형 리스트형 Angular와 Vue, 둘 중 어느 것을 골라야 할까? 학생 시절에는 주로 Vue를 사용했지만, 입사 이후에는 Angular를 사용 중입니다. 구글에 전문적으로 Lifecycle이나 유지보수, 트렌드를 다루는 글들은 많지만, 초보 프론트엔드 개발자가 참고할만한 간단한 요약이 없어 설명해보려 합니다. 1. Anuglar와 Vue는 매우 유사합니다. Template 문법이 유사하고, 전체 구조도 유사하며, 둘 다 양방향 바인딩을 지원합니다. Vue 개발자라면 쉽게 Angular에 적응할 수 있고, 그 반대도 마찬가지입니다. 다만 아래서 언급할 굵직한 차이점이 몇 개 있습니다. 2. 차이점 : Typescript 물론 Vue도 요즘은 Typescript를 사용할 수 있습니다. 하지만 Angular는 아예 Typescript 기반으로 만들어진 프레임워크입니다. 적어.. Vue.js개발자의 React 시작하기 평소 Vue.js로 개발을 하고있지만, 아무래도 React를 기반으로 하는 프로젝트가 많다 보니, 배워두면 좋겠다고 생각했습니다. 마음같아선 TypeScript도 적용하고 싶었지만, 우선은 익숙한 Javascript부터 시작하는 게 나을 것 같습니다. 또한, 어차피 배우는 겸 해보지 않은 것들을 해보자는 생각에서 기존에 사용하던 Brackets 대신 VS Code를, GitHub Desktop대신 CLI(Mac의 Terminal)를 통해 Git을 사용해보려고 합니다. 0. VS Code code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimi.. 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.. Vuetify에서 Nuxt.js 링크 사용하기 / 뒤로가기 잡담 href 등 하이퍼링크를 이용하면 리디렉션은 가능하지만 nuxt-link를 사용할때와는 다르게 아예 새로운 페이지를 불러온다. 다행히 Vuetify에는 nuxt-link로 동작하도록 하는 prop이 있는데, 공식 문서에서는 boolean 값으로만 나오고 자세한 설명이 없어 조금 해멨다. 해결법 v-btn을 기준으로 원본 코드가 아래와 같다면 테스트 페이지 아래와 같이 바꿔주면 된다. 테스트 페이지 즉, prop으로 to=""와 nuxt를 추가해주면 정상 동작한다. v-btn뿐만이 아니라 v-tab등의 컴포넌트에도 그대로 적용이 가능하다. 여기서 주의할 점이 있다면, :to의 경우 동적인 값을 받을 수 있고, to의 경우 단순 문자열로 취급된다. 이 버튼은 /test로 갑니다 이 버튼은 /routeS.. JQuery로 사이드 스크롤 컨텐츠 만들기 잡담 이전에 순수 Vuejs와 vue-scroll-to로 구현했던 컴포넌트의 경우 반응형으로 만드려면 상당히 코드가 길고 복잡해지기 때문에, Jquery를 이용하여 다시 구현했다. 물론 Vue.js에서는 이렇게 직접 DOM을 조작하는 방식을 권장하지 않는다. 디자이너가 요구한 조건은 다음과 같다. 1. 총 6개의 컨텐츠를 가로로 배치한다. 2. 화면에는 한번에 2개의 컨텐츠만 표시된다. 3. 좌,우 버튼 클릭을 통해 다른 컨텐츠를 볼 수 있다. 4. 좌측 끝, 우측 끝에서는 각각의 버튼이 숨김 처리된다. 해결법 우선, Vue.js에서 JQuery를 이용하려면 몇가지 설정이 필요하다. 가장 처음은 설치다. npm install --save jquery 그리고 안에서 jQuery를 import한다. impo.. 이전 1 2 다음
