HTML 삽입 미리보기할 수 없는 소스 ( * 클로저 공부에 앞서 우선변수 키워드에 따른 스코프 변화&실행 컨택스트에 대한 이해가 필요하므로 생활코딩 영상이나 게시글을 확인 후 선행 학습을 하고 오기! ) 함수 선언 & 호출 위치에 따른 Scope 범위를 확인하고, 이를 통해 클로저의 개념을 이해해보자. 우선 함수 fn1에서 변수 l0, l1를 호출하면, l1은 fn1의 Local Scope, l0은 Script Scope(전역적으로 접근 가능한 스코프)에 나타나므로 스코프 체이닝에 의하여 호출이 가능하다. 하지만 변수 l2를 담은 fn2 함수를 fn1 함수에 중첩시키지 않고(=자식함수가 아님), Script에 독립적으로 정의한 뒤 fn1 함수 내부에서 fn2를 호출하면 다음과 같은 에러가 발생하는데,..

SPA의 경우, 하나의 페이지로 제작된 웹으로 페이지 갱신(새로고침) 없이 부분적으로 데이터를 변경하는 장점이 있다. 단점은 주소가 바뀌지 않는다는 것이다. 초창기에는 주소 뒤에 해쉬뱅(#!)을 붙여 뒤에 하위 주소를 넣었지만, 이는 제대로 된 주소로 보지 않는다. 따라서 해쉬뱅 방식 대신 브라우저에서 제공하는 History API를 사용하여 히스토리 관리를 할 수 있다. 이 API는 기존 history 객체(window.history)를 그대로 활용한다. 따라서 자바스크립트로 뒤로가기 (history.back()), 앞으로가기(history.forward()), 지정한 위치로 가기(history.go(인덱스))를 모두 사용할 수 있지만, SPA일 경우를 가정하므로 위 메소드를 사용하지 않겠다. 주소 내..

JS를 공부할 때 ES6+ 이후 순수 자바스크립트의 기본 문법과 브라우저 API 개념이 혼동되다 보니 헷갈리는 부분이 생길 수 있다. 브라우저 위에서 DOM 요소들을 가지고 와서 동적으로 조정하는 것을 마치 자바스크립트 언어를 배우는 것마냥 공부하고 있는데, 이렇게 하다보면 헷갈리고 기초가 제대로 잡히지 않을 수 있다. 자바스크립트 언어 자체의 문법(ES6+)과 브라우저에서 사용할 수 있는 API를 구분해서 공부하는 것이 좋다. 자바스크립트 문법을 이용해 프로그램을 잘 만들 수 있는지 중점적으로 공부하고, 로직을 구축하고 사용함에 있어 자연스러워졌을 때 ->브라우저에서 사용할 수 있는 다양한 함수들, 즉 API들을 사용해보면 좋다.(무엇을 사용해서 브라우저 요소를 가지고올 수 있는지 어떻게 네트워크 통신..

https://youtu.be/_DLhUBWsRtw Class 를 사용하는 사용자가 방어적인 자세로 시용할 수 있도록 하는 것 get 키워드를 이용해 값을 리턴 set 키워드를 이용해 값을 설정. 대신 값을 설정하므로 value를 받아와야 함.

HTML 삽입 미리보기할 수 없는 소스 알아야할 기본 개념들. class 문법 - constructor, method addEventListener scroll - scrollY resize 기하 정보 관련 프로퍼티 (DOM Element API) - 기하 프로퍼티의 값은 픽셀 단위의 숫자이다. - offset은 요소가 화면에서 width, height, padding, scrollbar, border를 합친 전체 크기를 뜻함 (margin 제외) .offsetParent : 가장 가까운 조상 요소를 기준으로 좌표를 계산한다. 조상의 조건: 1)CSS Position이 static이 아닌 가장 가까운 조상 / 2)td, th, table / 3) body .offsetTop, .offsetLeft : o..

HTML 삽입 미리보기할 수 없는 소스 1. 변수와 함수의 호이스팅 개념 이해하기 2. 스택, 실행 컨텍스트, 전역환경 등의 개념 이해하기