본문 바로가기
반응형

Embedded169

[JS] 이벤트(Event) Event Object(이벤트 객체)란 무엇인가? 이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다. 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어, 이벤트 핸들러에 인자로 암묵적으로 전달된다. 1. 이벤트 추가하기 - addEventListener() 객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다. element.addEventListener(type, eventListener); - type : 이벤트 타입 - eventListener : 이벤트가 발생했을 때 실행할 함수 2. 이벤트 제거하기 - removeEventListener() 이벤트를 삭제할 때는 removeEventListener() 메소드를 사용합니다. el.. 2023. 10. 28.
[JS] DOM : 크기와 좌표 window.innerWidth / innerHeight Viewport(현재 화면)의 크기를 얻음 window.scrollX / scrollY Viewport의 현재 스크롤 위치를 얻음 (페이지 좌상단 기준) E.scrollLeft / E.scrollTop 스크롤 요소의 현재 스크롤 위치를 얻음 (요소의 좌상단 기준) window.el = document.querySelector('.scrollElement') el.scrollLeft // 수평 스크롤 위치 el.scrollTop // 수직 스크롤 위치 window.scrollTo() / 스크롤요소.scrollTo() 지정된 위치로 스크롤 하기 대상.scrollTo(X, Y) // 또는 대상.scrollTo({ left: x좌표, top: y좌표, b.. 2023. 10. 28.
[JS] dom DOM이란 무엇인가? DOM은 Document Object Model의 약자입니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다. DOM은 어떻게 생겼을까? DOM을 제대로 이해하기 위해서는 tree라는 자료구조를 이해할 필요가 있습니다. DOM이 tree 형식의 자료구조를 가지고 있기 때문입니다. Javascript에서 DOM의 특정 요소(element)를 찾는 방법 1. getElementById() [HTML] Div1입니다. Div2입니다. [JS] function getDiv1() { const div1 = document.getElementById('div_1'); .. 2023. 10. 28.
[JS] fetch 메소드 fetch('https://jsonplaceholder.typicode.com/posts/1') .then(res => console.log(res)) fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다. fetch 함수로 HTTP 요청하기 1. GET: 존재하는 자원을 요청 2. POST: 새로운 자원 생성 요청 3. PUT: 존재하는 자원 변경 요청 4. DELETE: 존재하는 자원 삭제 요청 2023. 10. 28.
[JS] 반복문 비동기 Promise.All()을 이용한다. const func = async () => { const promises = []; for(let i of data){ const promise = insertDatabase(i); promises.push(promise); } await Promise.all(promises); }; 이런 식으로 하면 병렬로 진행되어 다른 반복문을 사용할 때보다 시간이 훨씬 단축된다. 2023. 10. 28.
[JS] Promise • 동기식 (Synchronous) 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식. 즉, 한 번에 여러 작업을 처리하지 않고 하나만 처리함. • 비동기식 (Asynchronous) 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 방식. 즉, 한 번에 여러 작업을 처리함. Promise Promise 는 비동기 작업의 단위 입니다. Promise 는 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능입니다. 이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리를 해야 했었는데요, 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었습니다. const promi.. 2023. 10. 28.
[JS] 모듈 1. 모듈의 개념, 등장 이유 모듈은 프로그램을 구성하는 구성요소의 일부를 말한다. 쉽게 말하자면 큰 애플리케이션을 작게 파일로 분리해서 관리할때 이 파일 각각을 말한다. 보통 클래스 하나 + 특정한 목적을 가지는 복수의 함수로 구성된 라이브러리 하나 정도로 구성. 이렇게 파일을 모듈화 하여 관리하면 다음과 같은 장점이 있습니다. 1. 프로그램의 효율적인 관리 및 성능 향상 2. 전체적인 소프트웨어 이해의 용이성 증대 및 복잡성 감소 3. 소프트웨어 디버깅, 테스트, 통합, 수정 시 용이성 제공 4. 기능의 분리가 가능하고 인터페이스가 단순 5. 오류의 파급효과를 최소화 6. 모듈의 재사용 가능으로 개발과 유지보수가 용이 AMD: 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통.. 2023. 10. 28.
[JS] json JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우). • JSON은 순수히 데이터 포맷입니다. 오직 프로퍼티만 담을 수 있습니다. 메서드는 담을 수 없습니다. • JSON은 문자열과 프로퍼티의 이름 작성시 큰 따옴표만을 사용해야 합니다. 작은 따옴표는 사용불가합니다. • 콤마나 콜론을 잘못 배치하는 사소한 실수로 인해 JSON파일이 잘못되어 작동하지 않을 수 있습니다. JSONLint같은 어플리케이션을 사용해 JSON 유효성 검사를 할 수 있습니다. • JSON은 JSON내.. 2023. 10. 28.
[JS] constructor & instanceof constructor 생성자 함수를 찾는 함수입니다. var obj = {}; // 객체 리터럴로 객체를 생성한 후 obj 변수에 객체를 저장. console.log(obj.constructor === Object); /** * Object() 가 obj 를 만들었으므로 true 가 출력된다. */ console.log(obj.constructor); // Object()인 생성자 함수를 가리킨다. instanceof 연산자 객체가 특정 생성자 함수의 인스턴스인지 아닌지를 확인하는데는 instanceof 연산자를 사용하면 알 수 있습니다. 반환값은 true 또는 false 입니다. // 사용자 정의의 생성자 함수(객체 생성자) var CustomFn = function () { this.name = 'B.. 2023. 10. 28.
[JS] getter & setter 1 getter 메서드 let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; } }; alert(user.fullName); // John Smith 2 setter 메서드 let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; } set fullName(value) { [this.name, this.surname] = value.split(" "); } }; // 주어진 값을 사용해 set fullName이 실행됩니다. user.fullName = "Al.. 2023. 10. 28.
반응형

티스토리툴바