본문 바로가기
반응형
클로저(Closure) 이해하기 클로저(Closure)란? 함수는 중첩이 가능한데, 내부 함수 객체가 생성되면 이 객체는 자신을 생성한 외부 함수에 대한 활성 객체의 참조를 가지게 된다. 이를 클로저(closure)라 한다. 즉, 클로저를 통해 내부 함수에서 외부 함수의 스코프에 접근 할 수 있다. ✅ 자바스크립트는 함수가 호출되면 활성 객체(activation object)가 만들어진다. 이것은 숨겨진 데이터 구조로써 호출된 함수의 반환 주소와 실행에 필요한 정보를 저장하고, 이를 호출된 함수에 바인딩 해준다. 렉시컬 스코핑(Lexical scoping) 이해하기 활성 객체(Activation object) 이해하기 클로저는 함수와 그 함수가 선언된 주변 객체에 대한 참조(렉시컬 환경)와의 조합이다. 렉시컬 스코핑(Lexical sc.. 2021. 9. 17.
import, export, export default 이해하기 지식 늘리기 VS 내가 당장 필요한 것 처음 ES Module을 사용할 때가 강의를 통해 클론코딩을 했을 때였다. 코드 이해하기에도 바쁘고 모듈화까지 하려니 그저 배워야하는 또 하나의 지식으로 느껴졌다. (그러니 다 까먹을 수밖에..) 그렇게 시간이 지나고 포트폴리오 사이트를 제작하던 중에 내 예전 프로젝트들을 보게 되었다. 그 중 스스로 만든 날씨와 옷차림을 알려주는 프로젝트의 코드를 보았는데 main.js라는 파일 안에 모든 코드를 다 쏟아낸 것이 아닌가..이걸 보고나서 리팩토링을 하고싶은 욕구가 솟아났다. 그 중 ES Modules를 '필요로' 하다 보니 스스로 해당 내용을 찾게 되고 '아~이래서 이게 안됐었던 거구나' '이런식으로도 되네?' 라는 공감도 하게 되면서 좀 더 재미있게 진행하게 되었다.. 2021. 8. 26.
스크롤 이벤트로 와이즐리 헤더 만들기 탐나는 와이즐리 홈페이지의 헤더 이벤트 한때 와이즐리 사용자로서 이벤트를 하길래 오랜만에 들어와봤다. 옛날과 달리 홈페이지가 엄청 깔끔하고 보기에 편해진 것 같다. 그 중 와이즐리의 헤더 UI가 너무너무 신기했다. '이 UI 탐난다. 따라해봐야지' 생각하고 바로 실행에 옮겨봤다. 먼저 와이즐리의 헤더에 발생하는 이벤트를 정리해보자. 스크롤을 내리면 헤더의 배경 색상이 바뀐다. (transparent -> #fff) 조금 더 내리면 헤더가 올라간다. (translateY 사용) 스크롤을 올리면 헤더가 내려온다. (translateY 사용) 스크롤이 맨 위에 도착하면, 헤더의 배경 색상이 바뀐다. (#fff -> transparent) HTML, CSS 헤더의 기능 구현에 목적을 두어서 페이지는 간단하게 만.. 2021. 8. 22.
다크모드 구현과 로컬스토리지 페이지가 닫혀도 다크모드가 유지되도록 구현하기 다크모드는 눈 보호, 배터리 절약 등의 장점으로 많이 보편화 되어 있는 것 같다. 이렇게 자주 쓰이는만큼 내가 설정 해놓은 다크모드가 나중에 들어오거나 탭을 닫은 후에도 유지 되었음 좋겠다. 이렇게 지속적으로 필요한 데이터의 경우 로컬스토리지를 사용함으로써 문제점을 해결 할 수 있다. Window.localStorage Window.localStorage는 현재 출처(origin)의 로컬 저장 공간의 Storage 객체에 접근할 수 있게 해준다. 이 속성을 사용해서 현재 도메인의 로컬 Storage 객체에 접근한 후, 키-값 형태의 항목을 추가하거나 읽고, 제거까지 할 수 있다. 항목 추가 localStorage.setItem('darkMode', 'enab.. 2021. 8. 21.
[JavaScript] var, let, const ES6의 등장 전후 블록 스코프를 갖지않는 var ES6가 나오기 전에는 var로 변수선언을 했습니다. var는 재선언과 재할당이 가능하고 블록 스코프를 갖지않습니다. // 재선언 및 값의 재할당 가능 { // 블록 스코프를 갖지 않음 var name = '개발 전용'; } console.log(name); // "개발 전용" (블록 스코프 영향 X) var name = '개발자 전용'; name = 'only dev'; console.log(name); // "only dev" var 호이스팅 일반적으로 변수를 선언한 후 값을 할당하지만 var는 '호이스팅'으로 인해 선언부가 최상단으로 끌어올려지고 'undefined'로 값이 초기화되기 때문에 변수를 선언하기전에도 값을 사용 할 수 있습니다. cons.. 2020. 12. 21.
[JavaScript] 배열을 제대로 알아보자 1. 배열 선언 const array1 = new Array(); const array2 = new Array(1, 2, 3); const array3 = [1, 2, 3]; console.log(array1); // [] console.log(array2); // (3) [1, 2, 3] console.log(array3); // (3) [1, 2, 3] 2. 인덱스 위치 const books = ['부의 추월차선', '잡스의 기준', '레버리지']; // 배열 출력 console.log(books); // (3) ["부의 추월차선", "잡스의 기준", "레버리지"] // 배열의 길이 출력 console.log(books.length); // 3 // 배열의 해당 인덱스의 요소만 출력 console.l.. 2020. 12. 18.
[JavaScript] 필수 배열함수 10가지 정리 1. join() join() 메서드는 배열의 모든 요소들을 합해서 하나의 문자열로 반환합니다. 필요한 경우, 배열의 각 요소를 구분할 구분자를 사용할 수 있습니다. 생략하면 요소들이 쉼표로 구분 됩니다. { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(); console.log(result); // 맥북,그램,플렉스 } { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(''); console.log(result); // 맥북그램플렉스 } { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(', '); con.. 2020. 12. 17.
반응형