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

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

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

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

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

1개의 좋아요

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

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

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

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

1개의 좋아요

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

저는 설문조사용 웹앱에 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개의 좋아요

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

1개의 좋아요

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

1개의 좋아요

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

2개의 좋아요

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

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

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

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

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

2개의 좋아요

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

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

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

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

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


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개의 좋아요
google.ma...(this.map, 'dragend', () => {
  this.updateMap();
});

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

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

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

3개의 좋아요

@redgoose 님께서 사용하는 방법으로 하시면 될거에요 작업하시다가 that이나 self를 써야하는 경우에 함수 스코프에서 this가 어떤걸 가리키고 있는지 확인하면서 작업하시면 해당 코드를 많이 줄이실 수 있을거에요

상위 스코프의 this를 써야한다 -> 애로우펑션으로 사용할 때

이렇게 기준을 두고 작업하고 있어요

arrow function을 사용하면 편리할 것 같아요!!

1개의 좋아요
  • 어떤 플젝 : CDN 관리, 준금융(유사화폐)
  • 어떤 과정 : 작년시작 es6 + axios + 일반퍼블 -> 현재 Typescript, Vuex, Vuetify+커스텀
  • 어떤 어려움
    : 타입스크립트 쓰다보면 편해서, 비 타입스크립트로 돌아가기 두렵습니다.
    : 폼 검증관련해서 정말정말로 빡쳐요. 각 이벤트와 라이프 싸이클과 모델 갱신과. 으…
    : vuetify 폼에서 지원하지 못하는 기능을 수동으로 ref 걸어서 갱신하는 과정 자체가 빡쳐요.

작년부터 뷰 플젝 뛰기 시작했는데 이런 포럼이 있는 줄 몰랐네요.

jquery 랑 es5 쓰는 곳으로는 정말로 돌아가고 싶지 않네요.

1개의 좋아요

반갑습니다!!