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들을 사용해보면 좋다.(무엇을 사용해서 브라우저 요소를 가지고올 수 있는지 어떻게 네트워크 통신..

HTML 삽입 미리보기할 수 없는 소스 앞서 공부한 Flexd와 Grid의 큰 차이는 아래와 같다. Flex보다 더 복잡한 레이아웃 표현이 가능하다. Flex는 한 방향 레이아웃 시스템(1차원) Gird는 두 방향(가로-세로) 레이아웃 시스템(2차원) Flex와 마찬가지로 컨테이너와 아이템이 있으면 된다. 부모 요소인 div.container를 Grid Contaienr, 자식요소인 div.item들을 Grid Item이라고 부른다. 컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각 아이템들이 어떤 형태로 배치되는 것. Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작되며 1. 컨테이너에 적용하는 속성, 2. 아이템에 적용하는 속성 두 가지로 나뉜다. G..

@web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistory.com 애니메이션, 스크롤 이벤트, 마우스오버 등등 다양한 효과를 소개하는 사이트를 찾았습니다. HTML, CSS, JS 코드가 공개되어있어 유용할 거 같아 공유합니다 :> 출처