FrontEnd/JavaScript
-
[JS] 비동기 처리와 CallbackFrontEnd/JavaScript 2022. 6. 17. 16:58
비동기 처리와 Callback 비동기적 프로그래밍 동기적(Synchronous) vs 비동기적(Asynchronous) 동기적 방식 어떤 작업을 요청하면 시간과 관계없이 요청한 자리에 응답이 주어지는 방식 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 차례를 기다리는 것 단일 스레드(싱글 쓰레드)라고 불림 ex. 음식점 테이블이 만석일 때 대기팀이 10팀일 경우, 동기적 방식으로 운영한다면 자리가 날 때 한 팀씩 착석을 하고 남은 팀은 꼼짝없이 음식점에서 기다려야 함 비동기적 방식 어떤 작업을 요청하면 응답이 주어질 때까지 기다리지 않고 응답에 관계없이 바로 다음 작업이 실행되는 방식 요청과 동시에 응답이 주어지지 않음 여러 작업을 동시에 처리할 수 있고 대기하는 과정에서 다른 함수 호출 가..
-
[JS] Uncaught TypeError: Cannot read properties of null 에러 해결방법FrontEnd/JavaScript 2022. 6. 4. 00:23
Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth') 왜 이 에러는 계속해서 날 괴롭힐까 ? 이유는... 내가 바보니까......................^^ 해결 방법! 브라우저가 보여주는 에러 이유는 명확하다! 에러를 잘 읽어보자. null이라는 단어가 눈에 띈다. 바로! 내가 찾으려는 요소에 null 값이 있다는 것이다. 즉, 내가 선택한 요소에 값이 들어오지 않아 속성을 읽어올 수 없다는 에러였다. 나는 선택한 요소의 실제 너비(width)값을 얻기 위해 offsetWidth 속성을 출력하려 했는데 에러가 발생했다. 그래서 if 문을 이용해 선택 요소에 null이 들어가면 return 을 해서 다음 반복문을 실행하..
-
[JS] Uncaught TypeError: forEach is not a function errorFrontEnd/JavaScript 2022. 5. 23. 01:42
Uncaught TypeError: forEach is not a function error document.getElementsByClassName으로 얻은 배열에 forEach를 사용하려고 시도했더니 이런 에러가 발생했다. 알고보니 getElements로 받아온 DOM 배열(?)은 실제로는 배열(Array)이 아닌 HTML collection이었다. getElementsBy~가 반환하는 값은 배열이 아니기 때문에 forEach를 사용할 수 없다. https://developer.mozilla.org/ko/docs/Web/API/Element/getElementsByTagName Element.getElementsByTagName() - Web API | MDN Element.getElementsByT..
-
[JS] 문벅스 Vanila JSFrontEnd/JavaScript 2022. 5. 16. 19:16
문벅스 카페의 에스프레소 메뉴판 만들기 메뉴 추가 Element.insertAdjacentHTML() HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용중인 element는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다. 'beforebegin' : element 앞에 'afterbegin' : element 안에 가장 첫번째 child 'beforeend' : element 안에 가장 마지막 child 'afterend' : element 뒤에 ul.querySelectorAll("li").leng..
-
[JS] innerHTML, innerText, textContenFrontEnd/JavaScript 2022. 5. 14. 15:53
HTML 삽입 미리보기할 수 없는 소스 innerHTML 요소의 속성 중 하나로, 요소(element) 내에 포함 된 HTML 또는 XML 마크업 따라서 하위 요소의 HTML 태그가 출력되는 것을 알 수 있음.. innerText 요소의 렌더링된 후 텍스트, 즉 화면에 출력되는 텍스트 display: none; 으로 설정된 span 텍스트는 출력되지 않음을 알 수 있음. textContent 요소를 노드화하여(?) 노드의 하위 노드 텍스트까지 모두 출력 (숨겨진 요소의 텍스트도 가져옴) https://developer.mozilla.org/ko/docs/Web/
-
[JS] Nomadcoders - Zoom Clone CodingFrontEnd/JavaScript 2022. 5. 6. 17:51
Babel Babel 브라우저가 최신 버전(ES6, ES7)의 JavaScript를 이해할 수 있는 문법으로 변환해주는 JS Compiler 최근 많이 사용되는 TypeScript도 JavaScript로 compile되어야 하는데 이때 사용하는 것이 Babel 다양한 브라우저에서 동작하는 서비스를 만들기 위해 사용(호환성 향상) Babel의 동작 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계 변환 (Transsforming) : 추상 구문 트리를 변경하는 단계 출력 (Printing) : 변경된 결과물을 출력하는 단계 Babel의 Polyfill Babel은 문법을 변환하는 컴파일러 브라우저가 구현하지 못하는 새로운 함수를 실행 가능 Express Node.js : Ch..
-
[JS] Nomadcoders - Vanila JSFrontEnd/JavaScript 2022. 5. 3. 19:40
LOGIN HTML Element의 APIs 보는 방법 1. console.dir(elem); 2. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement - Web APIs | MDN The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. developer.mozilla.org elem.classList.contains(클래스 이름); : 요소의 클래스 리스트에 해당 클래스가 있는지 여부를 t..