- opener 브라우저에는 메인 화면과 팝업창이 존재할 때 가 있다. 이때 팝업창과 메인 화면에서 데이터를 서로 이용하거나 이벤트를 전달해야할 때 가 있다. 이럴 때 사용할 수 있는 개념이 'opener'다. - 사용법 어차피 필요하면 찾아서 사용하게 되는데 내가 오늘 사용한 개념만 간단히 정리하자. 자식에서 부모값을 사용할 수 있고 부모에서 자식값을 사용할 수 있다. 부모란 메인페이지를 말하고 자식이랑 팝업창을 말한다. - 실습 노란창이 부모고, 빨간창(팝업)이 자식이다. var a = 10 window.open() // 팝업 열기 위한 명령어 이와같이 부모창의 콘솔에서 변수를 만들어주고 팝업을 열어주었다. opener.a window.opener 라고 사용해도되지만 자식창에서 opener.a를 입력..

- Javascript로 html 조작하기 글씨, 색, 사이즈 등 html, style, class등 필요한거 모두 찾아서 바꿀 수 있다. 안녕하세요 김지원 입니다. - UI만드는 단계 1.HTML/CSS로 미리 디자인 원하는 UI를 만들고 none으로 해놓음(alert의경우) 2.이벤트가 발생할경우(버튼클릭등) UI를 보여달라고 자바스크립트 코드 짜기 알림창 UI보이기 닫기 .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display: none; /* 평소에는 숨겨두기 */ /* 보여줄때는 display:block; */ }

어렴풋이만 알고 있었는데 호이스팅이 뭔지 아냐고 물어보니 정확하게 대답을 못했다. 이참에 하나씩 제대로 공부를 해봐야겠다. - 호이스팅(hoisting) : js의 동작 순서에 대해 이해하기 "변수와 함수의 메모리 공간을 선언 전에 미리 할당하는것" "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는것" var : 호이스팅 시 undefined로 변수 초기화 (선언과 초기화가 동시에 이루어짐) -> 변수 할당이전에도 호이스팅해 사용이 가능하다. console.log(name); // 1)undefined var name = "jiwon"; console.log(name); // 2)jiwon var name = "banana"; console.log(name); // 3)banana l..

자바스크립트 자바스크립트는 코드가 작성된 순서대로 작업을 처리하는 동기적 언어 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 만약 이와같이 중간에 특정작업이 오래걸리면 전반적인 흐름이 느려진다. 이와같이 멀티 쓰레드 방식으로 작동한다면 작업 분할이 가능하지만 자바스크립트는 싱글 스레드 언어이다. 비동기 작업 씽글 쓰레드 방식을 이용하면서 동기적 작업의 단점을 극복하기 위해 여러개의 작업을 동시에 실행시킨다. 먼저 작성된 코드를 기다리지 않고 바로 다음 코드를 실행하는 방식 대표적으로 setTimeout함수가 비동기 방식으로 동작하는 함수이다. function taskA(a, b, cb) { // cb는 콜백함수..

Truthy & Falsy - 자바스크립트는 자료형 상태에따라 참 거짓(TRUE,FALSE)로 평가하는 자료형들이 있다. const getName = (person) => { if (person === undefined || person === null) { return "객체가 아닙니다."; } return person.name; }; let person = null; const name = getName(person); console.log(name); 이와같이 작성할 수 있는것을 아래와같이 간소화 가능하다. const getName = (person) => { if (!person) { return "객체가 아닙니다."; } return person.name; }; let person = null;..

- 변수와 상수 var age = 10 var age = 15 // 이렇게 사용하는것은 옳지않다. let age2 age2 = 10 // var의 문제점을 해결하기위해 let을 사용한다. const age3 // 오류발생함 const age3 = 10 // 선언과 동시에 초기화 해야함 - 자바스크립트의 자료형 - 연산자 typeof : 타입을 알려준다 typeof(변수) - 함수표현식, 화살표 함수 console.log(helloB) let helloA = function(){ return "안녕하세요 여러분" } //함수 표현식 : 호이스팅 되지 않는다. console.log(helloA) function helloB(){ return "안녕하세요 여러분" } //함수 선언식 : 호이스팅이된다. let..

Virtual DOM 1.브라우저의동작 DOM tree 생성 : 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성 render tree생성 : css파일과 inline 스타일을 파싱 DOM + CCSOM 렌더 트리를생성 Layout(reflow) : 각 노드들의 스크린 에서의 좌표에 따라 위치결정 Paint (repaint) : 실제 화면에 그리기 문제는, 변화가 발생하면 렌더트리가 재 생성 된다는것 2.Virtual DOM의 등장 SPA를 사용하면서 즉각적으로 DOM tree를 변경할 일이 많이 생김, 그래서 최적화가 필요해져서 등장하게 된것이 버츄얼 돔이다. DOM 의 사본, 복사본이라고 할 수 있다. 진짜 DOM과같은 속성들 class등을 가지고 있지만 실제 DOM이 가지고 있는 ap..

브라우저 렌더링 브라우저의 동작 원리 HTML 마크업을 처리하고 DOM 트리를 빌드한다. 무엇" 그릴지 결정한다 CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. 어떻게그릴지 결정한다. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. 화면에 그려질 것만결정 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. Box-Model을 생성한다. 개별 노드를 화면에 페인트한다.(or 래스터화) 위는 요약적인 설명이고 좀더 구체적으로 보자면 웹 브라우저의 구조 이와같이 브라우저가 구성된다. User INterface는 주소 표시줄, 이전/다음/새로고침 버튼등이있고 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를 말한다. Rendering Engine HTML과 CS..