1. 개요Drawer는 화면 측면에서 마치 서랍처럼 슬라이드로 나왔다 들어가는 패널을 말한다.보통 이 기능은 Drawer의 open상태를 state로 관리하는식으로 구현한다.하지만 CSS를 이용하면 Javascript없이도 Drawer를 구현할 수 있지 않을까 하는 생각이 들었다.그래서 이번에는 CSS만 활용해 Drawer를 구현하는것을 도전해보았다. 2. 방법Drawer는 결국 on/off toggle형태로 동작한다. 그렇기에 HTML중 toggle요소를 이용한다면 Drawer를 구현할 수 있을 것이다.이런 요소들은 여러가지가 있을 수 있겠지만 나는 를 이용하기로 했다.checkbox는 체크를 on/off로 관리하므로 이를 이용한다면 drawer를 구현할 수 있을 것이다. 3. 구현// index.js..
1. 개요Javascript에서 객체 deepcopy를 위해 보통 아래의 방법을 이용한다.const obj = {...}; // 원본 객체const newObj = JSON.parse(JSON.stringify(obj)); // 복사된 객체하지만 이 방법은 무거운 작업이라 영 못미더운 점이 있다.이런 문제를 해결하기 위해 재귀함수를 이용하거나 lodash와 같은 라이브러리를 이용하는데 이는 번거로운 작업의 추가로 느껴진다.그래서 나온것이 structuredClone()함수이다. 2. structuredClone()structuredClone()함수는 structured clone algorithm을 이용해 deep copy(깊은 복사)를 수행한다.이는 Json을 이용한 방법보다 효율적이다.structur..
1. 개요Javascript에서 변수를 선언할 때 var, let, const세 가지 방법이 있다.이번엔 이 세 가지 방법의 차이점이 무엇인지 알아보자! 2. 재선언var는 동일한 변수명으로 재선언이 가능하다.동일한 변수명으로 재선언시 값은 재할당된다.var a = 1;console.log(a); // 1var a = 2;console.log(a); // 2 let, const는 재선언시 오류가 발생한다.let a = 1;let a = 2; // ERRORconst b = 1;const b = 2; // ERROR 3. 재할당var, let은 재할당이 가능하다.var a = 1;a = 2;console.log(a); // 2let b = 1;b = 2console.log(b); // 2const는 단어 ..
1. 개요Javascript에서 코드를 작성하거나, 읽다보면 아래와 같이 작성된 경우를 볼 수 있다.doSomething();...function doSomething() { console.log("something");}doSomething함수가 정의되기 전 doSomething함수를 사용했다. 아직 정의되지 않은 함수를 사용했기 때문에 오류가 발생해야 할 것 같다.하지만 코드를 실행해보면 코드가 오류 없이 정상적으로 동작한다. 왜 이런 현상이 나타나는걸까?Javascript는 코드가 실행되기 전 호이스팅(Hoisting)이 일어나기 때문이다.이번 글에서는 호이스팅이 무엇인지, 어떻게 동작하는지 알아보자! 2. Hoisting이란?보통 호이스팅이라 하면 "모든 변수와 함수 선언이 코드의 상단으로 끌어..
