RATSENO

angular와 vue와 같은 프런트엔드 프레임워크에서 자주 보이는 디렉티브가 있습니다. 이제 나를 볼 수 있어요 저렇게 문자열로 되어있는 조건문을 그냥 js, jQuery를 이용해서 비슷하게 써보고 싶었습니다. 찾아보니 new Function() 생성자를 이용하여 구현할 수 있을 것 같아 사용해보았습니다. 테스트1 테스트2 테스트1 테스트2 data-expression="'테스트2'==='테스트1'" data속성으로 expression을 생성하고 값으로 조건식인 '테스트1'==='테스트1' 문자열을 적어주었습니다. 저 조건식이 실행하여 true일 때 false일 때 style을 변경해 보도록 하겠습니다. 테스트1 테스트2 정상적으로 조건문이 실행되었습니다. 하지만 보안상 문제가 생길 수도 있기 때문에,..

https://ratseno.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F 위의 URL에서 ?(물음표)뒤에 key=value 형식으로 &로 구분되어 사용되는 Url Parameter를 사용하는 간단한 Util을 만들어보겠습니다. 폴더를 하나 새로 생성하고, test.js 파일을 생성하여 아래 내용을 작성합니다. window.UrlUtil = (function(util){ //Url Parameter Object 반환 //동일한 이름의 parameter는 value에 list로 반환 util.urlParameters = (function(){ var qPos = window.document.URL.indexOf('?'); var ..

두 개의 array가 있습니다. 묘하게 비슷하게 생겼지만, arr2의 요소들은 추가적으로 job, addres 속성이 있습니다. var arr = [ { id : 1, name : "철수", age : 30 }, { id : 2, name : "철수2", age : 30 } ]; var arr2 = [ { id : 1, name : "철수", age : 30, job : "개발자", addres : "서울" }, { id : 2, name : "철수2", age : 30, job : "디자이너", address : "부산" } ]; 두 array중 arr1에 arr2요소들 중 id(키값)이 같은 요소를 병합하고 싶습니다. 그중에 arr2요소 중 job속성만 있었으면 합니다. var mergedList =..

json array에서 중복된 객체를 제거하는 여러 가지 방법에 대해서 작성해보겠습니다. 먼저 샘플로 사용할 json array입니다.(list) var arr = [ { id : 1, name : "철수", age : 30 }, { id : 1, name : "철수", age : 30 } ]; 중복된 객체를 제거하기 위해, 비교하기 위한 키 값으로 id를 선택하겠습니다. 1. filter(), findIndex()를 사용하여 중복된 객체 제거. var result = arr.filter(function(item1, idx1){ //filter() 메서드는 콜백함수에서 정의한 조건이 true인 항목만 리턴한다.(필터링) return arr.findIndex(function(item2, idx){ //fi..

웹사이트에서 회원가입 등 여러가지 입력 항목에는 다양한 입력제한 들이 적용되어 있습니다. 간단한 예제들을 통해 주로 사용되는 입력값 체크 방법에 대해서 알아보겠습니다. #아이디를 숫자만 입력했을 경우 #아이디가 영문으로 시작하지 않을 경우 #아이디 안에 한글이 포함되어있을 경우 var id = "test테스트"; if(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/.test(id)){ alert("아이디 안에 한글은 포함될 수 없습니다."); } #비밀번호안에 같은문자가 4번 이상 포함되어있을 경우 var pwd = "1111테스트"; if(/(\w)\1\1\1/.test(pwd)){ alert('비밀번호안에 같은문자는 4번 이상 사용할 수 없습니다.'); } #비밀번호안에 연속된 숫자가 4회 이상 포함되어 있을 경우 #비..

jQuery를 사용한 모든 웹페이지는 다음 코드로 시작합니다. $(document).ready()는 문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미입니다. jQuery 이벤트 메서드 중 하나입니다. 이 메서드는 비슷한 기능을 수행합니다. 고전 이벤트 모델은 한 번에 하나의 이벤트만 연결할 수 있습니다. 반면에 jQuery의 이벤트 메서드는 표준 이벤트 모델이나 인터넷 익스플로러 이벤트 모델과 마찬가지로 이벤트로 여러개의 함수를 연결할 수 있습니다. 아래의 예제는 실행하게되면 문서가 준비되는 순간 경고창 세 개가 연달아 표시됩니다. $(document).ready() 메서드는 굉장히 많이 사용되므로 jQuery에서는 간단하게 사용할 수 있는 형태를 제공합니다.

셋(Set)은 중복을 허용하지 않는 데이터 집합입니다. 이전 포스팅 : 2019/12/04 - [DEV/JS] - [JS]맵(Map)과 셋(Set) -1 [JS]맵(Map)과 셋(Set) -1 ES6에서 새로 도입한 데이터 구조인 맵과 셋에 대해서 알아보겠습니다. 맵은 키와 값을 연결한다는 점에서 객체와 비슷하고, 셋은 중복을 허용하지 않는다는 점만 제외하면 배열과 비슷합니다. 이번 포스팅에서는.. ratseno.tistory.com 에서 사용한 예제를 다시 활용하겠습니다. 이번에는 한 사용자에게 여러 역할을 할당하고 싶다고 가정하겠습니다. 예를 들어 "User" 역할은 모든 사용자에게 할당되지만, 관리자는 "User" 역할과 "Admin" 역할을 동시에 가질 수 있습니다. 하지만 같은 사용자에게 같은 ..

ES6에서 새로 도입한 데이터 구조인 맵과 셋에 대해서 알아보겠습니다. 맵은 키와 값을 연결한다는 점에서 객체와 비슷하고, 셋은 중복을 허용하지 않는다는 점만 제외하면 배열과 비슷합니다. 이번 포스팅에서는 맵(Map)에 대해서 알아보겠습니다. 맵(Map) ES6 이전에는 키와 값을 연결하려면 객체를 사용해야 했습니다. 하지만 객체를 이런 목족으로 사용하면 여러 가지 단점이 생깁니다. 프로토타입 체인 때문에 의도치 않은 연결이 생길 수 있습니다. 객체 안에 연결된 키와 값이 몇 개나 되는지 쉽게 알아낼 수 없습니다. 키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 써서 값과 연결할 수 없습니다. 객체는 프로퍼티 순서를 전혀 보장하지 않습니다. Map 객체는 위의 단점들을 모두 해결했고, 키와 값을 연..

자바스크립트의 내장 메서드 중에서 가장 강력하고 유용하다고 알려진 map(), reduce() 함수에 대해서 알아보겠습니다. 개발을 하다보면 배열을 다뤄야하는 경우가 굉장히 많습니다. 최근에 filter()메서드를 유용하게 잘 써먹게되면서, 다른 메서드들에 대해서도 알아봐야겠다는 생각이 들었습니다. (ㅠㅠ 반복문으로 해결하려던 과거의 저를 되돌아보게됬습니다.) 함께 map(), reduce() 함수를 알아보도록 하겠습니다.! map() 메서드 arr.map(callback(currentValue[, index[, array]])[, thisArg]) 매개변수 callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다. -currentValue : 처리할 현재 요소 -index(..

이전 포스팅 : [JS]Promise (프라미스) - 1 에 이어서 이번에는 실무에서 자주 사용될 수 있는 여러 개의 프라미스를 연결해서 사용하는 케이스에 대해서 알아보도록 하겠습니다. 실무에서 개발을 진행하다 보면 화면구성에 필요한 API호출을 순차적으로 해야될 경우들이 자주 있습니다. 화면 구성을 위해서 1번, 2번, 3번 API가 필요할때 2번 API를 호출하기 위해서는 1번 API에서 얻은 값이 필요하고, 3번 API를 호출하기 위해서는 2번 API에서 얻은 값이 필요한 이러한 경우들을 예로 들수 있습니다. 3번 API → 2번 API → 1번 API 3번 API는 2번 API 결과값에 종속적 2번 API는 1번 API 결과값에 종속적 이렇게 순차적으로 호출하기 위해서는 주로 콜백함수를 이용하여 ..