본문 바로가기

프로그래밍/JavaScript2

[JS] # 1. 호이스팅 (Hoisting) & TDZ (실행컨텍스트와 var,let,const) 호이스팅은 JS를 다뤄본 적이 없으면 처음 듣는 개념일 수도 있다.이름 그대로 해석하자면 "끌어올리다" 라는 뜻인데, JS만의 특별한 기능이다. print(a)a = 5; 이 코드를 vscode에서 돌려보면  a가 정의되지 않았다며 NameError가 뜬다.당연하다. 코드라인을 탑다운 식으로 읽어가고 있으니까! console.log(a);var a = 5; 근데 얘는 심상치가않다. vscode에서 파이썬 코드를 작성하면 벌써부터 에러 표시 밑줄이 뜨는데, 얘는 아니다.설마? 하고 돌려보면 "undefined" 라는 문구가 출력될뿐, 에러라고 표현되지는 않는다. 왜 그럴까? 이게 바로 호이스팅이다.호이스팅은 일단 변수가 어디서 선언, 초기화, 할당되었든 최상단으로 "끌어올려진 것" 처럼 동작된다. 그럼 여.. 2024. 7. 18.
[JS] # 0. 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 먼저 위 2가지 특징을 쓰기 전에, 렌더링에 대한 설명이 필요할 것 같다.렌더링 : HTML/CSS 를 각각 Parser를 통해 개발자가 작성한 문서를 읽고 화면에 결과물을 그려내는 작업 일단 이것만 봐도 이해가 확 와닿진 않을 것이다.지금 우리가 보고 있는 이 화면도 HTML문서로 작성이 되었고, 폰트나 색깔, 레이아웃 배치 등등은 CSS로 작성이 된 것이다. 당장 네이버를 키고 F12를 누르면 바로  현재 보고 있는 화면이 어떤 코드들로 이루어졌는지 알 수 있다.  이게 지금 현재 네이버 메인화면의 개발자도구(F12) 화면이다. 한눈에 다 보긴 어렵지만, 오른쪽 사이드바에 "DOM Breakpoints"라는게 보일 것이다. DOM. 오늘은 이거에 집중해보자. DOM은 HTML의 구조를 보여주는 것인데.. 2024. 7. 18.