글이 정상적으로 보이지 않는다면 아래 주소로 접속해 주세요. https://egg-programmer.tistory.com/77
그동안 한 일
- 자바스크립트 웹 개발 지식
클로저란 무엇인가.
클로저는 내부함수와 밀접한 관계를 가지고 있다. 내부함수는 외부함수의 지역변수에 접근할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 이러한 메커니즘을 클로저라고 한다.
이벤트버블링과 캡쳐링에 대해 설명하시오.
이벤트버블링과 캡쳐링은 브라우저가 이벤트를 감지하는 방식이다.
이벤트 버블링 : 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성이 있다.
이벤트 캡쳐 : 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.
프로토타입에 대해 설명하시오.
프로토타입의 가장 기본적인 정의 : 론칭 전에 테스트하기 위해 사용되는 최종 제품의 시뮬레이션 또는 샘플 버전
프로토타입의 목표는 최종 제품에 많은 돈과 시간을 쏟아 붓기 전에 제품(과 제품 아이디어)을 테스트하는 것이다.
==와 ===의 차이점을 설명하시오.
자바스크립트에서 ==연산자는 동등 연산자이고, ===연산자는 일치 연산자이다.
==는 비교 대상이 다른 타입이라면 타입을 강제로 변환하여 값을 비교하는 연산자이다.
===는 비교 대상이 같은 타입일 때 비교를 하는 연산자이다. 즉, ==보다 정확하게 비교한다고 할 수 있다.
let, var, const의 차이점이 각각 무엇인가요.
var let const
변수 재선언 가능 불가능 불가능
변수 재할당 가능 가능 불가능
hoisting function-scoped block-scoped block-scoped
랜더링이란 무엇인가요. 또 브라우저가 렌더링되는 과정을 상세히 설명하시오.
랜더링은 논리적인 문서의 표현식을 그래픽 표현식으로 변형 시키는 과정이다. 아직 제품화되지 않은 제품을 전문가가 아니어도 이해할 수 있도록 실물 그대로 그린 완성 예상도이다.
>
브라우저가 랜더링되는 과정 1) DOM 트리 생성 – 노드를 트리형태로 나타낸다. 2) 스타일 구조체 생성 – 브라우저의 자체 스타일, 사용자 정의 스타일, html 태그의 스타일 속성 단계로 처리된다. 3) 랜더 트리 생성 – DOM 트리와 스타일 구조를 더해 랜더 트리를 만든다. 랜더 트리는 노드에 스타일 정보가 설정돼 있고 화면에 표시되는 노드이다. 4) 레이아웃 처리 – 노드의 크기 계산과 배치를 한다. 5) 페인트 – 화면에 노드를 표현한다.
- 생활코딩 WEB1 - HTML & CSS 완강
- 생활코딩 WEB2 - CSS 완강
-
강의 간단 메모
선택자 실행 우선순위 : id > class > element id : 코드에서 한 번만 등장해야 함, 구체적이기 때문에 실행순위가 높음 element : 포괄적이기 때문에 우선순위가 낮음 padding : 내용과 테두리 사이의 간격 margin : 테두리와 테두리 사이의 간격 디자인을 위한 태그들 : div(block line level), span(inline level) 유용한 사이트 : [Can I use ?](https://caniuse.com/)
-
GitHub에 CSS까지 적용하여 Commit 완료
[GitHub 주소](https://github.com/choisohyun/opentutorials_web1)
-
생활코딩 WEB2 - JavaScript
[HTML과 JavaScript의 만남 3 (콘솔)](https://opentutorials.org/course/3085/18869) 까지 수강
- 인프런 예제로 배우는 스프링 입문 (개정판) 학습하려고 인트로 강의 들음