JAVASCRIPT 18

javascript의 Window.Storage를 사용해보자.

오늘은 개발하던도중 자바스크립트에 아주 유용한 기능 중 하나인 localStorage가 있어서 정리해보려고 한다. 최근에 사용자의 편의성을 위해서 특정작업 후에도 스크롤위치를 저장하기 위해서 localStorage를 사용해봤는데, 아주 유용한 것 같다. 일단 사용법이 간단하기도 하고, 브라우저 호환성도 괜찮은 것 같다. (IE 8도 지원하니까 뭐..) 일단 사용법 부터 설명하면 다음과 같다. (정말 별게없다) 1234567891011121314151617181920212223// 로컬스토리지 사용법(브라우저가 닫혀도 유지)function test() { localStorage.setItem('key', 'value'); // 키 : 밸류 값으로 저장한다 console.log(localStorage.get..

JAVASCRIPT 2020.10.29

화살표 함수 사용법(arrow function)

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

JAVASCRIPT 2020.08.13

Vue.js에서 Dom에 접근 하는 방법

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

JAVASCRIPT 2020.08.03

javascript에서 문자열 치환(replace)

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

JAVASCRIPT 2020.07.22

Rest API 비동기 시점 제어 (async, await) 및 value return

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

JAVASCRIPT 2020.06.26

[Jquery] html 태그 중 selectBox event 필터링 하기

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

JAVASCRIPT 2020.05.13

Vue.js 에서 이중포문을 사용하는 법?

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

JAVASCRIPT 2020.02.17

웹에서 비동기 처리의 시점 컨트롤(callback, promise, setTimeout)

비동기 방식을 이용해 데이터를 가져오는 부분을 개발하던 도중 데이터를 가져오는 시점이 명확하지 않아 문제가 발생했다, 데이터를 정상적으로 가져온 뒤 함수가 실행되어야 하는데 그렇지 않아서 발생한 문제였다, 따라서 문제를 해결하기 위해 여러가지로 찾아보았는데 해결방법으로 여러가지가 있었는데 그 정보들을 정리해보고자 한다. 1. callback함수를 이용하여 해결. 1 2 3 4 5 6 7 8 9 10 11 function requestData(callback) { var url = 'test/get/data'; axios.get(url, function () { }).then((response) => { return response; }); } requestData(function() { console.l..

JAVASCRIPT 2020.02.07