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

⏳ 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,..

⏳ 2023. 5. 15. - 2023. 5. 21. Prototype js는 프로토타입 기반 언어이다. js에서, 원시형 타입을 제외한 모든 것은 객체이고, 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 객체 지향 언어의 상속처럼, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 프로토타입이라고 한다. // Prototype function User(first, last) { this.firstName = first; this.lastName = last; } const user1 = new User("user", "1"); const user2 = new User("user", "2"); console.log(user1); con..

⏳ 2023. 5. 15. - 2023. 5.21. 호이스팅(Hoisting) // 호이스팅(Hoisting) hello1(); // "hello1" // hello2(); // ❌ error // 함수 선언문(Declaration) function hello1() { console.log("hello1"); } // 함수 표현식(Expression) const hello2 = function () { console.log("hello2"); }; 호이스팅은 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 말한다. 선언문만 호이스팅된다. 즉시 실행 함수 // 즉시 실행 함수(IIFE, Immediately-Invoked Function Expression) // (F)() (() => { conso..

⏳ 2023. 5. 8. - 2023. 5. 14. for 반복문 for of // for of const fruits = ["Apple", "Banana", "Cherry"]; for (const fruit of fruits) { console.log(fruit); } for of를 사용하면 배열에서 코드를 우아하게 작성할 수 있다. for in // for in const user = { name: "iam454", age: 90, isValid: true, email: "realseogy@gmail.com", }; for (const key in user) { console.log(key); console.log(user[key]); } for in을 사용하면 객체에서 코드를 우아하게 작성할 수 있..

⏳ 2023. 5. 8. - 2023. 5. 14. // 선택적 체이닝(Optional Chaining) const obj = {}; console.log(obj.name); // undefined const isNull = null; const isUndefined = undefined; // console.log(isNull.name); ❌ error // console.log(isUndefined.name); ❌ error console.log(isNull?.name); // undefined console.log(isUndefined?.name); // undefined 객체 데이터의 없는 속성을 점 표기법으로 불러오면 undefined이다. 그러나 null이나 undefined는 점 표기법을 사..