반응형 📍 Front-End72 [자바스크립트] append()와 appendChild()의 차이 특정 요소에 동적으로 element를 추가하는 코드를 구현하다가 append()와 appendChild()의 차이가 궁금해졌다 🧐 append()와 appendChild()의 공통점 두 메서드는 모두 부모 자식에 자식 노드를 추가하는 메서드이다 차이점이 있다면 자식 노드를 추가하는 방식이라는 점! 📍 appendChild() 먼저 appendChild는 오로지 node객체만 자식 요소로 추가할 수 있다 코드를 통해 상세히 알아보자 const divElem = document.createElement('div') const pElem = document.createElemment('p') divElem.appendChild(pElem)' // 결과 : 위와 같이 appendChild()는 노드에 하나의 노.. 2021. 7. 13. [자바스크립트] DOMContentLoaded와 load의 차이 DOMContentLoaded와 load의 차이 먼저 아래와 같은 코드가 있다고 가정할 때 콘솔에 찍히는 순서는 어떻게 될까? 고민해보자 (고민 중) 결과 js -> DOMContentLoaded -> load 순으로 출력되는 것을 확인할 있다 근데 이건 너무 당연한 예제네요 이미지 리소스가 많은 경우면 결과가 달라졌을 수도? 🤔 Why? load는 모든 리소스(CSS, images..)가 다운로드된 다음에 이벤트 호출되고 DOMContentLoaded는 HTML document를 전부 읽고 DOM트리를 완성하는 즉시 이벤트가 호출된다. 그래서 load의 경우 이미지 리소스가 다 불러와진 후에 이벤트가 실행되기 때문에 리소스가 많을 경우 속도 저하가 발생! 그러나 이미지와 관련된 이벤트를 호출할 경우에는.. 2021. 7. 8. [TypeScript] 타입스크립트에 대해 알아보자 타입스크립트? 타입스크린트란 쉽게 말해 Javasciprt + type으로 자바스크립트에 자료형이 부여된 언어이다. 타입스크립트 파일을 브라우저에서 실행하려면 자바스크립트와는 달리 파일을 변환해야 되는데 이를 컴파일이라 말한다 Why? 프론트엔드 공고를 보면 타입스크립트를 필수사항으로 요구하는 곳이 대부분이다. 왜 타입스크립트 사용을 쓰는 걸까? 내가 생각한 가장 큰 이유는 에러를 사전에 방지하여 안정성을 높일 수 있다는 점 😮 앞서 말했듯 타입스크립트는 자바스크립트에 자료형이 더해진 형태의 언어이다 쉬운 이해를 위해 코드로 비교해보자 자바스크립트 function sum(num1, num2){ return num1 + num2; } console.log(sum(10,20)); // 실행결과 : 30 co.. 2021. 6. 30. [CSS] 브라우저 스타일 초기화 각 브라우저별로 기본으로 적용되는 스타일이 있다 body 전체에 margin이 생기는 경우가 그 대표적인 예인데 복잡하게 코드로 작성할 필요 없이 간단한 복붙으로 스타일을 초기할 수 있는 방법이 있다 1. 아래 사이트 접속 jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. www.jsdelivr.com 2. 복사 둘 중 하나를 선택하면 되는.. 2021. 6. 24. 이전 1 ··· 14 15 16 17 18 다음 반응형
