Share the knowledge

최근 개발작업을 진행하다가 보니, 반복문을 순회하면서 새로운 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작업을 많이 하게 되어서 화살표 함수를 자주 사용하고 있는데, 이 화살표 함수를 사용하다보니 매우 편리한 것은 물론이고, 코드 까지 간결해져서 애용하고 있다. 그래서 오늘은 화살표 함수에 대해서 정리하려고 한다. ※ 화살표 함수의 주의점은 IE의 경우 지원자체를 안하기때문에 사용할 떄 고려할 부분이 많다. 먼저 화살표 함수의 기본작성법은 다음과 같다. 123456789101112131415161718(param1, param2, …, paramN) => { statements }(param1, param2, …, paramN) => expression// 다음과 동일함: => { return expression; } // 매개변수가 하나뿐인 경우 괄호는 선택사항:(singlePara..

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

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..

신규 개발 화면의 경우 Vue.js를 이용해 개발하기 떄문에 Jquery를 쓸일이 없지만, 기존에 개발되어 있는 화면의 경우 Jquery로 작성되어 있기때문에 작은규모의 수정사항이 생기면 Jquery로 수정을 하고있다. 개발을 하던 중 input태그 중에서 타입이 selectBox인 경우 액션을 취하고 싶은데, 이벤트가 발생했을 때 이벤트를 컨트롤하는 방법을 정리한 글이 없는 것 같아서 정리한다. Q. 여러개의 div안에 selectBox와 inputBox가 있고, 그 중에서 selectBox가 change이벤트가 발생했을 때 action을 취하고 싶다. html코드는 대충 다음과 같다고 했을 때 1 2 1 2 1 2 이 3개의 div 공간 중 selectBox에서 이벤트가 발생한 경우를 찾고 싶었던 것..