JavaScript/DreamCoding 34

자바스크립트 객체 복제 방법

Object.assign(target, ...sources) 메서드를 사용하면 첫번째 인자로 두번째 인자의 속성들을 복사할 수 있음. 따라서 위와 같이 언뜻 보면 원본과 복사본이 서로 영향을 주지 않고 변경이 가능한 것 처럼 보인다. 하지만 단순 속성이 아닌 객체나 배열 속성을 변경해보면 아래와 같이 여전히 서로 영향을 준다는 것을 알 수 있음. 객체를 하나의 트리 구조로 봤을 때 최상위 레벨의 속성만 복사를 하는 Object.assign(target, ...sources) 메서드의 동작 방식에 있다. 객체 트리의 최말단 노드까지 복사되지 않기 때문에 이러한 복제 방식을 얕은 복제(Shallow Clone)라고 일컽는다. 56번 line을 보면 의도적으로 깊은 복제 대신에 얕은 복제를 하는 경우도 있을 ..

JSON 개념 정리 및 활용(DreamCoding _javascript_10)

Hypertext(문서나, 이미지파일들, 웹사이트에서 이용되어지고 있는 hyperlinks) Transfer Protocal로써 어떻게 hypertext를 서로 주고 받을 수 있는지를 규약한 protocol의 일종이다. client는 server에게 data를 request해주고 server는 client에게 그에 맞는 응답을 response해준다. http를 이용해서 server에게 데이터를 요청해서 받아올 수 있는 방법으로는 AJAX를 썼다. (Asynchronous JavaScript And XML)=> 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술을 의미 (대표적인 예로는 XHR, XMLHttpRequest라는 object)가 있다.) 브라우저 API에서 제공하는 object중 ..

DreamCoding _1_javascript_2

head안에 script가 있으면 한줄씩 분석 한 것을 css요소와 병합해서 DOM요소로 변환하게 된다. => 어떻게 자세히 DOM요소로 변환할까 생각하기.(일단은 browser가 한줄 한줄씩 읽는다고 생각하기) 단점 : javascript가 사이즈가 클 경우 사용자가 웹사이트를 보는 데 까지 많은 시간이 소요가 된다. => script를 head에 그대로 포함하게 하는 것은 좋지 않다. body의 div안에 script를 넣어서 하면 browser가 html을 다운받아서 parsing해서 그 다음에 fetching을 하고 executing을 하게 된다. 단점 : 사용자가 기본적인 html의 컨텐츠를 빨리 본다는 장점은 있지만 만약에 웹사이트가 javascript에 매우 의존적인 것이라면 사용자가 의미있..