동기 비동기에 대해 https://strap.tistory.com/entry/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80 동기, 비동기란? 동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말 strap.tistory.com 비동기 패턴의 이점 응답성 향상: 비동기 패턴을 사용하면 여러 작업을 동시에 처리할 수 있어 사용자 경험을 향상시킨다. 웹 페이지가 멈추지 않고 반응하는 느낌을 제공할 수 있다. 성능 향상: 비동기 패턴은 작업을 병렬로 처리하여 전체적인 시스템 성능을 향상시킨다. 특히 네트워크 호출과..

클로저 함수와 그 외부를 둘러싸고 있는 렉시컬환경의 조합으로, 클로저가 자신의 렉시컬환경 외부에서 선언된 변수에, 접근할 수 있는 메커니즘을 제공한다. 클로저 사용하는 이유 클로저는 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해 쓰인다. 캡슐화와 정보은닉을 위해 쓰인다. 클래스 private 필드 또는 메소드를 사용하는 효과와 동일하다. 클로저 예제 function outer() { const outerVar = "I'm from outer"; function inner() { console.log(outerVar); // 내부 함수에서 외부 함수의 변수에 접근 } return inner; } const closureFunc = outer(); // outer 함수 실..

자료형 (Data Types) https://ko.javascript.info/types 자료형 ko.javascript.info 숫자형 BigInt 문자형 불린형 null undefined → 값이 할당되지 않은 상 객체와 심볼 typeof 연산자 문자형 큰 따옴표나 작은따옴표는 차이가 없지만 백틱 ` 에는 다른의미가 있다. 백틱 사이에 ${ } 를 이용해 변수나 표현식을 넣어주면 문자열 중간에 표현이 가능하다는 점이다. alert( "the result is ${1 + 2}" ); alert( `Hello, ${name}!` ); 등과 같이 사용할 수 있지만 첫째 줄 처럼 큰따옴표는 인식되지 않는다. 무조건 ${} 식의 형태를 사용하기 위해선 백틱을 사용해야 한다. Typeof 연산자 첨부한 사이트의..

var와 let,const 환경차이 var - object 환경 let & const - declarative 선언환경을 가지기때문에 결과값이 달라진다. Object 환경 특징 - 함수 스코프 : 'var'로 선언된 변수는 해당 함수의 스코프 내에서만 유효하다. 함수 외부에서 접근할 수없다. - 호이스팅 : 'var'로 선언된 변수는 해당 스코프 내에서 최상위로 끌어올려지는 현상(호이스팅)을 가진다. 즉 변수 선언이 해당 스코프의 최상단으로 옮겨지기 때문에 변수 선언 이전에도 변수를 참조할 수 있다. 렉시컬환경 내 메모리환경에 호이스팅으로 끌어올려지면 var는 undefined로 할당된다. var가 할당 되기전이기때문에 undefined 출력된다. 반면에 let 과 const도 똑같이 호이스팅되지만 동작..

Async Async, Await 모두 비동기 코드를 더 읽기 쉽고 동기적으로 작성할 수 있도록 도와주는 키워드이다. async 는 함수 선언 앞에 사용되며, 해당 함수가 비동기적으로 동작함을 나타낸다. async로 선언된 함수는 항상 프로미스를 반환한다. Await await은 async 함수 내에서 사용되며, 다른 프로미스를 기다렸다가 해당 프로미스가 처리되고 값을 반환한 후에 다음 코드로 진행된다. 이를통해 비동기 작업을 동기적으로 작성하는 것처럼 보이게 만들 수 있어서 코드의 가독성이 높아지고, 콜백지옥 문제를 피할 수 있다. function fetchData() { return new Promise((resolve) => { setTimeout(() => resolve("Data fetched"..

Callback 함수 콜백 함수는 다른 함수에게 인자로 전달되는 함수를 의미한다. 웹 개발에서 자주 사용되는 비동기적 작업일 때 사용하고 예를 들어. 웹페이지에서 서버로부터 데이터를 받아야 할 때, 데이터 로딩이 완료된 후 어떠한 작업을 수행하고 싶을때 사용한다. function orderFood(menu, callback) { console.log("주문 중..."); // 실제 주문 처리하는 시뮬레이션 setTimeout(function() { console.log(menu + " 준비 완료!"); callback(); // 요리가 끝났을 때 콜백 함수 호출 }, 2000); // 2초 후에 요리 준비 완료로 가정 } function enjoyMeal() { console.log("맛있게 식사하세요!..

📍자바스크립트 엔진 자바스크립트가 동작하려면 JS엔진이 필요한대, 브라우저 내에 내장되어 있고 node.js를 설치해서 로컬 컴퓨터에서 실행할 수 있다. 이때! 동작하는 시간을 런타임이라고 하며, 이 런타임 과정에서 코드를 한줄한줄 읽고 번역해 실행해주는 것을 인터프리터 라고 한다. 인터프리터란? - 프로그래밍 언어로 작성된 소스코드를 읽어 한줄씩 해석하고 실행하는 프로그램 또는 환경을 말한다. - 소스코드를 기계어로 컴파일 하지않고도 바로 실행할 수 있게 해주는 방식으로 동작한다. 사용언어 : Python, Ruby, JavaScript .. cf ) 컴파일러 - 소스코드를 한번에 컴파일하여 중간언어 또는 기계어로 변환후 실행하는 방식을 사용함 사용언어 : C, C++, JAVA ... 📍자바스크립트란..

버블링 위의 이미지와 같이 버블링은 이벤트가 발생한 요소부터 위로 올라간다. FORM DIV P 만약 p태그를 클릭해도 form 태그에 할당된 핸들러가 동작되는 것을 말한다. 가장 안쪽의 p 태그를 클릭하면 p에 할당된 onclick 핸들러가 동작하고, 그 바깥의 div태그의 핸들러가 동작한다. 그리고 from에 할당된 핸들러가 동작한다. document 객체를 만날때까지, 각 요소에 할당된 onclick 핸들러가 동작한다. p를 클릭한다면 p, div, form 의 얼럿창이 순서대로 뜨게 되는 것이고 div 를 클릭한다면 div, form 순으로 얼럿창이 뜨게 되는 것이다. 이것은 event.target을 이용하여 접근할 수 있다. event.target 이벤트가 발생한 가장 안쪽의 요소는 타깃(tar..

이 글은 우아한Tech 영상을 참고하여 작성하였습니다. https://www.youtube.com/watch?v=7RiMu2DQrb4 this 란? this는 현재 실행중인 함수나 메서드가 속한 객체를 참조하는 키워드이다. this를 사용하여 현재 실행중인 컨텍스트 내에서 사용되는 객체에 접근할 수 있다. 🙌 브라우저 --> this는 window 다. window에 탑재된 속성들이 출력되는 것을 볼 수 있다. 🙌 노드 --> 모듈을 가리킨다. 콘솔로그에 노드의 this를 출력하면 텅텅 빈 객체가 출력이 된다. globalThis 를 출력하면 노드에서 사용되는 전역 객체들이 출력된다. 바인딩 (Binding) 이란? 먼저 자바스크립트에서 모든 함수(Function)은 this를 갖고 있다. 함수가 호출될..

NPM (Node Package Manger) 기본적으로 자바 스크립트를 배우기위해서는 다들 Node.js를 설치했을 것이다. 그 때 보는 Node로 이를 이용하여 다양한 자바스크립트 애플리케이션을 실행할 수 있고, 서버에 주로 사용한다. 자바스크립트는 웹상에서 사용하거나 node.js를 설치하여 로컬환경에서 사용할 수 있다. 자바스크립트로 작성된 오픈소스나 라이브러리 등을 가져와서 사용하려면 npm을 사용한다. 재밌는 범쌤의 이야기를 인용해보자. 자바스크립트로 작성된 오픈소스, 라이브러리가 작성된 도서관이 있다. 이곳에서 책을 빌리기전 먼저 해야하는 것은 npm init npm init -y git init 처럼 제일 처음 기본값을 생성한다고 생각하면 된다. 이를 수행하면 package.json 파일이..