4전 4전

리액트는 페이스북에서 만든 사용자 인터페이스를 구축하는 데 사용되는 오픈소스 자바스크립트 라이브러리입니다. | 리액트의 특징 리액트는 UI를 컴포넌트(Components) 별로 분해하여 작동합니다. 이 컴포넌트는 복잡한 UI를 만들기 위해 서로 결합할 수 있는 각각의 코드 조각입니다. 이런 컴포넌트는 자바스크립트로 작성할 수 있고 여러 페이지에서 재사용이 가능합니다. | 리액트 사용 이유 리액트는 여러 프로젝트에서 사용할 수 있는 재사용가능한 컴포넌트를 사용하시 때문에 시간과 노력을 아낄 수 있고 유지 보수가 편하다는 장점이 있습니다. 리액트는 virtaul DOM을 사용해서 기존 방법보다 빠르고 효율이 좋다고 합니다. 리액트는 다른 프레임워크나 라이브러리와 같이 사용할 수 있어서 다양한 프로젝트에 유연..

자바스크립트에서 Array나 Object 자료형에 있는 데이터를 쉽게 꺼내고 싶을 때 destructuring 문법을 사용하면 쉽게 할 수 있습니다. | 사용 1. Array 안에 있는 데이터를 변수에 담기 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 출력 이런 식으로 사용하면 각 변수에 배열 데이터가 담깁니다. 또한 기본값을 지정할 수도 있습니다. let [a, b, c = 3] = [1, 2]; console.log(a, b, c); // 1 2 3 출력 2. Object 안에 있는 데이터를 변수에 담기 let data = { info: { name: '4전', age: 25, address: { city: 'New York', state: ..

자바스크립트에서 async/await는 코드의 비동기처리를 도와줍니다. 콜백함수와 promise도 비동기 처리를 도와주지만 async/await를 사용하여 좀 다른 방식으로 구현할 수 있습니다. | 사용 1. async 사용하기 위해서 함수 앞에 async 키워드를 넣어줘야 합니다. 그럼 그 함수는 항상 promise를 반환해서 then()을 이용해 실행시킬 수 있습니다. async function 함수() { return 1; } 함수().then((result)=>{ console.log(result) }) // 1출력 2. await await는 async함수 내부에서만 사용할 수 있는데 promise앞에 써주면 해당 promise의 작동이 끝날 때까지 기다린 다음에 다음 코드를 실행해 줍니다. a..

자바스크립트에서 promise는 비동기작업을 쉽게 할 수 있게 도와주는 기능입니다. 콜백함수로 비동기 처리를 할 수 있지만 작업이 많으면 코드가 복잡해지기 때문에 Promise를 사용할 수 있습니다. | 사용 먼저 Promise를 만들려면 new Promise() 문법으로 변수 오브젝트를 하나 생성하면 됩니다. let 프로미스 = new Promise(function(resolve, reject){ }); 프로미스.then(function(){ }).catch(function(){ }) 이런 식으로 사용하면 되는데 이때 프로미스 안의 코드가 실행(resoleve)되면 then() 안에 있는 코드를 실행시켜 고, 또한 코드 실행이 실패(reject)하면 catch() 안에 있는 코드를 실행시켜 줍니다. /..

자바스크립트에서 객체나 배열 등의 데이터 구조를 복사할 때 얇은 복사와 깊은 복사 두 가지 방법이 있습니다. | 얇은 복사(Shallow Copy) 얇은 복사는 해당 객체나 배열의 참조값(메모리 주소)만 복사하는 방법입니다. 이 경우에는 원본 객체와 복사된 객체가 같은 참조값(메모리 주소)을 가지고 있어서 복사된 객체를 변경하면 원본의 객체도 같이 변경이 돼서 주의해야 합니다. 1. 방법 (1) Object.assign() 사용 Object.assign() 첫 번째 인수로 전달된 객체에 다른 객체들의 속성을 복사하는 메서드입니다. 첫 번째 인자로 빈 객체를 전달해 주고 두 번째 인자에는 복사할 객체를 넣어주면 되고, 이때 중첩돼 있는 객체의 값은 원본 객채와 같은 참조값을 가리킵니다. let obj1 =..

동기식 처리는 코드가 한 번에 한 줄씩 차례로 실행되는 것을 말하고 비동기식 처리는 코드가 병렬적으로 한 번에 실행되는 것을 말합니다. | 자바스크립트가 작동하는 방식 1. 동기식 처리 자바스크립트에서는 코드가 동기식으로 작동합니다. 웹 브라우저에는 stack이라는 코드를 실행해 주는 공간이 있는데 거기에서 코드를 한 줄씩 차례로 실행해 주는 거입니다. 예를 들면 console.log(1); console.log(2); console.log(3); 이런 식으로 코드를 작성하면 자바스크립트는 동기적으로 작동하기 때문에 콘솔에 차례대로 1, 2, 3이 출력이 됩니다. 2. 비동기식 처리 자바스크립트에서 코드를 비동기식으로 처리하는 경우도 있는데 이는 setTimeout(), addEventlistener()..

자바스크립트 자료형에는 크게 2가지 타입이 있는데 그게 원시타입과 참조타입입니다. | 원시타입(Primitive Type) 1. 종류 원시타입의 종류는 다음과 같습니다. 숫자 문자열 불리언 null undefined 심벌(Symbol) 2. 특성 원시타입의 데이터를 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장이 됩니다. 그래서 원시값이 같은 변수를 다른 변수에 할당하면 원본 원시값이 복사돼서 전달됩니다. let a = 10; let b = a; // a의 원시값 10 복사 a = 11; console.log(a); // 11 출력 console.log(b); // 10 출력 | 참조타입(Reference Type) 1. 종류 참조타입의 종류는 대표적으로 다음과 같습니다. 배열(Array..

자바스크립트에서 slice() 메서드는 기존 배열에 일부분을 추출하고 추출된 요소와 함께 새로운 배열을 반환해 주는 메서드입니다. | 사용 1. 문법 slice() 메서드는 매개변수로 2가지를 집어넣을 수 있습니다. array.slice(start, end) 여기서 start는 내가 추출하고 싶은 부분의 시작 인덱스이고 end는 종료 인덱스입니다. slice()는 start인덱스에서 end인덱스 전까지 부분이 추출되고, 만약 end 매개변수가 주어지지 않으면 시작 인덱스부터 배열 끝까지 요소가 추출됩니다. 2. 사용 let numbers = [1, 2, 3, 4, 5]; let numbers1 = numbers.slice(1, 3); console.log(numbers1); // [2, 3] 출력 이런 ..