해민

CallBack 콜백은 함수가 함수의 인자로 전달되어서 특정 작업이 끝나면 실행되는것을 의미한다.주로 비동기처리를 할 때 많이 사용되며비동기 처리 후에 결과값을 처리하기 위해 많이 사용이된다. 🤔 비동기 처리란?한 작업이 끝날때까지 기다리지 않고 바로 다음 작업을 실행하는 것예를 들어 전자레인지에 음식을 놓고 다 돌아갈때까지 기다리지않고 다른 일을 하는것을 예시로 들 수 있다. 콜백함수와 비동기 처리 function f1(f2) { setTimeout(() => { f2(); }, 3000); } function f2(){ console.log("끝"); }; f1(f2); console.log("다른 작업"); 1. f1을 ..

🔷 Fetch ❓Fetch란?자바스크립트에서 비동기적으로 HTTP요청을 수행하기 위한 최신 API로XHR 보다 더욱 간결하고 효율적인 기능을 제공한다.Promise를 기반으로 하여 then 또는 async/await 사용 가능하다Response를 두 번에 나눠 받으며 , Json으로 변환은 직접 해주어야한다.  ❓ Fetch를 사용하는 이유Fetch는 브라우저가 기본으로 제공하는 API 이기 때문에 간편하게 사용할 수 있으며간단한 네트워크 요청의 경우 가벼운 코드로 활용이 가능하다.  ✏️ Fetch 기본 구조fetch("요청 보낼 서버의 url") .then((response1) => { //첫번째 response 처리 }).then(response2) => { //두번째 response 처..

Ajax를 배우면서 Promise 를 같이 활용하여 비동기 통신을 하는 방법도 있다고 한다.이해 하는것이 힘들기 때문에 포스팅으로 작성하며 정리해 보려고 한다. ❓ Ajax란웹 페이지의 내용이 갱신될 때 전체 페이지가 새롭게 생성되어 바뀌는 것이 아닌 서버로 부터 응답 데이터를 받아와 페이지의 일부분만 갱신할 수 있도록 해주는 비동기 프로그래밍 기법이다.  ❓ Promise 란비동기 처리를 실행 하고 처리가 끝난 후에 다음 처리를 실행하기 위한 기능을 제공한다.  🤔 왜 Ajax와 promise를 같이 활용할까?Ajax는 비동기적 처리이기 때문에 자바스크립트는 응답을 기다리지 않고 다음 코드를 실행한다.이때 생길 수 있는 문제점은 Ajax를 통해 요청한 응답값이 언제 올지는 모른다는것이다.응답이 오지도..

오늘은 자바스크립트의 비동기 통신을 배워보았는데Ajax라는 것에대해 배웠다. 거의 접해보지 않았던 개념이라 이해가 잘 되지않아 포스팅으로 남겨 보기로 했다.  ❓Ajax 란?웹 전체 페이지를 새로 고치치 않고, 필요한 일부분만을 서버로 통신해서 가지고 와웹 페이지를 동적으로 변경하는 프로그래밍 기법이다.  ❓ Ajax를 왜 사용할까? 기존에 웹 사이트들은 대부분 동기적으로 처리 되었다. 작은 동작 하나에도 페이지 전체가 새로 생성되어 바뀌게 되고 불필요한 동작들이 많아지게된다. 예를 들어 댓글을 달 경우 댓글창만 업데이트 되면 되는데 게시글을 포함한 전체 페이지가 달 때 마다 새로 랜더링 된다고 한다면 너무 비효율적인 낭비가 생길 것 이다. 이러한 점을 보완하여 필요한 부분만 서버에서 가지고와 자바스크립..

오늘은 JavaScript의 동작원리에 대해서 알아보겠다. 실행 동작은 크게 두가지로 나뉜다. 1️⃣ 동기적 처리2️⃣ 비동기적 처리 언어마다 각각 지원하는 처리 방식이 다르며,오늘은 JavaScript에 처리 방식이 무엇인지 알아보려고 한다.   🔷 동작원리 종류 🔹 동기적 처리 ❓ 동기적 처리란 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있다. 동기적 처리는 자바스크립트의 처리 방식으로자바스크립트는 실행 단계에서 코드를 위에서 순차적으로 한 줄씩 처리하는 방식을 사용한다. 한 줄의 코드 작업이 완료되기 전까지는 그 다음 작업이 실행되지 않게 된다.  🔍 실생활 예시 줄 서서 대기하고 있는 상황에선 앞 사람의 주문이 끝날 때까지 주문을 할 수 없고 대기한다.  ✔️ 동기 장점순..

🔷 Map주어진 배열의 값을 재정의 할 때 사용하는 방법이다.배열의 요소를 인덱스 순으로 인자로 전달하여 callback함수로 반환 받아 새로운 값을 정의한다. let money = [1, 2, 3, 4]; console.log(money); result = money.map((m) => m + m * 0.5); console.log(result); 👉 money의 요소가 m 인자를 통해 인덱스 순으로 전달되어 연산을 통해 새로운 값이 result에 배열 요소로 할당 🔹 map의 callBack 인자인자 위치 순서에 따라 들어가는 값이 다르다.map ((요소의 값, index , 순회하는 대상) result = money.map((m, i, s) => { docume..

자바스크립트는 매우 유연한 언어이다. 예시를 들어서 코드를 하나 봐보자.  👉 위 코드에서 콘솔로 찍히는 값은 1 이다. 🤓 이때 함수의 인수는 1개인데 호출할 때 넣은 인자의 수는 5개이다.      원래라면 에러가 발생했을 것이다. 인자 수에 맞게 해야하기 때문이다.       하지만 자바스크립트는 다르다 .        인수 보다 더 많은 수를 전달하여도 에러가 발생하지않고 인수의 개수 만큼 할당 된 다음      나머지는 무시 된다.🤔 그렇다면 무시되는 나머지 값은 어디로 가는 것일까?나머지 값은 두 가지 방식을 통해 값을 가져올 수 있다. 1️⃣ Arguments Arguments란 함수로 전달 되는 모든 인수들을 배열 형태로 나타낸 것으로 초과되는 인자 까지도 모두 저장된다.Argume..

❓ 오늘의 문제자바스크립트로 클릭하면 텍스트가 빨간색으로 변하는 코드를 짜던 도중 막혔다.  hello 👆 위 코드는 문서가 준비가 다 되었을 시점(onload) 에 id 가 text인 DOM객체를 찾고      해당 DOM객체를 클릭 할 시 this를 통해 클릭된 DOM객체의 color를 빨간색으로 바꾸도록 하였다. 그러나 이렇게 하였을 때 텍스트를 클릭하여도 빨간색으로  바뀌지 않았다. 그리고 콘솔 창에 에러가 발생하였다. 정의되지 않은 타입에 속성을 변경할 수 없다. 즉 this로 가져온 것이 undefined 라는 것 이다.  💡 해결 ?검색을 해보니 화살표 함수는 this 바인딩이 안된다는 이유로 일반 함수로 해야 한다는 내용을 보고 코드를 바꿔보았다.  onload =..

🔷 이벤트 흐름이란?문서 내부에 엘리먼트들은 계층적 구조로 이루어져 있기 때문에발생하게 된다.하나의 엘리먼트에서 이벤트가 발생할 경우 계층을 따라 연쇄적으로 이벤트 흐름이 발생하게 된다. 🔹 흐름 3단계   1️⃣ 캡쳐 단계 : window 부터 모든 DOM객체를 차례대로 거쳐 타켓에 이벤트가 전달되는 과정   2️⃣타깃 단계 : 이벤트가 실제 요소에게 전달   3️⃣버블링 단계 : 타겟 부터 중간에 모든 DOM 객체를 거쳐 window 객체에 이벤트가  전달되는 과정   💡캡쳐 단계와 버블링 단계에서 겨쳐가는 DOM객체들은 해당 이벤트의  addEventListener 속성에 따라     거쳐가는 모든 DOM 객체들의 이벤트 리스너를 실행한다.        기본값은 버블링 단계이며 , 타깃 객체부..

오늘 변수와 함수를 선언 전에 호출 해보는 예제를 테스트 해 보던중 궁금점이 생겼다. 우선 코드를 먼저 살펴보면 document.write(hello()); document.write(i); var i = "hi"; function hello() { return "안녕 함수"; } var 변수와 함수를 선언 한 뒤선언 이전에 변수와 함수를 불러내도록 입력하였다. 👉 결과변수는 undefined 가 출력되고함수는 정의된 실행문대로 출력이 되었다. 🤔 그런데 왜 똑같이 선언 전에 호출을 하였는데 변수는 아무것도 없고 함수만 있을까?우선 변수가 undefined 인 이유 부터 살펴보자면 호이스팅 이라는 개념을 간단히 보자. 호이..