React / 모던 JS

🔴 React

ajax 메소드 형식을 맞춰 보내야 정상작동함

🟠 모던 자바스크립트란?

Vanila JS는 순수 자바스크립트 자체를 말한다.
그렇다면, 모던 JS라면 무엇인가
정확히는 어느 부분을 기점으로 분기된 자바스크립트 라고 이해했는데,
그 기점은 다음과 같다.

ES6(2015) 이후에 추가된 문법과 기능을 포함한 자바스크립트

ES가 뭐지?

ES는 ECMAScript 의 약자이다.
JS는 95년도 Netscape 라는 웹페이지에 동적인 요소를 구현하기 위해 발명되었는데,
이후 다른 웹 브라우저들까지 이를 탑재하며 JS가 공통되게 잘 작동할 표준 규격의 필요성이 커지게 된다.

ECMA 국제 기구에서는 ECMAScript standard 라는 스크립트 표준을 만들게 된다.

ES에는 엄격 모드나 각종 내장 객체 및 함수, 전역 객체, 자료형 등등..이 포함된다.

ES6(ES2015)는 TS(TypeScript)의 기반이 되는 클래스 문법 및 모듈 기능 추가된 버전이다.

###

리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리 / 프레임워크를 사용한다 npm, yarn 등의 패키지 관리자를 사용한다.

ES6 뭐시기 표기법 -> 모던 자바스크립트의 설명 웹팩, 바벨을 사용해 사이트를 만듬 SPA로 작성한다.

🟠 모던 자바스크립트의 특징, 패키지 관리자

npm, yarn 패키지 관리자로, package.json

🟠 모던 자바스크립트의 특징, 모듈 핸들러

모던 자바스크립트는 그대로는 브라우저에서 실행을 못하기에, 모듈 핸들러인 바벨이 중간에서 번역, 최적화를 한다.

🟠 SPA(Single Page Application)

HTML 파일 하나, 자바스크립트를 이용해 DOM을 바꿔써서 화면 이동을 구현 ( 가상 DOM 을 사용해 메모리를 많이쓴다? )

서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링

🟠 기초문법 ( JS )

타입 원시 타입 string number(정수,실수) boolean undefined(값이할당되지않은 변수의 기본값) null(값이 없음을 의도적으로 나타냄) symbol(고유한 식별자를 만들기 위한 타입) bigint(아주 큰 정수를 다루기 위한 타입 ES2020)

객체 타입

• 객체 : 키-값 쌍을 저장하는 컨테이너 ( 중괄호 )
• 배열 : 순서가 있는 리스트
• 함수 : 실행 가능한 객체
• 기타 : Date 같은 사용자 정의 클래스 등도 모두 객체
• 타입확인은 typeof 연산자로 ( null은 object으로 표시되는건 고유 오류 )

변수 선언 ( const, let ) var를 이용한 변수 선언은 문제 : 모던 JS에서는 변수를 덮어쓸 수 있다는 점과 재선언 할 수 있다는 점

예기치 않은 가능성이 많아지기 때문에 var은 잘 쓰지 않는다는 것

let은 재할당은 가능 / 재선언은 불가 (같은블록안에서의 한함)

const는 재할당 및 재선언 불가 ( 상수 ) 다만, 값을 변경할 수도 있다.. 종류에 따라서 문자열이나 수치 등 primitive type 이라 불리는 종류의 데이터들, const를 이용해 덮어쓰기 가능

객체나 배열 등 object type이라 불리는 데이터들은 const로 정의해도 도중에 값(DATA) 변경이 가능하다.

React에서는 const를 많이 사용하고, 처리 도중 값을 덮어 써야 하는 변수만 let으로 선언 ( 블록 유효 범위 )

초기화는 변수를 처음 선언할 때 초기값을 넣어 선언하는것. var로 선언해둔 변수는 undefined let, const 는 그냥 변수만 만들어져, 초기화 작업이 필요하다.

화살표 함수 ES2015에서 추가된 함수의 표기법, => 으로 함수를 선언하는 것이 특징이다.

// 기존 방식
const func1 = function(value) {
  return value;
};
console.log(func1("func1입니다"));

// ES2015에서 추가된 함수
// 인수가 하나면, 소괄호 생략 가능 2개 이상은 불가
const func2 = (value1, value2) => {
  return value;
}
console.log(func2("func2입니다"));

분할 대입 ( 키포인트 제 1 )

• 객체나 배열로부터 값을 추출하기 위한 방법 객체 리터럴을 할당한 친구들을 그냥 꺼내쓴건 분할 대입을 이용하지 않은 경우이다.

const {name, age} = myprofile;
const {name:meName, age:meAge} = myprofile; // 별칭 지정 가능

const msg = `내 이름 : ${name}입니다. 나이 : ${age}입니다.`

이렇게 하는 것이 분할 대입같다. myprofile은 리터럴을 명시한 객체이다.

일부만 추출 및 순서를 추출하는 것은 가능하나 존재하지 않는건 지정 불가.

배열 분할 대입 ( 키포인트 제 2 )

• 배열에도 분할 대입 이용 가능 배열 인덱스를 지정하여 대입

배열에 저장된 순서에 임의의 변수명 설정이 가능하지만, 순서 변경이 불가능하다, 임의로 설정한 변수명을 이용하게 된다.

디폴트값 디폴트값 - 파이썬의 디폴트값 개념이다. 객체에서는 뭐 그러려니 하는데 분할 대입 객체에서는?

🟡 보강

🟡 선택자, 가상 클래스

🟡 우선순위

🟡 미디어쿼리

자바스크립트는, 웹 브라우저용 스크립트 언어 그러니, 본격적인 프로그래밍 언어는 아니란 점이다.

클라이언트 측의 고유한 기술요소

• window 인터페이스
• DOM
• XMLHttpRequest : AJAX

서버 측 고유한 기술요소

• Node.js : 구글이 개발한 JS 실행 환경
• Aptana Jaxer :

비교연산에서 == 와 ===의 차이는 데이터 타입을 보느냐 안보느냐이다.