AR삽질러

React.js 1. React.js란https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC) 리액트 (자바스크립트 라이브러리) - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공ko.wikipedia.org  - Meta(Facebook)에서 개발한 오픈소스 JavaScript라이브..

JavaScript - 동기와 비동기(19) 1. 동기(Synchronous)와 비동기(Asynchronous) - 동기와 비동기는 코드가 실행되는 방식을 설명하며 실행 흐름과 처리방식에 영향을 미치게된다.console.log(1);setTimeout(() => { console.log(2);}, 3000);console.log(3);동기 - console.log(2), console.log(3)은 순서대로 실행되는 동기작업비동기 - setTimeout(() => { console.log(2); }, 3000); 는 비동기 함수로 JavaScript엔진에 의해서 호출된 후 내부적으로 타이머가 설정된다. 2. 동기(Synchronous) - 동기 방식에서는 코드가 순차적으로 실행된다. - 하나의 작업이..

JavaScript - Date객체와 날짜(18) 1. Date객체와 날짜 - Date객체는 날짜와 시간을 다룰 수 있는 도구로 Date객체를 사용하면 현재 날짜와 시간, 특정 날짜와 시간을 생성하거나 날짜간의 차리를 계산하는 등의 작업이 가능하다. 1-1. 기본 생성let now = new Date();console.log(now); 1-2. 특정날짜로 생성 - month는 0부터 시작 - year는 4자리 숫자로 지정 - 나머지 매개변수는 생략가능하며 생략시 값은 0이 된다.let date1 = new Date();let date2 = new Date("2024/08/22");let date2 = new Date("2024,08,22,12,00,00");console.log(date1);console..

JavaScript - 배열 메서드(17) 1. 배열 - 여러개의 값을 순서대로 저장할 수 있는 자료구조로 각 값에는 index로 접근할 수 있다. - 배열의 각 요소는 어떤 타입이든 될수 있다.(숫자, 문자열, 객체 등) 배열의 특징 - 순서가 있는 데이터 - 다양한 자료형 - 가변길이let arr = [1, 2, 3];console.log(arr.length);console.log(arr[0]);console.log(arr[1]);console.log(arr[2]); 2. 배열 - 요소 조작push메서드 - 배열의 끝에 요소를 추가한다.let arr1 = [1, 2, 3];const newLength = arr1.push(4, 5, 6, 7);console.log(newLength);console.l..

JavaScript -  원시타입과 객체타입(16) 1. 원시타입(Primitive Type)과 객체타입(Object Type)자료형 원시타입 : Number, String, Boolean, Null, Undefind 객체타입 : Object(Array, Function, RegexExp) - JavaScript에서 값은 두가지로 나뉘며 두 타입은 메모리에서 값이 어떻게 저장되고 처리되는지에 차이가 있다. 2. 원시타입(Primitive Type) - 원시타입은 변경할 수 없는 값을 나타내며, 메모리에 직접 저장되어 값 자체로써 변수에 저장되고 복사된다. - 불변값으로 메모리 값 수정이 불가능let a = 10;let b = a;b = 20;console.log(a);console.log(b); 3. 객..

Spread연산자와 Rest매개변수 1. JavaScript - Spread연산자와 Rest매개변수란 - 문법적으로 동일한 ...을 사용하지만 목적과 용도가 다르다. 2. Spread연산자 - 배열이나 객체의 요소들을 개별적으로 펼쳐서 다른 배열이나 객체에 복사하거나 함수의 인수로 전달할 때 사용된다.let arr1 = [1, 2, 3];let arr2 = [4, ...arr1, 5, 6];console.log(arr2);...arr1는 arr1배열의 요소들인 [1, 2, 3]을 개별 요소로 펼친다.배열 arr2의 다른 요소들과 결합되어 [4, 1, 2, 3, 5, 6]이라는 새로운 배열이 생성된다. let obj1 = { a: 1, b: 2 };let obj2 = { ...obj1, c: 3, c:..

JavaScript - 구조분해할당(Destructuring Assignment) 1. 구조분해할당(Destructuring Assignment)란? - 배열이나 객체 등 복합적인 데이터 구조에서 개별 요소를 추출해 변수에 쉽게 할당하는 방법이다.let ary = [1, 2, 3];let [one, two, three, four = 4] = ary;console.log(one, two, three);console.log(one, two);console.log(one, two, three, four); - 구조분해할당을 사용해 배열의 각 요소를 개별 변수로 추출할 수 있다. - 배열에 없는 네 번쨰 요소는 기본값인 4가 할당되고 기본값이 설정되지 않은 요소는 undefined가 추출된다.  2. 객체의 구..

단락평가(Short-circuit Evaluation) 1. 단락평가(Short-circuit Evaluation)란 - 논리연산자 &&, || 가 평가 도중에 불필요한 연산을 생락하는 것으로 성능을 최적화하고 코드를 간결하게 작성하는데 유용하다. - 논지연산자가 좌항의 값만으로 결과를 결정할 수 있을 경우 우항의 표현식은 평가하지 않고 결과를 반환하는 것을 의미한다.let varA = false;let varB = true;console.log(varA && varB);console.log(varA || varB); varA && varBvarA가 false이기 때문에 varB는 평가되지 않고 결과는 false가 된다.varA || varBvarA가 false이기 때문에 varB가 평가되고 결과는 tr..

JavaScript - Truthy와 Falsy (12) 1. Truthy & Falsy란 - JavaScript에서 값이 Boolean일때 어떻게 평가되는지 나타내며 참이나 거짓을 의미하지 않는 값이라도 조건문 내에서 참이나 거짓으로 평가하는 특징 2. Falsy한 값- Falsy값은 불리언 문맥에서 false로 평가되는 값으로 if조건문이나 논리 연산에서 false처럼 동작한다.falseboolean""빈 문자열0숫자 0null값이 없음-0음수undefined정의되지 않음0nBigint 0NaNNot-a-Number // 1. Falsy한 값let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 =..

JavaScript - 배열 (11) 1. 배열 - 여러개의 값을 순차적으로 담을 수 있는 자료형으로 배열의 각 요소는 index로 식별된다. - index는 0에서 부터 시작하고 값의 리스트를 저장하고 조작하거나 접근하는데 유용하다. 2. 배열의 생성 // 1. 배열 생성let arr1 = new Array(); // 배열 생성자let arr2 = [];let arr3 = [1, 2, 3, true, "Hi", null, undefined, () => {}, {}, []];console.log(arr3);배열 생성자(Array Constructor) : new Array() 구문으로 배열을 생성할 수 있다.배열 리터럴(Array Literal) : [ ] 를 사용해 배열을 생성할 수 있다.배열은 num..