Front-end/JavaScript Language 16

Console.log()

https://developer.mozilla.org/ko/docs/Web/API/Console/log Console.log() - Web API | MDN Web Console에 메시지를 출력합니다. developer.mozilla.org 1) console.log 2) console.debug 3) console.dir 4) 객체 로깅 console.log(obj)를 사용하지 말고 console.log(JSON.parse(JSON.stringify(obj)))를 사용하시기 바랍니다. 콘솔 추가 api https://developer.chrome.com/docs/devtools/console/api/#consoledirobject Console API reference - Chrome Developer..

여러 함수(Filter, Splice, FindIndex, Find...)

1. filter 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용 const numbers = [1,2,3,4,5,6]; const result = numbers.filter(number => number>3); console.log(numbers); //[1,2,3,4,5,6] console.log(result); //[4,5,6] 2. splice const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.s..

var, let, const 변수 선언 차이

1. var var name = 'hello' console.log(name) // hello var name = 'good night' console.log(name) // good night var는 변수를 선언한 후에 다시한번 var로 선언해도 에러가 나오지 않고 각기 다른 값이 출력된다. 이를 보완하기위해 추가된 변수 선언방식이 아래의 let 과 const이다. let과 const의 공통점은 위에서 이미 변수가 선언되었을 경우 아래서 변수 재 선언이 되지 않는다.(아래의 에러메시지 출력됨) //Uncaught SyntaxError: Identifier '******' has already been declared 차이점(immutable여부)은 아래와 같다. 2. let let은 변수 재할당이 가..

LocalStorage, SessionStorage, Cookie -Jwt

1. LocalStorage vs. SessionStorage 웹 스토리지 객체인 LocalStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 페이지 새로고침(sessionStorage)을 하더라도, 브라우저를 다시 실행해도(localStorage)데이터가 사라지지 않고 남아있다. 웹스토리지 객체는 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다. 1) LocalStorage의 주요특징 : 오리진(도메인, 포트, 프로토콜)이 같은 경우 데이터는 모든 탭과 창에서 공유된다. 또한, 브라우저나 OS..

location.href vs. location.replace()

1. location.href = 'index.jsp' location.href는 객체의 속성이며, 주소 히스토리가 기록되기 때문에 뒤로 가기 버튼을 누른다면 이전 페이지로 이동이 가능하다. 따라서 일반적인 페이지 이동시에 사용한다. 2. location.replace = 'index.jsp' location.replace()는 메서드로 작동되며, 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. 따라서 이전페이지로 접근이 필요 없는 경우 보안상 덮어 씌울 때 사용한다. 3. History.back() History.back() 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시한다. 즉, history.go(-1)와 같다. 이전 페이지가 없는 경우 아무것..