1. 선언과 할당의 차이
변수 이름을 자바스크립트 엔진에 알리는 것을 선언이라고 하고 해당 변수에 값을 저장하는 것을 할당이라고 한다.
변수에 저장된 값을 읽어 들이는 것은 참조라고 한다.
const my_number = 23
const my_number : 선언
my_number = 23 : 할당
2.호이스팅과 스코프
변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라고 한다.
여기서 호이스팅 특징은 변수 선언뿐만 아니라 function, class 등 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)도 포함된다.
스코프는 식별자의 유효범위를 말한다. 선언위치에 따라 유효범위가 다르다.
전역변수의 경우에는 전역 스코프를 ,지역변수는 지역 스코프에 범위를 가지고 있다.
여기서 전역 변수는 어디에서든 참조가 가능하고 지역변수의 경우에는 선언한 함수 내부에서만 사용 가능한 변수를 말한다.
모든 코브 브록(If , for, while 등)이 지역 스코프를 만드는 블록레벨 스코프라는 특성을 가지고 있는데 var로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정하는데 이를 함수레벨 스코프라고 한다.
이러한 치명적인 특성 때문에 블록레벨 스코프를 지원하는 const와 let을 이용한 변수 선언을 추천한다.
3.변수 선언
JS에서 변수를 선언할 수 있는 방식은 크게 3가지가 존재한다.
var, let, const가 그것이다.
var는 재선언과 재할당 모두 가능하다.
let는 재선언은 불가능하지만 재할당은 가능하다. let은 선언단계와 초기화 단계가 분리되어 진행된다. 즉 선언은 호이스팅 특성으로 인해 먼저 인식이 가능하지만 초기화는 런타임 과정에서 실행되기 때문에 변수를 선언하는 과정 전에 해당 변수에 접근하려고 하면 에러가 발생한다.
const는 재선언도 불가능하고 재할당도 불가능하다. 하지만 안에 있는 객체를 변경할 수 있다.
즉 완전 불변은 아니라는 애기이다. const의 경우에는 반드시 선언과 초기화를 동시에 진행해야한다.
3.DOM
DOM이란 Document Object Model의 약자이다. 문서 객체 모델이라는 뜻으로 해석 할 수 있다.
여기서 문서 객체란 html이나 body와 같은 html 문서의 태그들을 자바스크립트가 이용할 수 있게 객체로 만드는 것을 말한다.
DOM은 넓은 의미로 웹브라우저가 HTML 페이지를 인식하는 방식을 의미하고 좁은 의미로는 Document 객체와 관련된 객체의 집합을 말한다.
DOM은 Tree형 자료구조를 가지고 있다. 위쪽노드를 부모노드 아랫쪽노드를 자식노드라고 한다. 부모가 없는 노드를 root node라고 하고 자식이 없는 node를 leaf node라고 한다. 뿌리에서 잎으로 가는 과정이라고 생각하면 쉽다.
여기서 노드란 각각의 모든 객체(body,html,p태그,h태그 등)을 말한다.
3.컴파일타임과 런타임
컴파일 타임은 개발자가 작성한 소스코드를 컴파일하여 기계어로 변환하는 과정을 말하고 이러한 과정을 마친 프로그램이 사용자에 의해 실행되어 동작되는 과정을 런타임이라고 한다.
각 타임별 에러 유형
컴파일타임: 신택스 오류, 파일 참조 오류, 타입체크 오류 등이 있다.
런타임에러: 0나누기 오류, 널(null)참조 오류, 메모리 부족 오류 등이 있다.
4. Position 속성(CSS)
css에서 사용되는 속성 중 Position 속성은 html 문서상에서 요소가 배치되는 방식을 지정한다.
Position 속성은 static , relative, absolute, fixed, sticky가 있다.
Static는 Position의 기본 값으로 html 문서상에서 원래 있어야 하는 위치에 배치된다. 즉 html에 작성한 순서대로 배치되는 것을 말한다.
Relative는 요소를 원래 위치를 기준으로 해서 상대적으로 이동시켜준다. 여기서 요소 위치 이동은 top, bottom, left, right 속성을 이용해서 요소를 원래 위치에서 얼마나 이동시킬 것인가를 결정할 수 있다.
Absolute로 속성을 지정하면 지정된 요소는 이동기준이 자신이 아닌 가장 가까운 부모 요소로 결정된다.
하지만 가장 가까운 부모 요소의 Position이 기본 값 즉 Static의 경우에는 더 상위요소로 올라간다.
만약에 상위 요소에도 Static이 아닌 요소가 없다면 body요소가 배치기준이 된다.
주의!
Position이 Absolute인 요소는 html 문서와 독립되어 앞 뒤에 나온 요소와 더 이상 관계가 없다.
쉽게 말해서 Absolute 요소를 가진 객체가 2번이라고 하면 1번과 3번이 순서대로 보이고 2번 객체의 경우 이와 독립적으로 움직인다고 할 수 있다.
Fixed로 Position을 지정하면 화면을 스크롤하더라도 화면에 고정되어 움직이지 않는다. 왜냐하면 Fixed로 지정된 요소의 이동 기준이 뷰포트이기 때문이다. 뷰포트란 우리가 보고있는 컴퓨터 화면의 영역을 말한다.
즉 전체 화면을 기준으로 얼마나 떨어져 있는지로 위치가 결정된다.
✨Fixed도 Absoulte와 마찬가지로 html 문서상에서 독립적으로 움직이게 된다.
Stickey는 스크롤 영역기준으로 배치하는 것을 말한다. Stickey로 지정된 요소는 스크롤할 때 계속해서 따라온다.
Stickey로 지정된 요소는 스크롤하지 않을 때는 Static처럼 작동하다가 스크롤을 하게 되면 지정된 위치까지는 같이 움직이다가 지정된 위치에 도달하면 움직이지 않고 고정되게 된다. Static와 Fixed를 합친 것과 비슷하겠다.
'개발일기' 카테고리의 다른 글
| 20230922 개발일기 (0) | 2023.09.22 |
|---|