Share the knowledge

Vue를 이용해서 Front-End 개발 작업을 진행하다보면 특정 태그의 Dom을 직접 컨트롤 하고 싶을 떄가 있다. 물론 자바스크립트의 querySelector를 이용해서 dom에 접근할 수 있겠지만, 뷰에서도 dom에 접근할 수 있는 방법이 있기 떄문에 vue.js에서 dom에 접근 하는 방법을 정리하려고 한다. 일단 다음과 같은 input태그가 있다고 가정했을 때 해당 input태그에서 비밀번호 유효성체크를 하는 과정에서 조건을 만족하지못하면 해당 input태그에 포커싱되게 하고싶다면 태그에 ref속성만 추가해주면 된다. 해당 태그에 ref속성을 추가했다면 스크립트 코드에서는 $refs를 통해 접근하면 되겠다. // 생략 password : function() { alert('비밀번호 유효성체크')..

오늘은 블로그 비교적 최근에 추가된 비동기 패턴제어인 async과 await에 대해서 정리하려고 한다. 들어가기 앞서 async와 await은 최신 브라우저에서만 지원하기 떄문에 이점은 고려해서 사용해야 할 것 같다. (익스플로러를 크로스브라우징 대상에 포함한다면 어쩔수없이 콜백함수를 써야하지만..) 먼저 나는 async과 await을 사용한 상황은 금액에 대한 계산이 필요했는데, 금액을 가져오는 API가 여러 개였기 떄문에 정확한 금액 계산을 위해 데이터들이 한번에 들어 와야하는 상황이였다. 따라서 전통적인 콜백함수를 사용하기보단 async&await을 써보았다. (사내에서 개발하는 프로그램은 크롬, 엣지만 지원하고 있다.) 먼저 나는 document문서에서 설명해주는 것과 매우 흡사하게 작성했고, a..

최근 vue.js를 이용해 개발을 할 수 있는 기회가 생겨서 vue.js로 개발을 하고있다, 이전엔 jquery + handlebar.js를 이용해 개발하고 있었는데, 서로 비슷한 부분이 꽤 있어서 적응하는데 많은 어려움을 겪고 있진 않지만 처음사용하는 프레임워크이다보니 생소한 부분이 있어서 정리를 해보고자 한다. 내게서 발생한 문제는 리스트 안에 서브리스트가 존재할 떄 view를 그릴 떄 서브리스트이 값들만큼 td가 생성되어야 하는데 vue.js에서는 어떻게 이중포문을 돌려야 할지 모르겠다는 것이였다. 따라서 리서치를 해본결과 다음과 같았다. handlebar.js에서 이중포문을 돌릴 땐 이렇게 사용했는데, {{#each list}} {{#each list}} 버튼 {{/each}} {{/each}} ..