Vue.js를 어떻게 사용하고 계신가요?

JavaScript Vue.js
1

Vue.js 를 사용하다보면 다른분들은 어떻게 익히고 사용하시는지 궁금한데요, 나는 이런방법으로 익혔다?! 같은게 있으면 새로 하시는분들께 도움이 될 거 같아요

작년 이맘때 http://vuejs.kr/update/2016/12/20/starting-vue/ 이런 글을 써서 공개하긴 했는데 지금 보면 수정해야할 부분들이 몇가지 있긴하네요. Vue 커뮤니티가 커지면서 이전까지와는 다른 방법으로 사용하시는 분들도 계시는거 같아요

궁금한부분은…

  • 어떤 프로젝트(규모, 분야 등)에 사용하시는지
  • 어떤 과정으로 익히고 계시는지 (ES6, Vue, vue-router, Vuex 등)
  • 사용하면서 어려운 점은 어떤 것이 있는지

정도입니다.

저는 초반에 WebComponent Spec에 대한 흥미로 시작한거라 크게 특별한건 없어요
막연히 컴포넌트 개발 방식을 주 사용 패턴으로 사용해야겠다 -> Vue.js라는게 있는데 써봐야겠다
순으로 알게되었거든요 다른분들의 이야기를 듣고싶습니다 (_ _)

1개의 좋아요
2

전 간단하게 회사 베타 페이지 작업할 때 Nuxt를 썼어요.
앞으로는 그룹웨어 서비스와 회사 사이트 개편에 사용할 예정이에요.

1개의 좋아요
3

오… 그룹웨어도 Vue를 사용하시는건가요 축하드립니다 (_ _)

4

웹앱에 사용중입니다. 주요 기능은 게시판과 같은 CRUD와 구글맵 연동이고요. 하나의 API에 클라이언트, 어드민, 매니저앱을 연결하여 사용중이고 모두 vue-cli로 생성한 프로젝트입니다

공부는 공식문서로 했구요. vue자체 보다는 ES2015와 주변 라이브러리(axios같은) 사용은 블로그 튜토리얼을 많이 봤습니다. angular.js(1.x)를 오래 해서 러닝 커브가 크게 느껴지진 않았어요.

어려운 점은 컴포넌트 간 통신이…부모-자식으로 딱 떨어지지 않는 부분에서요… 그리고 상태관리 vuex인데, vuex 자체보다는 어디까지 상태로 처리할거냐 하는 고민이 많이 되더라구요.

1개의 좋아요
5

답변해주셔서 감사합니다 :+1:

vue-cli 로 만든 프로젝트를 하신다니 부럽네요 :sob:
사실 최신 자바스크립트를 다룰 줄 알면 Vue의 어려움이 조금은 덜어지지 않나싶어요 angular까지 하셨으니 더 러닝커브가 낮으셨을거같아요

컴포넌트간 통신에서 많은 분들께서 어려워하시더라구요 처음에 이해하기 어려운 부분이기도 하구요
부모 - 자식 관계는 그래도 명확한데 그 외에는 조금 다른 접근방식을 가져가야하니까요…
Vuex는 저도 아직 고민하는 부분입니다 ㅠ_ㅠ
앱 전역에서 사용하는 상태만 Vuex가 가지고 있는다. 정도로 기준을 세워서 하거든요 앱 전체를 하자니 너무 무리를 한다고 느껴졌어요

6

사내에서 메인 서비스(view 트래픽이 많은?)에서 아직 vue를 사용 중인 곳은 없어보이는데요(여기 저기 사용하는 곳은 있어요)
저희 팀에서도 기존 jquery 사용하다가 신규 페이지를 vuejs 작업하고 있는데요(전 안하고 있지만…공부 중)
React vs Angular vs Vue 에서 러닝커브가 낮으면서도 좋다라는 것으로 vue를 진행하게 되는 것 같아요
(front-end 개발이 나눠져있지 않아 러닝커브가 낮다는게 주요 선택 원인이 된거 같아요)

1개의 좋아요
7

네 이미 있는 프로젝트에 필요한 부분만 끼워서 쓸 수 있도록 잘 만들어 놓은거 같아요

아시겠지만… gitlab도 일부 페이지(이슈 리스트)만 Vue를 넣는 방법으로 시작했더라구요
꼭 전체 다 써야할 필요는 없어보여요

물론 vue-cli로 시작하면 훨씬 편하겠지만요

8

아 혹시 오해하실까봐 리플답니다.저는 vue-cli(https://github.com/vuejs/vue-cli)를 이용해서 프로젝트를 생성했다는 건데요^^; 많은 것들이 이미 세팅되어 있어서 편하고 쉬워서요.
그리고 vuex에 대한 고민은 저도 비슷한 결론으로 난 것 같아요. 사용자 정보, 설정정보 같은 전역 데이터만 vuex로 묶고 나머지는 그때그때 서버에 요청하거나 하게 작업했습니다.

1개의 좋아요
9

어떤 프로젝트(규모, 분야 등)에 사용하시는지

저는 설문조사용 웹앱에 Vue를 처음 적용해보았습니다.
사용자가 설문결과와 사진등을 올리는 간단한(?) 게시판 형태의 서비스였습니다.

어떤 과정으로 익히고 계시는지 (ES6, Vue, vue-router, Vuex 등)

처음엔 Vue로 제작된 무료 관리자 대시보드 템플릿이나 어느 정도 완성된 오픈소스들을 보면서 배우기 시작했는데요, Vue-router 나 Vuex 등이 복잡하게 엉켜있는 상태에서 하나씩 분해/조립하다보니 기본적인 것들을 놓치고 간 부분도 있었지만 이미 완성된 코드가 존재했기 때문에 이 방법이 저에겐 좀 더 빠른 학습길이었던 것 같습니다.

사용하면서 어려운 점은 어떤 것이 있는지

저는 Vuex 를 기본으로 도입하면서 시작해 보았습니다. 현재는 거의 모든 Vue 컴포넌트들에 Vuex를 사용하고 있습니다. 주로 API와 연동하여 데이터를 불러오거나 사용자마다 다른 레이아웃을 적용하거나 로그인 토큰값을 유지하는 경우등에 사용되었습니다.

좋은점은, 여러 컴퍼넌트들의 state를 중앙에서 관리할 수 있고 모듈 형태로 vuex store 를 생성할 경우
코드는 많아지지만 중복코드가 줄어들고 유지보수가 다소 용이하다는 점 등인 것 같습니다.

아쉬운점은, 페이지 새로고침이 일어나는 경우 동적인 state의 경우 사라지기 때문에 이에 대한 별도 처리를 해야
한다는점, 로그아웃 시 여러 동적 state 들을 수동으로 clear 해줘야 하는 점 등이 있습니다.

Vue-router 의 경우 서로 다른 route 가 같은 컴퍼넌트를 재사용할 경우 컴퍼넌트가 새로 create 되지 않기 때문에
$route watch 를 통해 데이터를 바꿔줘야 하는 점 등이 처음에 몰랐기 때문에 어려웠던 점이었던것 같습니다.

이외에도 많지만 생각나는것만 두서없이 적어보았습니다 ^^;

2개의 좋아요
10

왜 react 대신에 vue.js를 사용하시게 되었는지도 궁금합니다! :grinning:

1개의 좋아요
11

angular.js(1.x), react를 거쳐 vue를 사용하고 있는데요. 개인적으로는 앵귤러와 비슷한 템플릿 코드가 마음에 들었구요. react는 jsx문법이나 js 변수 안에 html을 넣는 등의 방식이 마음에 들지 않고 깔끔하지 않게 느껴지더라구요. 그리고 리액트는 뭔가 알 수 없는 코드가 과잉된 느낌이…vue는 가벼운 느낌이 좋았습니다. 물론 큰 규모의 앱을 개발해 본것은 아니라 제한적인 경험입니다.

1개의 좋아요
12

Vue 에서 가장 좋았던 부분은 .vue 파일이라고 생각해요 :slight_smile:

2개의 좋아요
13

어떤 프로젝트에 사용하는지?

  • 회사 제품 시스템에 적용하고 있습니다.
    websocket을 이용한 실시간 알람과 다수의 차트(아직 개발 전입니다.)가 대시보드로 표현이 되는 화면 입니다.

어떤과정으로 익히고 있는지

  • 현재 nuxt와 vuex, 그리고 router를 이용하고 있습니다.
    처음엔 spa 방식으로 진행을 하다가 nuxt로 컨버팅을 한 후 유지하고 있습니다.

사용하면서 어려운 점은 어떤 것이 있는지
ES6를 쓰면서 화살표 함수를 써야 되는 곳과, 쓰면 되지 않는 곳이 해깔렸고(사실…지금도 해깔립니다 ㅠ)
this의 늪에 자주 빠져서 허우적 되었습니다.(이 부분은 nuxt를 쓰면서 많이 해소 되었습니다.)

2개의 좋아요
14

이 부분이 초반에 하시는분들께서 가장 많이 헤매는 부분이더라구요 :sob:

15

저도 ES6에 대해 비슷한 고민을 하고 있어요. 함수는 되도록 arrow로 쓰려고 하는데, 또 안되는 부분도 있고요. 그런 데는 또 뭔가 찝찝하고 ^^;;

16

저도 비슷한 고민을 하다 결국 var that = this; var self = this 같은 뭔가 찝찝한 해결법으로 하고 있거든요. 혹시 조금 덜 찝찝한 해결법을 가지신 분 계실까요?

17

혹시 그렇게 사용하고 계신(var that = this; var self = this) 코드 일부를 보여주실 수 있나요?

18

포럼에 this관련해서는 다음과 같은 글이 있습니다.

19 
var that = this;

google.maps.event.addListener(that.map, 'dragend', function() {
	let bounding = {
		south: that.map.getBounds().f.f,
		west: that.map.getBounds().b.b,
		north: that.map.getBounds().f.b,
		east: that.map.getBounds().b.f
	}
	that.query.filter.bounding = bounding;
	that.query.offset = 0;
	that.updateMap();
});

뭐 이런 상황에서 썼습니다. 혹시 더 좋은 방법이 있을까요?

1개의 좋아요
20 
google.ma...(this.map, 'dragend', () => {
  this.updateMap();
});

이런 형식은 못쓰는건가요? 아니면…

google.ma...(this.map, 'dragend', function() {
  this.updateMap();
}.bind(this));

이런 형식도 가능할거예요. ㅎ

3개의 좋아요