본문 바로가기

언어 기초

비동기 작업 처리 [JavaScript | 학습을 위한 자료 | 한입만 REACT] 동기와 비동기// 동기와 비동기// 동기 : 여러개의 작업을 순서대로 하나씩 처리하는 방식// 멀티 쓰레드를 사용하면 오래걸리는 작업을 쓰레드별로 수행하면 되지만// 자바스크립트에는 멀티쓰레드의 개념이 없다.// 비동기 : 여러개의 작업을 순서대로 처리하지 않는 방식console.log(1);setTimeout(()=>{ // 비동기 작업들은 JS엔진이 아닌 Web APIs에서 실행됨 console.log(2);}, 3000); // 3초뒤에 수행console.log(3);// Web APIS// 비동기 작업을 처리하는 영역// setTimeout, setInterval, HTTP 요청, DOM 이벤트 핸들링 등은 Web APIs에서 처리1. 콜백함수// 비동기 작업 처리 1. 콜백함수/.. 더보기
DATE 객체 [JavaScript | 학습을 위한 자료 | 한입만 REACT] DATE 객체 // 1. DATE 객체를 생성하는 방법let date1 = new Date(); // 생성자console.log(date1);let date2 = new Date("1997-01-07/10:10:10");console.log(date2);// 2. 타임 스탬프// 특정 시간이 "1970.01.01 00시 00분 00초"(UTC)로 부터 몇 ms가 지났는지를 의미하는 숫자값let ts1 = date1.getTime(); // 현재 시간의 타임스탬프console.log(ts1);let date4 = new Date(ts1);console.log(date2, date4);// 3. 시간 요소들을 추출하는 방법let year = date1.getFullYear();let month = date1.. 더보기
배열 관련 메서드[JavaScript | 학습을 위한 자료 | 한입만 REACT] 배열 조작 메서드  // 6가지의 요소 조작 메서드// 1. push// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];const newLength = arr1.push(4, 5, 6, 7); // 추가후 변환된 길이를 반환console.log(arr1);console.log(newLength);// 2. pop// 배열의 맨 뒤에 있는 요소를 제거하고, 반환// 원본 배열이 수정let arr2 = [1, 2, 3];const poppedItem = arr2.pop();console.log(poppedItem);console.log(arr2);// 3. shift// 배열의 맨 앞에 있는 요소를 제거, 반환// 배열의 다른 요소들의 인덱스가 앞으로 이동// 원본 배열이.. 더보기
배열과 객체 순회 [JavaScript | 학습을 위한 자료 | 한입만 REACT] 배열과 객체 순회// 순회는 배열,객체에 저장된 여러개의 값에 순서대로 하나씩 접근하는 것// 1. 배열 순회let arr = [1, 2, 3];// 1.1 배열 인덱스for (let i = 0; i 더보기
구조분해할당, Spread 연산자 & Rest매개변수, 타입 [JavaScript | 학습을 위한 자료 | 한입만 REACT] 구조분해할당 // 구조 분해 할당// 배열 또는 객체의 속성/값을 간단하게 변수로 추출하는 방식 // 1. 배열의 구조 분해 할당// 배열에 변수를 순서대로 할당 let arr = [1, 2, 3];let [one, two, three, four =4] = arr; // 변수 할당, 대괄호 사용console.log(one, two, four);// 2. 객체의 구조 분해 할당let person = { name : "강진호", age : 36, hobby : "농구",};let { name, // person.name → name 변수에 할당 age: myAge, // person.age → myAge 변수에 할당 hobby, .. 더보기
Truethy와 Falsy, 단락평가 [JavaScript | 학습을 위한 자료 | 한입만 REACT] Truethy와 Falsy// Truethy와 Falsy// 참이나 거짓을 의미하지 않는 값도 조건문 내에서 참이나 거짓으로 평가// 조건문을 간결하게 만들 수 있다.// 1. Falsy한 값let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 = 0n;if(!f1) { console.log("falsy");}// 2. Truethy한 값// 7가지 Falsy 한 값을 제외한 나머지 모든 값let t1 = "hello";let t2 = 123;let t3 = [];let t4 = {};let t5 = () => {};if(t3) { console.log("truethy");}// 3. 활용 .. 더보기
객체, 배열 [JavaScript | 학습을 위한 자료 | 한입만 REACT] 객체// 객체// 여러가지 값을 동시에 저장할 수 있는 자료형// 여러 값을 키-값 쌍(key-value pair)으로 저장하는 참조형 데이터 구조// 1. 객체 생성let obj1 = new Object(); // 객체 생성자 방식let obj2 = {}; // 객체 리터럴 (대부분 사용)// 2. 객체 프로퍼티 (객체 속성) let person = { // 프로퍼티와 값 - key : value name : "강진호", age : 36, hobby : "바이크", 10 : 20, // 숫자형 키 "like cat" : true // 공백이 포함된 키 (따옴표로 묶어야 함)};// 3. 객체 프로퍼티를 다루는 방법// 3.1 특정 프로퍼티에 접근 (점 표기법, 괄호 표기법.. 더보기
콜백함수, 스코프[JavaScript | 학습을 위한 자료 | 한입만 REACT] 콜백함수// 콜백 함수// 자신이 아닌 다른 함수에 인수로써 전달된 함수를 의미// 해당 함수가 특정 시점에 호출되도록 정의// 비동기 함수의 실행이 완료된 후 특정 작업을 수행할 때 콜백 함수를 사용한다// 1. 콜백 함수function main(value) { console.log(value); value(); // 메인함수가 원하는 타이밍에 실행시킬 수 있다. console.log("end");}function sub() { // 콜백함수 console.log("i am sub");}main(sub); // 전달받은 콜백 함수를 실행// 2. 선언문 사용main(() => { // 함수표현식 - 익명함수 console.log("i am sub");});// 3. 콜백 함수.. 더보기

티스토리툴바