Share the knowledge

최근 Front-end 단에서 사용자가 데이터를 변경한 뒤 화면을 이동하거나 종료할 때 저장여부에 대한 알림을 띄워주는 기능을 개발해야 했는데, 그 기능중 이전 데이터 Object와 변경된 데이터 Object를 어떻게 비교했는지에 대해서 정리해보려고 한다.(Vue.js에서는 이런기능을 따로 구현할 필요는 없는것으로 알고있다.) 사실 별다른 내용은 없고, Object를 비교하는 내용만 정리할거라 바로 코드로 정리한다, 코드는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 function compareData() { let object = {name : 'kim', age : 32, gender : 'M'}; let object2 = {name : 'park', age : 20, gender : 'M'..

view단 작업을 하던도중 radio버튼을 클릭했을 때 값이 변경된 후 다음로직이 수행되는 부분을 구현해야 했는데, 처음에는 @click(v-on:click)이벤트를 이용해서 작업하다보니 내 생각과는 다르게 작동했다. 의도했던것은 @click가 눌렸을 때 해당 태그의 값이 변경되고, function이 실행될 것 같았는데, 막상 실행해보니 click이벤트가 발생한 뒤 값이 변경되었는데, 이 부분을 코드로 보면 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // 값이 변경된 후 함수가 실행되게 하고싶으면 @change를 사용... //스크립트 최대한 간략화함... let vm = new Vue({ el..

최근 개발작업을 진행하다가 보니, 반복문을 순회하면서 새로운 object를 만드는 코드를 작성해야 했는데, object의 key가 동적으로 저장되어야 하는 상황이 있었다. 그래서 여러가지 방법을 찾아봤는데, 바보같이 assign, join, 연산자 등 별에 별 뻘짓을 다했었는데, 정답은 간단한 문제였다. 코드로 설명하면 다음과 같이 하면된다. 123456789let objectCreater = (data) => { let result = {}; // 새로운 object 선언 data.forEach(a => { // 반복문 순회하면서 동적인 key가진 object생성 result[a.key] = a.value; }) } return result;} Colored by Color Scriptercs 이 쉬운..

Front-End 개발을 하다보면 특정문자를 치환 할 일이 많은데, 자바스크립트에서도 문자열을 치환하는 기능을 제공한다. 함수명은 replace로 JAVA의 문자열 치환 메소드인 replace와 같은 이름을 사용한다.(단어 뜻도 치환, 변경이니까..) 사용법은 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /** * var newStr = str.replace(regexp|substr, newSubstr|function) - 공식문서 설명 * 첫 번쨰 매개변수는 문자열 or 정규식 , 두 번째 매개변수는 변경될 문자열 or 함수가 들어갈 수 있다. */ let str = 'This is Test & Test'; console..

오늘은 블로그 비교적 최근에 추가된 비동기 패턴제어인 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}} ..