코딩세상

자바 스크립트에서 비동기 통신을 위해 callback, promise, async-awit을 사용합니다. - callback : 비동기 처리가 완료된 후 실행될 함수를 인자로 전달하는 방식 - promise : 비동기 처리가 완료되면 결과를 반환하는 객체 - async-await : promise를 기반으로 하며, 비동기 처리가 완료될 때까지 기다린 후 결과를 반환 비동기 콜백 함수 비동기(Asynchronous) 함수란? - 쉽게 설명하면 호출부에서 실행 결과를 기다리지 않아도 되는 함수입니다. (콜백함수(Callback Function)은 비동기 처리를 위해 사용될 수 있습니다.) 동기(Synchronous) 함수란? - 호출부에서 실행 결과가 리턴될 때까지 기다려야 하는 함수입니다. 콜백함수란? -..

이벤트 루프와 비동기 동작에 대해 공부하기 전 알아두기! 1. Heap 객체는 힙에 할당됩니다. 힙은 단순히 메모리의 큰 (그리고 대부분 구조화되지 않은) 영역을 지칭하는 용어입니다. 2. Stack 스택(stack)은 제한적으로 접근할 수 있는 나열 구조입니다. 그 접근 방법은 언제나 목록의 끝에서만 일어납니다. 끝먼저내기 목록(Pushdown list)이라고도 합니다. 스택은 한 쪽 끝에서만 자료를 넣거나 뺄 수 있는 선형 구조(LIFO - Last In First Out)으로 되어 있습니다. 자료를 넣는 것을 '밀어넣는다' 하여 푸쉬(push)라고 하고 반대로 넣어둔 자료를 꺼내는 것을 팝(pop)이라고 하는데, 이때 꺼내지는 자료는 가장 최근에 푸쉬한 자료부터 나오게 됩니다. 3.Queue 기본적..

JavaScript는 클라이언트 측 웹 개발을 위해 가장 많이 사용되는 프로그래밍 언어 중 하나입니다. 이 언어는 웹 브라우저에서 실행되며, HTML 및 CSS와 함께 사용되어 웹 사이트 및 웹 어플리케이션을 구축하는 데 사용됩니다. JavaScript는 단일 스레드 언어입니다. 이는 JavaScript 엔진이 한 번에 하나의 작업만 수행할 수 있다는 것을 의미합니다. 이러한 특성은 브 라우저의 성능을 향상시키고 복잡한 코드를 보다 쉽게 디버깅할 수 있도록 합니다. JavaScript의 동작 원리 1. 구문 분석 (Parsing) JavaScript 엔진은 코드를 실행하기 전에 코드를 읽고 이해합니다. 이 과정에서 문법 오류가 있는지 확인하고 코드를 실행 가능한 형태로 변환 합니다. 2. 컨텍스트 생성 ..

이벤트의 개념과 종류 이벤트란? - 웹 페이지에서 발생하는 사건을 의미합니다. 이벤트의 종류 - 마우스 클릭, 키보드 입력, 스크롤 등 유저가 웹페이지에서 동작할 수 있는 기능을 전부 통틀어서 나타낼 수 있으며, 각각의 이벤트는 서로 다른 동작을 실행시킬 수 있습니다. 이벤트 핸들러와 이벤트 모델 이벤트 핸들러란? - 이벤트가 발생 했을 때 실행되는 함수 또는 코드 조각을 말합니다. - 자바스크립트에서 이벤트 핸들러는 HTML 요소에 직접 지정(인라인 방식) 하거나, 자바스크립트에서 할당하거나(전통적 방식), addEventListener 메서드를 사용(표준방식)하여 등록할 수 있습니다. 이벤트 모델 - 여러 요소에 동일한 이벤트가 발생하였을 때 어떻게 처리되는지 정하는 규칙입니다. - 표준 방식에서는 ..

DOM - 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 입니다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. DOM 은 nodes와 objects로 문서를 표현하며, 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. DOM의 개념과 구조 DOM의 구조는 트리 형태로 되어 있으며, 각각의 요소들을 노드라고 부릅니다. 노드는 여러 종류가 있지만 가장 중요한 것은 문서 노드(document no..

순수함수 - 순수함수는 부작용이 없는 함수를 의미합니다.(외부 상태에 영향을 주거나 받지 않는 함수를 말합니다.) 순수 함수의 다음과 같은 특징을 가집니다. 함수는 단일 책임을 가집니다. 함수는 하나의 일만 수행합니다. 함수는 부작용이 없습니다. 함수는 자신의 범위 밖의 상태를 변경하지 않습니다. 함수는 참조 투명성을 가집니다. 함수는 동일한 입력에 대해 항상 동일한 출력을 반환합니다. // 순수함수 예시 function add(a, b) { return a + b; } // 비순수함수 예시 let c = 10; function multiply(a) { c = a * c: return c; } add 함수는 순수함수입니다. 왜냐하면 add 함수는 매개변수 a와 b만으로 결과값을 반환하고 외부 상태에 영향..

배열 - 배열이란? 동일한 타입의 여러 값을 저장할 수 있는 변수입니다. // 숫자를 저장하는 배열 let numbers = [1, 2, 3, 4, 5]; 배열 안에 저장 된 값들은 인덱스(0부터 시작하는 순서번호)를 통해 접근 할 수 있습니다. console.log(numbers[0]); // 첫 번째 요소인 1출력 console.log(numbers[1]); // 두 번째 요소인 2 출력 문자열 - 문자열은 텍스트를 나타내는 값입니다. let name = "Kim"; // 이름을 나타내는 문자열 let sentence = "Hello, world!"; //문장을 나타내는 문자열 배열과 마찬가지로 문자열 역시 안에 저장된 값에 접근하기 위해 인덱스를 사용하여 접근합니다. console.log(name[..

1. 함수(function)란? - 작업을 수행하거나 값을 계산하는 명령문의 집합입니다. 일반적으로 함수는 입력(input)과 출력(output)을 가지며, 입력은 함수에 전달되는 값을 나타내며, 출력은 함수가 반환하는 값을 나타냅니다. function mul(a, b){ return a * b; } 위 함수는 mul이라는 이름을 가진 함수이며, a와 b라는 두 개의 입력(매개변수)을 받습니다. 이 함수는 입력된 두 값을 곱한 결과를 반환합니다. 따라서 이 함수의 출력(반환값은) a*b와 같습니다. 함수를 사용하기 위해서는 함수를 호출해야되는데 다음과 같이 호출하여 사용할 수 있습니다. let result = mul(4 , 5); // result에 20이 저장됩니다. 함수를 사용하기 위해서는 다음과 같..

JavaScript의 truthy 와 falsy - JavaScript에서 truthy와 falsy란 Boolean 컨텍스트에서 각각 True와 False에 대응되는 값 입니다. - JavaScript는 Boolean 컨텍스트에서 타입 변환을 사용합니다. JavaScript에서 falsy한 값은 다음과 같습니다. false , 0, -0, 0n(BigInt 타입의 0), ""(빈 문자열), null, undefined, NaN(Number 타입으로 변환된 숫자가 아닌 무언가) 이외의 모든 값은 truthy합니다. 예시) if (value) { // value가 truthy하면 실행됩니다. } else { //value가 falsy하면 실행됩니다. } let value = "Hello"; // truthy..

JavaScript의 연산자 1) 산술 연산자 산술 연산자는 수학적인 계산을 수행하는데 사용되며 +, -, *, /, %, ** 등이 있습니다 var x = 10; var y = 3; console.log(x + y); //13 console.log(x - y); // 7 console.log(x * y); // 30 console.log(x / y); // 3.33333333335 console.log(x % y); // 1(나머지) console.log(x ** y); //1000 (거듭제곱) 2) 대입 연산자 대입 연산자는 우측에 있는 값을 좌측에 대입하는 역할을 합니다. var x = 10; // x에 10을 대입합니다. var y = x; // y에 x값을 대입합니다. console.log(y)..