콛 다이어리

템플릿 리터럴변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해줌백틱(`) 사용문자열을 여러 줄로 작성하는 목적으로도 사용됨 destructing객체에서는 키가 중요함배열에서는 인덱스가 중요함배열에서는 위치만 맞으면 구조분해할당이 됨파일을 기능별로 분류하는 것과변수명을 나눠서 분류하는 것은 그저 선호도 차이임const customer = {   name: "은진", };const item = {  name: "아메리카노",  price: 4000,};const name = item.name;const price = item.price;// 얘네가 몇 백개, 몇 천개 있으면// 일일이 써줘야 하는데// 이 일을 한 번에 해줄 수 있다.// 구조를 객체 형태로 가지고 있는데// name과 price를 각각..

push( )배열.push( )배열에 요소 추가 pop( )배열.pop( )배열의 마지막 요소 출력 map( )배열.map(콜백함수( ))원본 배열에서 각 요소를 가공한새로운 배열을 리턴하는 함수1) 배열 내의 모든 요소 각각에 대해2) 주어진 함수를 호출한 결과를 모아3) 새로운 배열을 반환 filter( )배열.filter(콜백함수( ))변수를 선언해서 사용해야 함 reducereduce(콜백함수(누적된 값, 일반 값))배열의 각 요소에 대한 함수를 실행하고결과를 누적해서 반환함숫자던, 배열이던, 객체던하나의 값으로 줄여 리턴하는 함수// 숫자들의 합을 구하기// 가장 큰 숫자 찾기(누적기)numbers.reduce(function (누적값, 일반값) {  console.log("------");  ..

객체key - valueJSON (JavaScript Object Notation)const 객체 = {   속성 : "값"   속성 : "값"   속성 : "값" } 객체 접근 방법1. 점 표기 법(.)속성. 객체명 2. 괄호 표기법속성[속성명을 담은 변수] 객체 추가속성. 추가할 객체명 = "값" 객체 수정속성. 수정할 객체명 = "값" 속성 삭제delete 객체명.속성; (1) Object.keys( )객체의 key를 추출하는 메서드 (2) Object.values( )객체의 값을 추출하는 메서드 (3) entries객체의 key와 값을 쌍으로 반환하는 메서드 (4) assign원본 객체에 속성을 복사하는 메서드  배열순차 데이터를 저장할 때 쓰임숫자의 배열, 문자의 배열대괄호를 사용함

var 키워드는 사용을 지양함 사용 이유데이터 저장관리의 필요성사용자로부터 받은 입력을 처리계산 결과를 재사용해야 할 때프로그램의 복잡성 관리// 변수가 없다면 모든 값을 기입해야 한다.그러면,코드가 복잡해지고, 오류가능성이 높아지며,프로그램의 확장성과 유지보수성이 떨어진다.하지만 변수를 사용하면코드의 가독성이 높아지고,수정이 필요할 때 적은 변경으로원하는 결과를 얻을 수 있다. var, let재할당 가능 const재할당 불가능상수를 선언할 때 사용값이 변경되지 않는 변수를 명확히 표현값 변경으로 인한 버그를 예방 가능 변수 선택 시,let과 const를 고를 때에 먼저 const를 선택재할당이 필요할 경우에 let을 선택 var 키워드 사용을 지양하는 이유범위 관리의 어려움예상치 못한 범위에서 사용될 ..

리액트웹 페이지를 만들 때 사용하는 자바스크립트 라이브러리다양한 화면 요소를 컴포넌트로 나눠서 만들 수 있음 DOM (Document Object Model)웹 페이지의 구조를 나타내는 트리구조트리구조를 이루는 것들은 엘리먼트(여는태그+닫는태그)(엘리먼트들이 모여서 트리구조가 됨)웹 브라우저는 이것을 읽어서 화면에 페이지를 출력   2. 하는 일리액트- 컴포넌트를 DOM이 읽고 웹 브라우저에 보여주는 역할을 한다. 가상 DOM (Virtual DOM)- 실제 DOM의 복사본- 페이지의 변화가 생기면 여기서 변화를 계산한다.- 실제 DOM과 비교해서 필요한 부분만 업데이트한다.  → 페이지가 더 빠르고 효율적으로 작동 즉,리액트 DOM은 리액트 컴포넌트를 웹 페이지에 실제로 보여주고 관리하는 역할을,가상 ..

함수 선언하는 방법 - function 함수명() {  } - const 변수 = function 함수명 () { } // 이러한 형태가 가능한 이유는 자바스크립트 안에서 참조한 변수들은 // 부모 타입이라고 할 수 있는 상위타입이// object 타입이라고 할 수 있음// 그래서 function() 역시도// 그냥 값으로 취급한다면 이런 표현도 가능 const add = function (a, b) { return a + b; } //  단어' function'를 없앰 // → 매개변수 괄호 우측에 화살표 입력 // →  return이 한 줄인 경우// 중괄호와 return의 키워드가 필요없음 const add = (a, b)=> { return a + b; } const add = (a, b)=> a..

promise 비동기 작업의 최종 완료 또는 실패 결과에 따라 콜백 함수를 연결할 수 있음 상태 pending (대기중) 초기상태 성공 또는 실패가 결정되지 않은 상태 fulfill (이행됨) 연산이 성공적으로 완료되어 프로미스가 결과값을 반환한 상태 rejected (거부됨) 연산 실패 오류 const myPromise = new Promist(function (resolve, reject) if ( true) { resolve("Seccess"); } else {   reject ("Failed"); } }); then은 성공한 경우 catch는 실패한 경우 async 함수 선언 앞에 붙여 정의 항상 Promise를 반환 async function fetchData() {    return 'Data..

모듈 관련 함수, 변수, 객체, 클래스 등을 한 파일로 그룹화 한 것 재사용할 수 있는 함수, 객체 또는 원시값export 키워드를 사용해서 모듈 생성 다른 파일에서 사용할 수 있게 함 import 키워드로 다른 파일에서 함수를 불러와 사용 가능자바스크립트의 실행 환경은 브라우저 환경과 Node 환경이 존재 Node 환경에서의 import 방식은 CommonJS 방식과 ES6 방식 존재 React 개발환경은 대부분 ES6에서 게시된 방법 사용여러 스크립트에서 동일한 함수 이름을 사용하더라도 모듈을 사용하면 각 스크립트에서 정의된 함수는 해당 모듈 내에서만 유효 사용하는 이유:    // 위에서 아래로 흐르기 때문에 모듈 시스템 import $ from 'jquery'; // 자동으로 jQuery에 대..

spread perators 객체나 배열을 복사할 때 많이 쓰임 배열이나 객체를 합칠 때 많이 쓰임 const originalUser = { name = "조희진" age = 26, };복사해야 할 경우 const updatedUser = originalUser; 복사 X참조하는 위치를 변경 O불변성과도 관련그래서 Spread Operators가 나옴originalUser에 조희진과 26이라는 value를 가지고 있음updatedUser.name = "조은진"; console.log("원본 =>" updatedUser); // name: '조은진', age: 26 console.log("원본 =>" originalUser); // name: '조은진', age: 26 UpdatedUser는 Origina..

Template Literals 변수와 표현식을 문자열 안에 쉽게 삽입할 게 해주는 문법백틱(`) 문자열을 여러 줄로 작성하는 목적으로도 사용됨const customer = { name: "인스피릿",    }; const item = { name: 스타크래프트 리마스터 카툰팩"; price: 50, };console.log("감사합니다. " + customer.name + "님!"); // 감사합니다. 인스피릿님! console.log("감사합니다. " + customer.name + "님!" +  item.name + "을(를) +  item.price + "원에 구매하셨습니다."); // 감사합니다. 인스피릿님! 스타크래프트 리마스터 카툰팩을 50원에 구매하셨습니다. console.log(`감사합니..