Symbol // Symbol // 변경이 불가한 데이터 // 변수를 사용해야만 데이터를 조회하게 하여 데이터 보호의 용도로 사용 const sKey = Symbol("Hello"); const user = { key: "일반 정보", [sKey]: "민감한 정보", // 객체에서는 대괄호로 묶어 사용 }; console.log(user.key); // "일반 정보" console.log(user[sKey]); // "민감한 정보" console.log(user[Symbol("Hello")]); // undefined // 심볼은 생성될 때마다 고유의 값을 가지고 있기 때문에 // 같은 내용으로 생성하더라도 별개의 값을 가진다. BigInt // BigInt // 길이 제한이 없는 정수 // 숫자 데이터..

Console count()의 인수를 주지 않으면 default가 이름이 된다. Cookie 도메인 단위로 저장되며 사이트당 최대 20개 및 4KB로 제한된다.(표준안 기준) 영구 저장이 불가능하다. // Cookie // domain: 유효 도메인 설정 // path: 유효 경로 설정 // expires: 만료 날짜(UTC Date) 설정 // max-age: 만료 타이머(s) 설정 document.cookie = "a=3; domain=localhost; path=/abc"; document.cookie = "b=2"; console.log(document.cookie); Storage 도메인 단위로 저장되며 5MB로 제한된다. 세션 혹은 영구 저장이 가능하다. // Storage // session..

⏳ 2023. 5. 22. - 2023. 5. 28. 이벤트 객체 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있다. 버블링과 캡처링 캡처링 단계 : 이벤트가 하위 요소로 전달 타깃 단계 : 이벤트가 실제 타깃 요소로 전달 버블링 단계 : 이벤트가 상위 요소로 전파 이벤트 옵션 const parent = document.querySelector(".parent"); const child = document.querySelector(".child"); // 핸들러를 한 번만 실행 child.addEventListener( "click", () => { console.log("I'm gone"); }, { once: true, } ); // 기본 동작과 핸들러 실행을 분리 parent.addEventL..

⏳ 2023. 5. 22. - 2023. 5. 28. DOM Document Object Model HTML 문서를 객체로 표현하여, JS에서 HTML을 제어할 수 있게 한다. Node vs Element // 노드(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 // 요소(Element) : HTML 요소를 의미 const parentEl = document.querySelector(".parent"); // 자식 노드 확인 console.log(parentEl.childNodes); // 자식 요소 확인 console.log(parentEl.children); 검색과 탐색 const parent = document.querySelector(".parent"); const child1 ..

⏳ 2023. 5. 22. - 2023. 5. 28. 동기(Synchronous)와 비동기(Asynchronous) 동기 : 코드가 순차적으로 실행된다. 비동기 : 코드가 순차적으로 실행되지 않는다. 데이터를 서버에 요청하고 응답을 받아오기까지는 어느 정도의 시간이 필요하다. 그러나 js는 따로 기다리라는 명령이 없다면, 일단 다음 코드로 넘어간다. 응답을 받고, 다음 코드로 넘어가려면 어떻게 코드를 작성해야 하는지 알아보자. 콜백과 콜백 지옥 const a = (callback) => { setTimeout(() => { console.log(1); callback(); }, 1000); }; const b = (callback) => { setTimeout(() => { console.log(2); ..

⏳ 2023. 5. 22. - 2023. 5. 28. 개요 모듈(Module)이란 특정 데이터들의 집합(파일)이다. html에서 script 연결할 때 type="module" 값을 주고, import(가져오기)와 export(내보내기)를 사용할 수 있다. // 기본 내보내기 -> default 키워드는 하나의 모듈에서 한 번만 사용할 수 있다. export default 123; // 가져오기 // 기본 내보내기로 가져온 데이터는 이름을 마음대로 바꿔 사용할 수 있다. import number from "파일경로"; console.log(number); // 123 // 이름 내보내기 export const name = "iam454"; // 가져오기 // 이름 내보내기로 가져온 데이터는 기본적으로 이..

코드 보기 Intersection Observer 뷰포트에 타겟 엘리먼트가 보이고 있는지 관찰한다. 사용법 const io = new IntersectionObserver(callback, options); // 관찰자 초기화 io.observe(element) 화면에 보일 때 class를 추가하는 것으로 트랜지션 효과를 줄 수 있다.

⏳ 2023. 5. 15. - 2023. 5. 21. 문자 문자열 자르기 강의에서는 slice()만 다루었지만, 가끔 헷갈려서 이번 기회에 다른 것도 정리해보았다. let str = "Hello world!"; console.log(str.length); // 12 // substr(시작 인덱스, 길이) : 시작 인덱스부터 길이만큼 자르기 // 길이를 적지 않으면 끝까지 console.log(str.substr(3, 7)); // "lo worl" console.log(str.substr(3)); // "lo world!" // substring(시작 인덱스, 끝 인덱스) : 시작 인덱스부터 끝 인덱스 전까지 자르기 // 끝 인덱스를 적지 않으면 끝까지 console.log(str.substring(3,..