JS30 동기 VS 비동기 목차1. 동기 방식2. 비동기 방식3. 어떤 방법이 좋을까?1. 동기 방식하나의 작업이 완료가 된 후 다른 작업을 진행하는 방식직렬적인 방식으로 진행 중인 작업이 끝나지 않으면 다른 작업은 진행될 수 없다.2. 비동기 방식 하나의 작업이 완료되지 않아도 다른 작업을 진행하는 방식여러 스레드가 한꺼번에 작업을 하므로써 병렬적 처리를 하기 때문에 동기 방식보다 빠르다. 3. 어떤 방식이 좋을까?언뜻 보면 여러작업을 한꺼번에 처리할 수 있기 때문에 비동기 방식만 사용하면 좋을 것 같다. 하지만 동기 방식이 같이 사용되는 것일까?이유는 간단하다. 비동기 방식은 에러 처리와 상태관리가 어렵고 처리하는 양이 많을수록 부하가 생긴다. 한번에 많은 작업을 해야하기 때문에 단일 작업을 하는 스레드가 많이 필요하고 2개.. 2024. 5. 17. 요소를 움직여? 드래그 이벤트 목차1. ondragstart2. ondragend3. ondragenter4. ondragleave5. ondragover6. ondrop7. 드래그 앤 드롭 구현하기(리스트 위치 교체)1. ondragstart어떤 요소에서 드래그를 하게 되면 발생하는 이벤트2. ondragend드래그를 진행하다가 마우스를 땠을 때 발생하는 이벤트3. ondragenter드래그 하던 요소가 다른 요소 위에 위치했을 때 발생하는 이벤트4. ondragleave드래그 하던 요소가 다른 요소 위에 위치했다가 떠나면 발생하는 이벤트5. ondragover드래그 하던 요소가 다른 요소 위에 위치했을 때 발생하는 이벤트dragenter와 유사하게 다른 요소 위에 위치했을 때 이벤트가 발생하지만 다른 점은 enter의 경우 다른 .. 2024. 5. 11. 이벤트 등록하기 목차1. onEvent2. addEventListener3. 두 방법의 차이 DOM요소를 다룰 때 어떤 요소에 대해 행해지는 동작을 이벤트라고 한다. 그런 이벤트가 발생했을 때 원하는 기능을 구현할 수 있는데 그 방법을 알아보고자 한다. 1. onEvent 요소에 특정 이벤트가 발생할 때 실행할 어떤 기능을 정의하는 방법Event는 요소에 따라 다른 이벤트를 지원할 수 있다. //사용방법onEvent = 콜백함수//ex)document.onclick = function(){ console.log("클릭")}위의 예시는 브라우저의 화면을 클릭하면 콘솔에 클릭이라는 글자가 출력된다. 해당 방법은 요소에 이벤트를 할당하는 방식으로 이벤트 앞에 on을 붙여준다.2. addEventListener특정 요소에.. 2024. 5. 10. 배열일까? 아닐까? 유사 배열 객체 목차1. 유사 배열객체란?2. 무슨 차이일까?3. 유사배열 객체에 어떤 것이 있을까?4. 배열로 변환하기 1. 유사 배열 객체란?배열처럼 인덱스를 통해 요소에 접근할 수 있는 객체 js에서 DOM을 제어하다가 보면 여러 요소를 선택하여 어떤 동작을 할 때가 있다. 배열처럼 여러 요소를 가지고 있는 요소를 제어할 때면 배열에 관한 메서드를 사용하려 했지만 잘 안되는 경우가 있었을 것이다. 왜 그랬는지 알아보자.첫번째 요소두번째 요소세번째 요소네번째 요소다섯번째 요소querySelectorAll을 사용하여 요소들을 선택하면 이렇게 배열의 모습으로 HTML요소를 가져올 수 있다. 이와 같은 형태는 우리가 흔히 알고 있는 배열과 유사하지만 실상은 요소를 의 주소를 가지고 있는 키와 값으로 이루어진 객체이다. 그.. 2024. 5. 9. 이전 1 2 3 4 5 ··· 8 다음