방식을 사용하면, 화면이 전환되거나 새로운 창을 띄어야하는 문제점이 발생한다. 업로드 완료 후 callback 받는 방법도 고려해야하기 때문에 생각해야할게 이만저만이 아니다~ 내에 type=file이 있을 경우 enctype을 multipary/form-data로 지정해줘야 한다. 지정하지 않을 경우 application/x-www-form-urlencoded가 default로 설정된다. axios라고 썼는데 이미 jquery ajax를 활용한 예제도 많다.(구글링!) 나중에 검색해서 사용할 수 있도록 예제코드를 작성해놓겠다. upload: function(){ const formData = new FormData(); const file = document.getElementById("file"); f..
프로그래밍 노트/JAVASCRIPT
1. concat() 연산자 사용 파라미터로 받은 배열이나 값들을 기존의 배열에 합쳐서 새로운 배열을 만들어 리턴 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9] arr1.concat(4, 5, [6, 7, 8], 9); // [1, 2, 3, 4, 5, 6, 7, 8, 9] 2. ... spread operator 전개 연산자 사용 spread operator는 원소들을 쪼개어 개별요소로 리턴한다. 이 쪼개진 개별 요소들을 인자로 가지는 새로운 배열을 생성하면 아래와 같다. const arr1 = [1, 2, 3]; cons..
들어가기전.. ES6 문법을 Node로 실행하기 https://www.daleseo.com/js-babel6-node/ Node를 사용하면 자바스크립트(.js)을 실행시킬 수 있다. 위 블로그에 설명이 잘나와있다.(나도 따라함...ㅎㅎ 사실Vue 프로젝트 안에서만 사용해봤기 때문에.. 신기하다..) https://www.daleseo.com/js-module-import/ >> Hello World! >>> CORN : 30 >>> Hello World! >>> CORN : 30 단일 객체 내보내기/불러오기 하나의 자바스크립 모듈 파일에서 단 하나의 객체를 내보내고 불러오는 방법을 알아보자 내보내기(export) 단일 객체를 내보낼 때는 export default 키워드를 사용한다. export defa..
7.5 함수를 이용해서 치환하기 정규표현식을 replace의 첫 번째 인자로 전달하면 단순히 고정된 문자열이 아니라 패턴에 일치하는 부분을 하나 치환한다. replace()의 강력한 기능은 고정된 문자열 대신 함수를 치환할 값으로 제공할 수 있다는 점 이다.두 번째 인자로 함수를 넘길 경우, 일치하는 부분을 찾을 때마다 다음과 같은 일련의 매개변수를 가지고 호출이 된다. 매치되는 전체 문자열 해당 매치 내에 포함된 캡처들(캡처는 배열이 아니라 각각 하나의 매개변수로 전달됨) 원본 문자열에서 매치되는 부분의 위치(index) 원본 문자열 예제) replace 사용 function upper(all, letter){return letter.toUpperCase();} // 대문자변환 console.log("..
매치된 부분을 캡처하기 정규 표현식의 유용함은 검색한 결과를 저장(capture)해 놓고, 이를 이용해서 다른 일을 하고자 할때 빛을 발한다. 매치된 부분 캡처하기(지역, 전역) 정규 표현식의 match()메서드는 일치하는 부분을 찾아내면 캡처된 값들의 배열을 반환하고, 일치하는 부분이 없으면 null을 반환한다. match()로부터 반환된 배열에는 항상 첫 번째 인덱스에 일치하는 내용 전체가 저장되어 있고, 그 뒤에 캡처된 내용이 순서대로 저장되어 있다. g 플래그가 설정된 전역 정규 표현식을 이용하면 match()메서드는 조금 다른 값을 반환한다. 전역 정규 표현식은 지역(local)정규 표현식과 달리 첫 번째 매치되는 문자열만 찾지 않고 모두 매치되는 문자열을 찾는다. 이 때 각 매치 결과 내에 포..
정규 표현식 컴파일하기 정규 표현식은 여러 단계의 처리과정을 거친다.두 가지 주요한 단계로 컴파일(compilation) 과 실행(execution)이 있다. 정규 표현식이 처음 만들어지면 컴파일이 일어나고, 컴파일된 정규 표현식으로 문자열 내의 패턴을 찾으려고 하는 것이 바로 실행(execution)이다.일부 브라우저는 정규 표현식들의 컴파일 결과를 캐시해 두는 경우가 대부분이다. 그렇기 때문에, 복잡한 정규 표현식을 다루는 경우 나중에 사용할 표현식을 미리 정의해 두면 좋은 속도 향상을 얻을 수 있다. 컴파일된 정규 표현식을 만드는 두 가지 방법 var regex1 = /test/i; var regex2 = new RegExp("test", "i"); console.log(regex1.toString..
정규 표현식 살펴보기 1. 정규 표현식에 대한 설명정규 표현식 => 텍스트내에서 일치하는 문자열을 찾기 위해 문자열의 패턴을 표현하는 방식정규 표현식은 이런 패턴을 정의할 수 있도록 용어(terms) 와 연산(operators)로 구성된다. 정규 표현식을 생성하는 방법 정규 표현식 리터럴을 이용하는 방법 RegExp 객체의 인스턴스를 생성하는 방법 var pattern = /test/; var pattern = new RegExp("test"); 보통 개발시점에 어떤 정규식을 이용할지 알고 있는 경우에는 정규 표현식 리터럴을 사용하고, 실행 중에 문자열을 이용해서 동적 으로 정규 표현식을 생성해야 할 때는 생성자(RegExp)를 이용한다. 정규 표현식과 함께 사용할 수 있는 플래그 i - 대소문자를 구별..
정규 표현식이 멋진 이유 만약, 우리가 특정 데이터가, 미국의 우편번호 형식이 맞는지 boolean 값으로 반환하는 함수를 만든다고 생각해보자. => 99999-9999 (다섯자리 - 네자리)정규표현식을 사용하지 않고, 우편번호 형식을 검사한다면 아래와 같이 짤 수 있다. function isThisAZipCode(candidate){ if(typeof candidate !== "string" || candidate.length != 10) return false; for(var n=0; n
2 실수하기 쉬운 것들 2-1. 객체 확장하기최악의 실수는 Object.prototype을 확장하는 것이다.이 것은 모든 객체가 추가된 프로퍼티를 받는 다는 것을 의미하고, 어떤 객체의 프로퍼티를 순회할 때 새로 추가한 프로퍼티가 같이 순회되어 문제가 될 수 있다.예제 코드(객체에 있는 모든 프로퍼티 이름(key)의 배열을 반환하는 메서드) Object.prototype.keys = function(){ var keys = []; for(var p in this) keys.push(p); return keys; }; var obj = { a : 1, b : 2, c : 3}; console.log(obj.keys().length == 3); // false 코드만 보면 테스트에 성공할 것 같지만, 실패한..
객체 지향과 프로토타입 프로토타입은 객체의 타입을 정의하는데 편한게 사용하는 수단이지만 실제로는 함수의 기능이다.자바스크립트에서 프로토타입은 객체의 프로퍼티를 정의하고, 객체의 인스턴스에 자동으로 적용되는 기능을 정의하는 편리한 수단이다. (청사진 역할, java 클래스와 비슷한 역할을 함) 1. 인스턴스 생성과 프로토타입 모든 함수에는 prototype 프로퍼티가 존재(생성자로 사용하지 않으면 필요 없음)1-1. 객체 인스턴스 생성객체 청사진으로서의 프로토타입 function Corn(){}; Corn.prototype.swingSword = function(){ return true; }; var corn1 = Corn(); console.log(corn1 === undefined); var corn..
