내가 보려고 만든 개발 공부 일지

React 에서 페이지 전환할때 사용하는 react-router 는 history.push 를 통해 마치 SSR 처럼 브라우저 주소를 바꿔주고 동시에 Root 엘리먼트의 내용물도 바꿔준다. 이걸 순수 JS 로 구현하고자 한다면 history.pushState 를 사용하면 된다. History.pushState 는 페이지 이동 없이 주소만 바꿔준다. (브라우저의 뒤로가가 버튼이 활성화 된다.) 브라우저 페이지를 이동하게 되면 window.onpopstate 라는 이벤트가 발생하게 되는데, pushState 를 했을때는 popstate 이벤트가 발생하지않고, 뒤 / 앞으로 가기를 클릭 했을때 popstate 이벤트가 발생하게 된다. 즉, pushState 와 popstate 둘을 이용하여 SPA 의 페이지 ..

이전 글에 이어서 이번엔 프로토타입의 Prototype object 란 개념에 대해 정리해본다. 함수는 정의될때 prototype object가 어딘가에 같이 생기고 생성된 함수는 .prototype이라는 속성으로 prototype object에 접근할 수 있다. 이 prototype object는 일반적인 객체와 같고 안에는 constructor(생성자) 와 __proto__ 속성을 가지고 있다. 또한 prototype object는 일반객체이므로 속성을 맘대로 추가/삭제 할 수 있다. (추가/삭제 시 이 함수로 만들어진 객체들은 이 값을 공유하므로 당연히 객체들의 속성들도 그대로 바뀐다.) function Person(){} var kim = new Person(); constructor는 정의된 함..

in 연산자는 객체에 지정된 속성이 있는지를 확인한다. "prop" in obj --> 객체 obj 에 "prop" 이라는 속성이있다면 true, 없다면 false 를 리턴한다. 객체 기본 속성인 hasOwnProperty 도 해당 객체의 속성유무를 판단해 true / false 를 리턴하는데, 그럼 이 둘의 차이는 뭘까..? 아래 예제를 보자. function Person(){}; Person.prototype.eyes = 2; var kim = new Person(); kim.hasOwnProperty("eyes"); // false "eyes" in kim; // true 위 코드에서 객체 kim은 eyes를 직접 가지고있지 않기때문에 hasOwnProperty 가 false 를 리턴하지만 in 은..

Javascript 객체 먼저, 자바스크립트에서 객체란 무엇인지부터 간략히 정리해보자. js 에서 모든 객체는 언제나 함수에 의해 생성된다. function Person(){} // 함수 정의 var kim = new Person() // 함수로 객체를 생성 이런식으로 말이다. 흔히 쓰는 var obj = {} 이런 코드도 함수랑 전혀 상관없어 보이지만 사실 var obj = new Object() 와 같은 코드다. (Object는 js 기본 함수) Object 뿐 아니라 Function, Array 도 모두 마찬가지다 (new Function(), new Array()) 즉, js에서는 기본타입인 number, string, boolean 과 특수값 null, undefined 빼고는 모두 객체다. 사..