Javascript
-
[JS] 브라우저 저장소(LocalStorage, Cookie, SessionStorage, IndexedDB)Javascript 2023. 6. 1. 21:25
✅ LocalStorage 클라이언트 측에서 데이터를 영구적으로 저장할 때 사용 → 브라우저를 닫아도 데이터가 유지됨 데이터는 문자열 형태로 저장되며, Javscript의 JSON.stringify나 JSON.parse를 통해 객체로 변환 가능 동일한 도메인의 여러 페이지 간에 데이터를 공유할 수 있음 사용이 간편 대부분의 브라우저에서는 약 5MB 정도의 용량 제한이 있음 복잡한 데이터 구조에는 부적합 자동 로그인 등에 사용됨 myStorage = window.localStorage; localStorage.setItem('myCat', 'Tom'); const cat = localStorage.getItem('myCat'); localStorage.removeItem('myCat'); localStor..
-
[JS] 재귀 함수(Recursive Function)Javascript 2023. 5. 11. 10:49
✅ 재귀 함수(Recursive Function) 함수 스스로 자신을 참조해 호출하면서 동일한 코드가 계속적으로 수행되는 함수 호출 방법 특정 조건이 됐을 때, 자신을 그만 호출되도록 제한하는 exit code가 필요 let recurse(x) { if (x > 0) { console.log(x) recurse(x - 1) } } recurse(10)// 10 9 8 7 6 5 4 3 2 1 컴퓨터는 재귀함수가 몇 번 호출되는지 stack 영역을 통해 기록을 한다. 함수 내부적으로는 stack에 점진적으로 호출된 함수들이 쌓이면서, 그 이후의 코드를 수행시킬 때 어디로 가야 하는지를 stack을 통해서 관리를 한다.
-
[JS] 객체의 얕은 복사(Shallow copy)와 깊은 복사(Deep copy)Javascript 2023. 5. 11. 10:30
✅ 객체 복사의 문제점 object의 값을 복사할 때는 대상 전체가 아닌 object 내 주소 값만 복사되는 문제 발생 가리키는 대상 전체를 복사하는 방법을 얕은 복사(Shallow copy), 깊은 복사(Deep copy)를 통해 가능 🔸 얕은 복사(Shallow copy) - 1 반복문 for문을 통한 객체 복사 let user = { name: "john", age: 23, }; let admin = {}; // shallow copy for (let key in user) { admin[key] = user[key]; } admin.name = "park"; console.log(admin.name);// "park" console.log(user.name);// "john" 🔸 얕은 복사(Sha..
-
[JS] setTimeout(), setInterval()로 시간을 다뤄보자Javascript 2023. 5. 2. 13:29
setTimeout, setInterval 일정 시간이 지난 후 원하는 함수를 실행할 수 있게 하는 메서드 주기적으로 실행할 수 있지만, 실제 시간을 계산하는 데는 절대 사용하지 않는다. 자바스크립트가 싱글스레드이기 때문에 타이머 이벤트가 정확한 간격으로 발생하지 않는다. Date.now()를 사용해 현재 시간을 가져오고, 가져온 시간을 경과된 시간과 비교해 실제 경과 시간을 계산한다. setTimeout() 일정 시간 간격 이후에 함수가 한번 실행 setTimeout(() => {console.log("첫 번째 메시지")}, 5000); setTimeout(() => {console.log("두 번째 메시지")}, 3000); setTimeout(() => {console.log("세 번째 메시지")}..
-
[JS] classList.toggle()로 클래스를 추가·제거하자Javascript 2023. 5. 2. 02:41
toggle 토글(toggle)이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다. DOMTokenList: toggle() DOMTokenList 인터페이스의 toggle()은 목록에서 기존 토큰을 제거하고 false를 반환한다. 토큰이 존재하지 않으면 추가되고 true를 반환한다. toggle(token) toggle(token, force) token : 전환하려는 토큰을 나타내는 문자열 force : 토글을 단방향 작업으로 바꾼다. false로 설정하면 토큰이 제거만 되고 추가되지는 않는다. true로 설정하면 토큰이 추가되기만 하고 제거되지는..