[error is not defined 에러] ReferenceError: error is not defined
2021. 4. 27. 20:10
프로그래밍/JavaScript
ReferenceError: error is not defined 비동기 통신 중 네트워크가 제대로 통신되는지 확인하기 위해 네트워크 탭을 보니 pending(보류)이 뜸👇 오류를 찾기 위해 콘솔창을 확인해보니 ReferenceError: error is not defined 가 떠있었음 원인 script 태그가 제대로 실행되지 않았기 때문에 발생한 에러 스크립트 태그가 제대로 닫혀있지 않은 경우 혹은 오탈자로 인한 에러 해결 방법 수정한 코드 중 태그가 제대로 닫혀있는지 확인 후 태그 닫아주거나 오탈자 확인 후 수정해주기🎉
rel="noreferrer noopener"를 쓰는 이유
2021. 4. 9. 19:43
프로그래밍/JavaScript
보안 위험이 사라지도록 rel="noreferrer noopener" 꼭 써줘야 함 target="_blank" rel="noreferrer noopener" 새창을 열었을때 누가 열었는지에 대한 정보를 없애버림
ES6의 const와 let
2021. 3. 8. 20:39
프로그래밍/JavaScript
const와 let const는 ES6 문법에서 새로 도입한 것으로 한 번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드 let은 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드 ES6 이전에는 값을 담는 데 var 키워드를 사용했지만 var 키워드는 scope(해당 값을 사용할 수 있는 코드 영역)가 함수 단위임 function myFunction() { var a = "hello"; if(true) { var a = "bye"; console.log(a); // bye } console.log(a); // bye } myFucntion(); if문 바깥에서 var 값을 hello로 선언하고, if문 내부에서 bye로 설정함 if문 내부에서 새로 선언했음에도 if문 밖에서..
Array.prototype.filter()
2021. 3. 5. 20:31
프로그래밍/JavaScript
Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] 작은 값 걸러내기 값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 filter()를 사용 function isBigEnough(value) { return v..
화살표 함수
2021. 2. 10. 20:38
프로그래밍/JavaScript
화살표 함수 선언 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 간략하게 함수를 선언할 수 있음 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아님 화살표 함수의 기본 문법은 아래와 같음 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략 가능 (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략 가능 // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일..
07.23(정규표현식)
2020. 7. 23. 20:33
프로그래밍/JavaScript
정규표현식 특정패턴을 지닌 문자열 집합을 검색할 수 있는 형식언어 유효성검사, 검색, 문자열대체 등 다양하게 활용(특정언어에 제약을 받지 않음) 일반적 조건문을 사용해서 검사하는 것보다 훨씬 간단하지만, 간단한만큼 표현식 숙지가 어려움 정규표현식 객체 생성 및 사용 btn1.onclick = () => { //1. new RegExp let regExp1 = new RegExp('script'); //2. /정규표현식/ let regExp2 = /script/; //3. 혼합 let regExp3 = new RegExp(/script/); let str = 'javascript jquery ajax'; //정규표현식 객체 메소드 : exec (제일 많이 사용하는 건 test) area1.innerHTML..
07.22(이벤트)
2020. 7. 22. 20:22
프로그래밍/JavaScript
이벤트(event)란? 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행함 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 함 이벤트핸들러 함수 바인딩 on이벤트 속성에서 함수 실행(계속해오던 방식) 스크립트태그 내에서 요소에 on이벤트 속성 지정 addEventListener(이벤트명, 콜백함수) 이벤트 객체 이벤트 발생시 관련 정보를 가진 객체, 이벤트핸들러 함수의 첫 번째 인자로 전달 이벤트 발생 객체 이벤트객체.target 속성값 이벤트 핸들러 함수안에서 this 키워드로 접근 이벤트 함수 안에서는 this가 window가리키지 않고 이벤트 발생객체 가리킴 이벤트 버블링 자식노드에서 발생한 이벤트는 부모노드로 자동..
07.21(Window 객체, BOM, DOM )
2020. 7. 21. 20:58
프로그래밍/JavaScript
window 객체 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨 window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됨 open 새로운 팝업 또는 탭을 열 수 있는 메소드 setTimeout 일정시간 이후에 지정한 콜백함수를 호출 (() => { setTimeout(function(){ alert("5초가 지났습니다."); }, 5000); })(); setInterval | clearInterval 일정시간 간격으로 콜백함수를 호출 생성된 인터벌함수를 제거 BOM Browser Object Model navigator location history ..