RATSENO

Vite를 사용하여 시작 npm init vite-app hello-vue3 # 또는 yarn create vite-app hello-vue3 vue-cli를 사용하여 시작 npm install -g @vue/cli # 또는 yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset

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

var url = "/api?"; url += "pageNo=" + 1; url += "&pageSize=" + 10; 위의 방식처럼 노가다성 코딩 대신 jQuery의 jQuery.param() 함수를 이용하여 url parameter를 쉽게 생성하여 사용할 수 있습니다. var params = { name:"홍길동", title:"홍길동전" }; var str = jQuery.param( params ); var str2 = $.param( params ); console.log(str); console.log(str2); //name=%ED%99%8D%EA%B8%B8%EB%8F%99&title=%ED%99%8D%EA%B8%B8%EB%8F%99%EC%A0%84 //name=%ED%99%8D%EA%B8%..

위와 같은 코드가 작성되어 있을 때, 텍스트 인풋 영역에서 커서가 있는 상태에서 키보드 Enter를 치게 되면 submit이 일어나게 됩니다. 이를 방지하기 위한 간단한 방법을 두 가지 정리하겠습니다. 1. 태그 안에 onsubmit="return false"을 작성하여 submit 방지 2.Enter keydown 이벤트 사용하여 방지 document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { event.preventDefault(); }; }, true);

최신 버전의 브라우저들은 ES6가 동작을 합니다. 하지만 프로젝트가 진행되는 사이트마다 브라우저 버전이 낮은 경우(또는 IE....) ES6가 동작하지 않을 때가 많습니다. 이럴 때는 ES6에서 사용하고 싶은 메서드를 우리가 작성하고 있는 소스에 적용하거나, 프로젝트마다 공통으로 작성되는 JS파일에 해당 메서드를 작성하면 됩니다. developer.mozilla.org MDN Web Docs Hacks Blog Read more at hacks.mozilla.org Nearing the end of March now, and we have a new version of Firefox ready to deliver some interesting new features to your door. This mo..

두 개의 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에서는 간단하게 사용할 수 있는 형태를 제공합니다.