둥이의 개발여행

자바스크립트의 비동기 작업과 이벤트 루프는 자바스크립트가 단일 스레드 환경에서도 효율적으로 비동기 작업을 처리할 수 있게 해주는 핵심 요소입니다. 이를 이해하기 위해, 자바스크립트의 실행 모델과 이벤트 루프의 동작 방식을 자세히 살펴보겠습니다. 자바스크립트의 실행 모델자바스크립트는 단일 스레드 언어로, 한 번에 하나의 작업만 수행할 수 있습니다. 하지만, 비동기 작업을 지원하기 위해 자바스크립트는 이벤트 루프와 콜백 큐를 사용하여 비동기 작업을 관리합니다. 이벤트 루프(Event Loop)이벤트 루프는 콜 스택(Call Stack)과 콜백 큐(Callback Queue)를 모니터링하면서 비동기 작업을 처리합니다. 자바스크립트의 이벤트 루프는 다음과 같은 과정을 반복합니다.콜 스택(Call Stack) :..

1. 라이브러리 추가 2. axios 사용법axios.get(url 주소)axios.post(url 주소, data 객체)//기본적으로 axios 메소드는 promise 객체를 return한다.axios .get(url 주소) .then(function(res){ // 성공 처리 }) .catch(function(error){ // 실패 처리 }) 3. axios 사용const url = "https://random-word-api.herokuapp.com/word?number=100";axios.get(url).then(function(res){ const status = res.status; const data = res.data; console.l..

script 태그의 위치에 따른 차이점js 파일을 script 태그로 html에 연결하는 방법은 크게 4가지가 있다. 연결 위치에 따라 차이가 발생하는데, 그 이유는 웹 브라우저의 동작 과정과 연관되어 있다. script 태그 위치에 따른 차이점과 무엇이 가장 선호되는지 알아보자. 1. head 태그html 파싱 > html 파싱 stop > js 파일 다운로드 후 실행 > html 이어서 파싱 head 연결  장점 : 웹사이트가 완전한 형태로 보여진다.단점 : js 파일의 용량이 크고 인터넷 속도가 느리다면 웹사이트를 보는 데까지 많은 시간이 소요된다.2. body 태그 끝html 전체 파싱 > js 파일 다운로드 > js 파일 실행 body 끝 연결  장점 : js ..

HTML 실행 위치에 따른 오작동HTML 문서는 객체 태그들을 위에서부터 아래로 차례차례 읽어 들인다. 그런데 이러한 특성으로 인해 가끔 자바스크립트의 작성 위치에 따라 오류를 일으키기도 한다.  예를들어 아래 코드와 같이 hello   이러한 까닭은 HTML은 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해, 자바스크립트의 document.getElementById('name') 가 html 내부 id인 name 태그가 생성되기도 전에 실행되므로 요소를 가져올 수가 없어 문제가 일어나는 것이다. 그러므로 자바스크립트 태그를 문서의 뒤로 옮겨야만 하는데, 문제가 해결되기는 하지만 html 문서가 길어진다면, 아래쪽에 놓여있어 휠을 내리기도 귀찮고 보기에..