콛 다이어리

1. 함수형 컴포넌트    1) 상태 변경 함수(함수)로 값을 변경시킬 수 있음    2) 함수의 인자(매개변수)에는 현재 state를 가져올 수 있음    3) 중괄호에는 변경할 코드를 입력하면 됨2. 배치 업데이트를 하는 이유    1) 불필요한 리렌더링을 방지하기 위함 (렌더링 최적화)배치 업데이트(Batch Update): 리액트가 더 나은 성능을 위해여러개의 state 업데이트를하나의 리렌더링으로 묶는 것을 의미

강의를 몇 번이나 되돌리기 했는지찾아본 블로그만 몇 개인지 모르겠다.  라우트(Route):서로 다른 네트워크 간 데이터를 전송하고전송한 데이터를 받는 경로경로, 컴포넌트 및 기타 옵션을 포함하며, 이 배열은 일반적으로 라우터의 설정에서 사용 라우터(Router):라우팅 관련 라이브러리가 많으며사람들이 가장 많이쓰는 라이브러리 라우팅(Routing):엔드 포인트(URI, 경로)의 정의해당 엔드포인트에 대한 클라이언트 요청에애플리케이션이 응답하는 방식 라우츠(Routes):라우터에 등록된 모든 라우트를 나타내는 객체  React Router Dom으로 페이지 이동을 구현하는 방법1. Link 태그HTML의 a 태그와 유사하지만,페이지 전체를 다시 로드하지 않고도클라이언트 측에서 페이지를 전환할 수 있게 해..

반복문에서 루프의 흐름을 제어할 때 사용되는 키워드이다. breakfor, while, do...while과 같은 반복문에서 사용할 수 있음즉시 반복을 중단하고 루프를 완전히 빠져나감특정 조건이 만족되면 루프를 종료나머지 코드를 건너뛰고 다음 코드로 넘어감 continue 반복문의 현재 반복만 건너뛰고, 다음 반복을 계속 진행해당 루프의 나머지 코드는 건너뛰고, 바로 다음 반복으로 넘어감   즉, break문은 반복문을 즉시 종료하고 반복문 바깥의 코드로 이동하고continue문은: 현재 반복을 중단하고, 다음 반복을 계속 진행합니다

템플릿 리터럴변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해줌백틱(`) 사용문자열을 여러 줄로 작성하는 목적으로도 사용됨 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 키워드 사용을 지양하는 이유범위 관리의 어려움예상치 못한 범위에서 사용될 ..

for문사용 방법for (초기값; 조건식; 증감식) { } for (let i = 0; i   console.log(i); }// 0 // 1 // 2 // 3 // 4 // 5 // 6 // 7 // 8 // 9  배열 길이 사용하기const arr = ["one", "two", "three", "four", "five"]; for (let i = 0; i .length; i++) {   console.log(i);   console.log(arr[i]); }// 0 // "one" // 1 // "two" // 2 // "three" // 3 // "four" // 4 // "five" for ~ in문 객체의 속성을 출력하는 문법key는 객체 안의 키 사용 방법for (let key ..

forEach 사용 방법 배열.forEach(콜백 함수) 별도로 return되는 값은 없음 안의 로직이 실행되기만 함 콜백 함수 매개변수 자리에 들어가는 함수 (콜백 함수의) 매개변수에는 배열의 요소들이 순회함 for문과 비슷 let NotMini = ["OverTheTop", "Paradise", "Seaon2", "Back", "Top Seed"]; NotMini.forEach(function (item) {   console.log("item입니다.=>" + item);   // item입니다.=>OverTheTop   // item입니다.=>Paradise   // item입니다.=>Seaon2   // item입니다.=>Back   // item입니다.=>Top Seed });  map 배열 내..

배열 인덱스(index)를 가짐 인덱스는 0부터 시작 인덱스 순서가 중요 배열 생성하는 방법변수 = [ ]; 콤마로 요소들을 구분 배열 요소에 접근하는 방법변수 [인덱스 번호] // 크기 지정 let number = new Array(5); console.log(number); // [ ]  배열 메소드push( )마지막 요소를 추가하는 메소드 let IfntConcert = ["LV", "장동우 에어라인", "식목일", "REBOOT", "다시 시작"]; console.log(IfntConcert); // 'LV', '장동우 에어라인', '식목일', 'REBOOT', '다시 시작' ] IfntConcert.push("무한대집회 IV"); console.log(IfntConcert); // [ 'LV',..