⏳ 2023. 5. 22. - 2023. 5. 28. Async와 Await 은 신이야~ 만든 새럼 천재 😆 불변성과 가변성 js의 mutable에 대해 짧게라도 짚어볼 수 있어서 좋았다. 근본없는 언어라고 욕먹어도 나는 js가 좋아!! 클로저 클로저는 반드시 자주 사용될 것 같은 너낌이다. 유용하게 쓰일 듯! 동작 원리 자바스크립트의 동작 원리는 전혀 모르고 있었는데, 많은 도움이 되었다!! 정규표현식 알고리즘 문제를 풀 때 정규표현식 관련 문제가 나오면 꽤 고생한 기억이 있다. 사실 지금도.. 정규식은 검색없이는 잘 모르겠다. 자주 사용해보며 익숙해질 수 밖에.. 🥲 컴포넌트 굉장히 굉장히 굉장히 굉장히 중요한 개념으로 느껴진다. 컴포넌트를 구현하기 위해서는 상태가 있어야 한다. 원하는 요소를 생성..

⏳ 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"; // 가져오기 // 이름 내보내기로 가져온 데이터는 기본적으로 이..