'모던 자바스크립트 Deep Dive' 책과
'리액트를 다루는 기술' 책을 통해
자바스크립트와 리액트의 기본을 학습해봅니다.
기본 개념 정리와 새롭게 알게 된 사실을 정리합니다.

자바스크립트

1. 용도

: 본래 웹 페이지의 단순한 보조기능 처리 목적.

하지만,
프론트/백엔드 프로그래밍 언어로 사용할 수 있는
'범용 애플리케이션 개발언어'로 성장.

2. 기본 개념/동작원리의 이해와 중요성

⭐ 개발자는 '예측 가능한 코드'를 작성해야 한다.
→ (그러러면 먼저)
코드의 동작 원리를 알고, 이해해야 한다.

• 에러 발생 코드→발생 원인을 이해해야 디버깅 가능
• 한 번에, 완벽하게 이해하기 ❌
• 여러 번 반복해서 학습하는 것이 효율적 ⭕
• 앨리스의 토끼굴'을 조심하자.
  (한 개념을 공부하기 위해, 다른 개념들을 학습하다가 점점 본질과 멀어지는 것.)
• 머리 속에 있는 코드를 구현하면서 연습해나가기.
  (문제 해결방안을 문법으로 구체화 하는 과정)

3. 학습의 사이클

1. 기본 개념과 동작 원리(용어, 개념, 문법 등)
   👉2. 코딩 스킬(도전적인 목표⭕)
   👉3. 프로젝트(경험)
   👉1. 기본 개념과 동작 원리
   ...

4. ES5, ES6는 정확히 뭘까?

1966년 8월, 마이크로소프트의 'Jscript'(자바스크립트 파생버전)를 IE3.0에 탑재.

IE의 Jscript랑 넷스케이프의 JS랑 호환이 쏘쏘함.
👉브라우저에 따라 웹페이지가 정상 작동하지 않는 '크로스 브라우징 이슈'가 발생.

이를 해결하기 위해 자바스크립트의 표준화 요청
👉'ECMAScript' 탄생
(이것을 줄이면 'ES'고, 버전에 따라 'ES1', 'ES5', 'ES6' 등등이 있다.)

정리하면,
크로스 브라우징 이슈를 해결하기 위해
자바스크립트의 문법을 표준화해서 정해준 것.
유명한 ES6에서는 화살표 함수, let/const, 스프레드 문법 등이 나오고,
우리는 이 표준화 규격에 맞춰 코드를 작성해나가고 있는 것이다.
(값, 타입, 객체, 프로퍼티, 함수 등)

5. Ajax와 SPA

1999년, 서버와 브라우저가
비동기 방식으로 데이터를 교환할 수 있는 통신 기능
'Ajax'가
'XMLHttpRequest'라는 이름으로 등장.

✔ 등장 이전

• 서버에서 완성된 html 코드를 전송받아 웹페이지를 렌더링함
• 화면 전환 시, 새로운 html 코드 싹~다 전송받아 리렌더.
  👉불필요한 데이터 통신 발생, 화면깜빡임(UX 감소)

✔ 등장 이후

• 화면 전환 시, 필요한 html코드만 받아와서 렌더링 가능
  👉필요한 데이터만 통신 ⭕, 화면깜빡임❌(부드러운 화면전환, UX 개선)

...
시간이 흘러 개발 규모와 복잡도가 상승
→ 유연성과 확장성을 위해, 프레임워크와 라이브러리들이 등장.

CBD(컴포넌트 기반 개발 방법)를 기반으로 하는
SPA(싱글 페이지 애플리케이션)가 대중화.
👉우리에게 익숙한 React와 Angular, Vue.js, Svelte 등의 SPA 프레임워크/라이브러리를 사용하고 있는 오늘날.

본인은 리액트만 SPA가 가능한 줄 알았음.
'Ajax'는 SPA가 가능하게 해주는 웹 개발 기법이고,
리액트가 'Ajax' 기법을 사용하는 것!

6. 상수와 변수, null과 undefined

본인은 상수와 변수가 같은 줄 알았다. 하지만 약간의 차이가 있다.
또한 null과 undefined도 목적에 맞게 사용할 수 있다.

결론부터 얘기하면,

✔ 변수 : 바뀔 수 있는 값
✔ 상수 : 바뀔 수 없는 값

✔ null : 값이 없을 때(없는 것)
✔ undefined : 값이 설정되지 않았을 때(설정을 안해서 없는 것)

이해가 쉽도록
간단히 코드 예시를 작성해본다.

😎 변수와 상수

// 변수

let word = '안녕하세요';
word = '반갑습니다';

console.log(word); // 반갑습니다

// 상수
const word = '안녕하세요';
word = '반갑습니다' // 에러 발생

console.log(word); //안녕하세요