Development/JavaScript9 Object.assign과 Object.create Object.create Object.create는 기존 객체의 속성들을 상속받는 새로운 객체를 생성하기 위해 사용하는 Object 메서드. Object.create(proto\[, propertiesObject\]) proto : 새로 생성할 프로토타입이 될 객체 propertiesObject : 새로 생성할 객체에 추가될 속성 create는 회사에서 구축한 자체 프레임워크의 오류를 수정하며 알게 됐다. 테이블의 column을 만드는 class를 상속받아 사용 중이었다. 원래 코드는 Object.assign({}, col)과 같은 식으로 적혀있었다. 그런데 자꾸 assign된 객체에서 class에 있던 메서드를 사용하지 못한다고 말하는 거다. 한참 헤메다가 새로 assign한 객체와 기존 객체(col).. 2022. 5. 17. 비동기 Promise 비동기 - Promise Promise는 비동기(async)작업의 최종 완료 또는 실패를 나타내는 객체이다. 제작코드(producing code)와 소비코드(consuming code)를 연결해준다. 프로미스 사용 이유 JS가 처음 나온 시기에는 이벤트 발생 -> 콜백 함수 호출 정도의 간단한 작동을 수행했다면, 이제는 callback hell이라 불릴 만큼 콜백이 중첩되기도 한다. 이를 해결하기 위해 Promise라는 패턴을 활용한다. 프로미스를 활용하면, 비동기 작업들을 순서대로 수행할 수 있게끔 하거나, 병렬로 진행하는 등 함수 조작이 수월해진다. 제작코드 & 소비코드 먼저 제작코드란, 시간이 걸리는 일련의 작업을 의미한다. 소비코드는 제작코드의 결과를 기다렸다 사용하는 코드이다. 제작코드를 사용하.. 2022. 5. 16. 자바스크립트 호이스팅 Hoisting 코드를 작성하면 위->아래로 순차적으로 진행되는 것이 일반적이다. 그러나 자바스크립트에서는 함수가 변수보다 위에 작성되었더라도 함수를 사용하는 것이 가능하다. 간단히 말해, Hoisting은 모든 선언(var, let, const, function 등)을 가장 위로 끌어오는 것이며, 이 과정에서 선언과 할당은 분리된다. 동작 변수의 범위에 따라 다르게 동작할 수 있다. 전역 (global scope) : 스크립트 최상단으로 변수가 끌어올려진다. 함수 (function scope) : 함수의 최상단으로 변수가 끌어올려진다. 최상단으로 변수가 끌어올려지더라도, 변수의 선언만 끌어올리는 것이다. //console.log(hhh); // Reference Error console.log(hois.. 2022. 5. 13. 자바스크립트 DOM이란 DOM (Document Object Model) DOM은 HTML 문서가 '객체 모델'로 변환되어 다양한 프로그램에서 사용되게끔 한 것이다. DOM을 이용해 자바스크립트에서 html 요소를 자유자재로 변경할 수 있다! js파일로 html 요소 변경하기 html, css, js 파일을 IDE에서 편집하고 인터넷의 콘솔창에서 결과를 확인 Hi there! :) 우선 아래 코드의 실행 결과이다. js 파일을 이용해 변경 console.log(document.getElementById('berry')); //'id'속성을 가진 요소를 찾아 객체로 반환 berry.innerHTML = "Hi! From JS"; //제목변경. 여전히 html 파일의 제목은 this work. berry.style.color .. 2021. 9. 25. 이전 1 2 3 다음