odada

비동기 처리 비동기 처리란, 작업을 동시에 처리하는 것을 말한다. 자바스크립트는 싱글 스레드 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있다. 하지만, 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다. 동기와 비동기 동기처리의 예: 은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것 비동기처리의 예: 커피 주문 시 앞번호가 먼저 나오는 것, 동시에 처리되는 것 - 동기 처리 동기 처리란, 작업을 순차적으로 처리하는 것을 말한다. 자바스크립트 코드는 기본적으로 동기적으로 처리된다. 동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다. 하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 ..

DOM(Document Object Model) JS HTML DOM : https://www.w3schools.com/js/js_htmldom.asp DOM이란? DOM은 HTML 문서를 객체로 표현한 것으로, 자바스크립트를 이용해 HTML 문서를 제어할 수 있게 해준다. const h1El = document.querySelector('h1') console.log(h1El.textContent) DOM 문서 Node vs Element(요소) Node : HTML 요소, 텍스트, 주석 등 모든 것을 의미한다. Element : HTML 요소를 의미한다. header text1 main text2 footer const parent = document.querySelector('..

모듈(Module) 모듈이란? 모듈은 특정 기능을 하는 함수나 변수들의 집합이다. 모듈은 가져오기(import)와 내보내기(export)를 통해 사용할 수 있다. 모듈은 자체로도 하나의 프로그램이지만 다른 프로그램의 일부로 사용될 수도 있다. 모듈은 다른 모듈을 사용할 수 있고, 다른 모듈에 의해 사용될 수도 있다. 모듈은 자신만의 이름 공간(namespace)을 가진다. 모듈은 독립성을 가지며, 필요한 모듈만 불러와 사용할 수 있다. 모듈은 재사용이 가능하다. 모듈의 종류 내장 모듈 Node.js가 설치될 때 함께 설치되는 모듈 fs, os, path, url 등 사용자 정의 모듈 개발자가 직접 정의한 모듈 다른 프로그램에서도 사용할 수 있도록 npm에 배포할 수도 있다. 모듈의 사용 모듈을 사용하기 ..

표준 내장 객체 - 객체(object) Object.assign() 객체를 복사할 때 사용 target 객체에 source 객체를 병합하여 반환한다. const target = { x: 1, y: 2 }; const source = { y: 3, z: 4 }; const result = Object.assign({}, target, source); // {}는 타겟 객체를 빈 객체로 초기화한다. console.log(result); // { x: 1, y: 3, z: 4 } 중복된 속성은 덮어쓴다. console.log(target); // { x: 1, y: 3, z: 4 } (타겟 객체) console.log(source); // { y: 3, z: 4 } (소스 객체) // 전개 연산자를 사용해도 ..

표준 내장 객체 - 배열(array) .length 배열의 길이(숫자)를 나타내는 속성 const arr = [1, 2, 3]; console.log(arr.length); // 3.at() 배열에서 특정 위치의 요소를 가져오는 메서드 인덱스는 0부터 시작 const arr = [1, 2, 3]; console.log(arr[0]); // 1 console.log(arr.at(0)); // 1 console.log(arr[arr.length - 1]); // 3 console.log(arr.at(-1)); // 3.concat() 배열에 다른 배열이나 값을 추가하여 새 배열을 반환하는 메서드 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...

표준 내장 객체 - 날짜(Date) Date 객체 날짜와 시간을 위한 메서드를 제공하는 내장 객체 Date 객체 생성 // 현재 시간으로 Date 객체 생성 const now = new Date(); console.log(now); // 2021-07-20T07:23:45.000Z // 2021년 7월 20일 7시 23분 45초로 Date 객체 생성 const date1 = new Date(2021, 6, 20, 7, 23, 45); console.log(date1); // 2021-07-20T07:23:45.000Z .getFullYear() / .getMonth() / .getDate() / .getDay() 년도, 월, 일, 요일을 얻는 메서드 getMonth()는 0부터 시작하므로 1을 더해줘야 ..

숫자(number) .toFixed() 숫자를 고정소수점 표기법으로 변환하여 문자열로 반환합니다. const num = 3.1415926535; console.log(num.toFixed(2)); // 3.14 console.log(typeof num.toFixed(2)); // string console.log(parseFloat(num.toFixed(2))); // 3.14 (문자열을 숫자로 변환) .toLocalString() 숫자를 표준 숫자 형식의 문자열로 변환합니다. const num2 = 10000000; console.log(num2.toLocaleString()); // 10,000,000 console.log(`${num2.toLocaleString()}원`); // 10,000,000..

표준 내장 객체 - 문자열(string) string(문자열) const str = 'hello world'; length 문자의 길이를 반환한다. console.log(str.length); // 11 .includes() 문자열에 특정 문자열이 포함되어 있는지 확인한다. console.log(str.includes('hello')); // true console.log(str.includes('Hello')); // false (대소문자 구분) console.log(str.includes('hello', 1)); // false (1번째 인덱스부터 시작) .indexOf() 문자열에 특정 문자열이 포함되어 있는지 확인한다. 포함되어 있으면 해당 문자열의 인덱스를 반환한다. 없으면 -1을 반환한다. c..

클래스 (class) Class는 객체를 만들기 위한 템플릿이며, 프로토타입 기반 상속을 보다 명시적이고 간편하게 사용할 수 있도록 해줍니다. class를 통해 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 여러개 만들 수 있습니다. 클래스=붕어빵 틀, 객체=붕어빵 0. 클래스의 개념 "커피숍"을 운영한다고 가정하고, 커피숍에서 판매하는 다양한 종류의 커피를 클래스를 사용하여 모델링해 보겠습니다. - 클래스를 사용하지 않은 경우 // 생성자 함수를 사용하여 커피 객체를 생성 function OrderCoffee(name, price, size) { // 커피의 속성 this.name = name this.price = price this.size = size } // 커피의 가격을 사이즈에 따라..

node.js 란? Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임으로 자바스크립트를 브라우저 밖에서도 사용할 수 있게 해주는 런타임 환경이다. Chrome V8 Javascript 엔진 : 자바스크립트의 문법을 해석하고 동작시켜줄 수 있는 엔진 JavaScript 런타임 : 자바스크립트 언어가 동작하는 환경 쉽게 말해 node.js를 사용해 브라우저 및 컴퓨터를 제어할 수 있다. 프론트앤드가 node.js를 알아야 하는 이유 컴퓨터에서 제어하기 위한 용도는 아니지만 웹페이지를 개발하기 위한 도움을 받는 용도로 사용한다. html, css, js 만으로 웹사이트 개발을 할 순 있지만 그 과정이 약간 비효율적이다. 개발을 도와주는 여러가지 모듈들을 도움을 받으면 효율적으로 ..