본문 바로가기

Front-End/JavaScript34

비동기와 이벤트 루프 이벤트 루프의 동작을 정리하고,비동기 코드의 동작 순서를 정리합니다. 🌸 잘못 이해하고 있는 내용이 있다면 알려주세요. 감사합니다 🌸 목차ko.javascript.info/event-loop 본문 예시 코드코드의 실행 순서 콜스택의 상태이벤트 루프와 마이크로 태스크 큐, 매크로 태스크 큐자바스크립트 튜토리얼 [이벤트 루프] 카테고리 이해하기'특정 태스크'란?렌더링 시점반복문 내의 DOM 조작은 렌더링과 관련이 있는 걸까? 들어가기 전에, 기억해야 할 내용입니다.콜스택이 비어야 태스크 큐의 작업이 콜스택으로 이동합니다.태스크 큐의 종류(1) 마이크로 태스크 큐 (빨리 처리되는 후속 작업. then, resolve 등)(2) 매크로 태스크 큐 (setTimeout 등) 1. ko.javascript.in.. 2024. 6. 6.
좋은 코드, 나쁜 코드 프로그래머의 코드 개선법 https://product.kyobobook.co.kr/detail/S000061353995 좋은 코드, 나쁜 코드 | 톰 롱 - 교보문고 좋은 코드, 나쁜 코드 | 이 책의 가장 큰 특징은 나쁜 코드가 왜 나쁜 코드인지 설명하고, 나쁜 코드를 좋은 코드로 바꿔가는 과정을 직접 보여주는 것이다. 이를 통해 독자는 좋은 코드와 나쁜 product.kyobobook.co.kr PR 리뷰를 하면서, 주관적이지 않은 지표가 있을까 고민하기 시작하게 되었다. 특히 설계에 관해서는 best practice가 있는지 궁금해서 책을 읽어보게 되었다. 책에서는 왜 좋은 코드를 작성해야 하는지를 먼저 설명한다. 당장은 개발하는 데만도 시간이 부족하더라도, 신경써서 작성하지 않으면 생산성이 떨어지기 때문이라고 강조를 하는.. 2024. 2. 17.
fetch axios header proxy Proxy URL CORS까지 사건의 발단 ( subtitle : 알찬 주말 계획 ~! → → → ? ) fetch와 axios 차이점? (axios를 쓰는 목적? 이유?) fetch https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch fetch 스펙 문서 (Nooooo... ) https://fetch.spec.whatwg.org/ axios 면접 질문 검색 Promise axios 특징 https://axios-http.com/docs/api_intro Instance Interceptor proxy (JSON 자동 변환) headers에 대한 의문 그나저나, API 요청에 헤더는 왜 필요하지??? axios config 읽기 (잘 모름. 어떤 속성이 있는지 본.. 2023. 12. 11.
fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful Using the Fetch API - Web APIs | MDN The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across th.. 2023. 10. 31.
31장 RegExp (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● RegExp 메서드 메서드 결과 예시 RegExp.prototype.exec 1. 매칭 결과를 배열로 반환 2. 매칭 결과가 없는 경우 null 반환 ※ 매칭 첫번째 결과만 반환 ["패턴", index: 인덱스, input: "주어진 문장", groups: ] RegExp.prototype.test 1. 매칭 결과를 불리언 값으로 반환 true/false RegExp.prototype.match 1. 매칭 결과를 배열로 반환 ※ g 플래그가 지정되면, 모든 매칭 결과를 반환 ["패턴", "패턴", '패턴"] ● 플래그 ● [ ] 대괄호 : 그룹이 아님. 그 중에 하나 ● \D: 숫자가 아닌.. 2023. 6. 8.
35장 스프레드 문법 36장 디스트럭처링 할당 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● 스프레드 문법(전개 문법)는 이터러블에 한정. Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments ● 이터러블이 아닌 일반 객체, 유사 배열 객체는 불가능 ○ 스프레드 문법의 결과는 값이 아니다(개별적인 값의 목록) => 변수에 할당 불가능 ○ Rest 파라미터 vs 스프레드 문법: 반대 개념(똑같이 생김) Rest 파라미터 스프레드 문법 인수들의 목록 => 배열 배열(과 같은 이터러블) => 개별적인 값드의 목록 ● 이터러블을 배열로 변환 => [...이터러블] 기존 방식 ★스프레드 문법★ concat [1,2].c.. 2023. 6. 5.
40장 이벤트 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ● 이벤트 핸들러: 이벤트 발생 시, 브라우저에 의해 호출될 함수 이벤트 핸들러는 (1) 이벤트 타깃에 바인딩 (2) 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩 ● 발생한 이벤트는 객체! (1) 이벤트 핸들러의 첫 번째 인수로 전달 (2) 매개변수 e, 명시적으로 선언 필수! ● 이벤트 전파 DOM트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. ● 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로, DOM 트리를 통해 전파 (1) 캡쳐링: 이벤트가 상위 요소에서 하위 요소 방향으로 전파 (2) 타깃 단계: 이벤트가 이벤트 타깃에 도달 (3) .. 2023. 5. 28.
39장 DOM (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 ★DOM 조작에 의해 리플로우, 리페인트 발생 (성능 최적화 고려)★ innerHTML (setter/getter) (1) 모든 자식노드를 삭제한 후 (2) 새롭게 노드를 생성하여 (3) 자식 요소로 추가 삽입 위치 지정 불가 insertAdjacentHTML(위치,HTML문자열) 기존 요소 유지 위치 지정해서 요소 삽입 => 둘다, XSS(크로스 사이트 스크립팅 공격)에 취약 =>마크업 파싱하기 때문 doxument.getElementById() document.createElement('li') document.createTextNode() $li.appendChild() 노드를 생성하면,.. 2023. 5. 25.
39장 DOM(~39.5.2) (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 DOM(Document Object Model): 노드 객체로 구성된 트리 자료구조 - 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 - DOM이 제공하는 프로퍼티와 메서드를 사용하여 노드에 접근, HTML의 구조와 내용 또는 스타일 등을 동적으로 변경하는 방법을 익히는 것이 중요 Element: Tag? 요소 노드 == 태그 중첩 관계 비선형 자료구조: 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조 DOM API를 통해 (1) 자신의 부모, 형제, 자식 탐색 가능 (2) 자신의 어트리뷰트와 텍스트를 조작 가능 live DOM 컬렉션 객체 : 실시간.. 2023. 5. 22.

티스토리툴바