JSX 주의 사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
2. 숫자, 문자열, 배열 값만 화면에 렌더링 된다.
3. 모든 태그는 닫혀있어야 한다.
4. 최상위 태그는 반드시 하나여야만 한다.(적절한 최상위 태그가 없을 경우 빈 태그로 묶으면 됨)
   • 대신 빈 태그로 묶을 경우, 태그 없이 모든 요소가 흩어져 있음

React.js란?

• Meta가 개발한 오픈소스 JavaScript 라이브러리
  • 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술

React의 기술적인 특징

1. 컴포넌트를 기반으로 UI를 표현한다.
   • 컴포넌트(Component): 구성요소 - 화면을 구성하는 요소, UI를 구성하는 요소를 의미
2. 화면 업데이트 구현이 쉽다.
   • 업데이트: 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것
   • 업데이트를 위한 복잡한 동작을 직접 정의할 필요없이 특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트 시킬 수 있음
   • React는 선언형 프로그래밍(과정은 생략하고 목적만 간결히 명시하는 방법)이라 구현이 쉬움
   • JavaScript와 비교했을 때, JS는 명령형 프로그래밍이라 모든 과정을 일일이 설명해야 하므로 코드가 길고 복잡한 대신, React는 목적만 깔끔하게 명시하여 코드가 간결함
3. 화면 업데이트가 빠르게 처리된다.
   • 화면 업데이트는 JavaScript가 DOM을 수정할 경우 발생
   • React는 Virtual DOM(DOM을 자바스크립트 객체로 흉내낸 것 - 일종의 복제판)을 사용하여 복제판에 먼저 반영해 봄
   • Virtual DOM이 업데이트를 모아 한번에 반영하여 DOM의 수정은 총 1회 일어남

Node.js란?

• JavaScript 실행 환경(Run Time) = 구동기
• Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임

JavaScript 히스토리

• 웹 브라우저의 JavaScript는 웹 페이지 내부에 필요한 아주 단순한 기능만을 개발하기 위해 만들어짐
• 매우 유연하고 작성하기 편리하게 설계, 생산성 매우 높음
• 많은 사람들이 웹 브라우저 외부에서 사용하고 싶어하고, 웹 서버로 만들고 싶어하게 됨
• Node.js의 등장으로 JavaScript를 어디서든 사용이 가능하게 됨(웹 서버, 모바일 앱, 데스크톱 앱 등)

#3.3 Node.js 사용

프로젝트(Project)

• 특정 목적을 갖는 프로그램의 단위
• Node.js에서는 프로젝트를 패키지라고 부름

#3.4 Node.js 모듈 시스템 이해

모듈 시스템(Module System) 이란?

• 모듈을 다루는 시스템
  • 모듈을 생성하고, 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템

    모듈(Module) 이란?

• 기능별로 나누어진 각각의 자바스크립트 파일

#3.5 Node.js 라이브러리 사용

라이브러리란?

• 프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓은 것

• 비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체
• 비동기 작업을 감싸는 객체이다.

효능

• 비동기 작업 실행
• 비동기 작업 상태 관리
• 비동기 작업 결과 저장
• 비동기 작업 병렬 실행
• 비동기 작업 다시 실행
• 기타 등등...

비동기 작업 예시

• setTimeout

Promise의 3가지 상태

1. 대기(Pending): 아직 작업이 완료되지 않은 상태
   • ex) 유튜브 영상 로딩중
2. 성공(Fulfilled): 비동기 작업이 성공적으로 마무리 된 상태
   • ex) 시청 가능
3. 실패(Rejected): 비동기 작업이 실패한 상태
   • ex) 시청 불가능 한 상태

• 대기 -> 성공: 해결(resolve)
  • ex) 영상 로딩 완료
• 대기 -> 실패: 거부(reject)
  • ex) 영상 로딩 실패

• 여러 개의 작업을 순서대로 한 번에 하나씩 처리하는 방식
• JavaScript는 동기적으로 코드를 실행한다

동기 방식에는 치명적인 단점이 존재한다

비동기란?

• 동기적이지 않다는 뜻
• 작업을 순서대로 처리하지 않음

비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs에서 실행이 되므로 동시에 작업을 처리할 수 있는 것

• Web APIs: 웹 브라우저가 직접 관리하는 별도의 영역

console.log(1);

setTimeout(() => {
  console.log(2);
}, 3000);

console.log(3);

let date1 = new Date(); // 생성자
let date2 = new Date("1997-01-07");

2. 타임 스탬프

• 특정 시간이 "1970.01.01 00시 00분 00초"(UTC)로 부터 몇 ms가 지났는지를 의미하는 숫자값

  let ts1 = date1.getTime();
  let date4 = new Date(ts1);

3. 시간 요소들을 추출하는 방법

let year = date1.getFullYear();
let month = date1.getMonth() + 1; // js에서는 월은 0부터 시작함
let date = date1.getDate();

let hour = date1.getHours();
let minute = date1.getMinutes();
let seconds = date1.getSeconds();

4. 시간 수정하기

date1.setFullYear(2023);
date1.setMonth(2);
date1.setDate(30);
date1.setHours(23);
date1.setMinutes(59);
date1.setSeconds(59);

5. 시간을 여러 포맷으로 출력하기

console.log(date1.toDateString()); // 시간 제외 날짜만 출력
console.log(date1.toLocaleString()); // 현지화 된 형태로 출력

1. filter

• 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환

  let arr1 = [
  { name: "이정환", hobby: "테니스" },
  { name: "김효빈", hobby: "테니스" },
  { name: "홍길동", hobby: "독서" },
  ];
  
  

const tennisPeople = arr1.filter((item) => item.hobby === "테니스");

### 2. map
- 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고 그 결과값들을 모아서 새로운 배열로 변환
```javascript
let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
  return item * 2;
});

let names = arr1.map((item) => item.name);

3. sort

• 배열을 사전순으로 정렬하는 메서드

  let arr3 = ["b", "a", "c"];
  arr3.sort();
  

let arr4 = [10, 3, 5]; arr4.sort((a, b) => a - b);

### 4. toSorted
- 정렬된 새로운 배열을 반환하는 메서드
```javascript
let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();

5. join

• 배열의 모든 요소를 하나의 문자열로 합쳐서 반환하는 메서드

  let arr6 = ["hi", "im", "winterlood"];
  const joined = arr6.join(" ");

1. forEach

• 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드

  let arr1 = [1, 2, 3];
  arr1.forEach(function (item, idx, arr) {
  // console.log(idx, item * 2);
  });
  
  

let doubleArr = [];

arr1.forEach((item) => { doubleArr.push(item * 2); });

### 2. includes
- 배열에 특정 요소가 있는지 확인하는 메서드
```javascript
let arr2 = [1, 2, 3];
let isInclude = arr2.includes(3);

3. indexOf

• 특정 요소의 인덱스(위치)를 찾아서 반환하는 메서드
• 얕은 비교로만 진행하기 때문에 객체 값은 찾지 못함

  let arr3 = [1, 2, 3];
  let index = arr3.indexOf(2);
  // 존재하지 않으면 -1 반환, 같은 값이 여러개 있을 경우 제일 앞 요소의 인덱스 반환

4. findIndex

• 모든 요소를 순회하면서, 콜백함수를 만족하는
• 특정 요소의 인덱스(위치)를 반환하는 메서드
• 콜백함수를 이용하여 진행하기 때문에 복잡한 객체 값도 조건식만 잘 만들면 찾을 수 있음

  let arr4 = [1, 2, 3];
  const findedIndex = arr4.findIndex((item) => item === 999);

5. find

• 모든 요소를 순회하면서 콜백함수를 만족하는 요소를 찾는데, 요소를 그대로 반환

  let arr5 = [{ name: "월레스" }, { name: "그로밋" }];
  const finded = arr5.find((item) => item.name === "그로밋");

1. push

• 배열의 맨 뒤에 새로운 요소를 추가하는 메서드

  let arr1 = [1, 2, 3];
  const newLength = arr1.push(4, 5, 6, 7); // 추가된 배열의 총 길이를 알려줌

  2. pop

• 배열의 맨 뒤에 있는 요소를 제거하고, 반환

  let arr2 = [1, 2, 3];
  const poppedItem = arr2.pop();

3. shift

• 배열의 맨 앞에 있는 요소를 제거, 반환

  let arr3 = [1, 2, 3];
  const shiftedItem = arr3.shift();

4. unshift

• 배열의 맨 앞에 새로운 요소를 추가하는 메서드

  let arr4 = [1, 2, 3];
  const newLength2 = arr4.unshift(0); // 추가된 배열의 총 길이를 알려줌

5. slice

• 마치 가위처럼, 배열의 특정 범위를 찾아내서 새로운 배열로 반환

  let arr5 = [1, 2, 3, 4, 5];
  let sliced = arr5.slice(2); 
  // 자르기 시작할 요소 번호, 자르기 끝낼 요소 번호+1(마지막이면 두번째 인수는 생략 가능)
  let sliced2 = arr5.slice(-3);
  // 뒤에서부터 자르는 방법(잘라낼 갯수)

6. concat

• 두개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환

  let arr6 = [1, 2];
  let arr7 = [3, 4];
  let concatedArr = arr6.concat(arr7);

• 배열, 객체에 저장된 여러개의 값에 순서대로 하나씩 접근하는 것을 말함

// ex) 배열 순회
let numbers = [1, 2, 3];

// ex) 객체 순회
let person = {
  name: "갱",
  age: 27,
  hobby: "배드민턴",
};

반복문을 이용한 배열, 객체 순회

for (let value of numbers) {
  console.log(value);
}

for (let key in Object.keys(person)) {
  console.log(key);
}

• 원시타입과 객체타입은 값이 저장되거나 복사되는 과정이 서로 다르기 때문

원시 타입(=불변값)

• Number, String, Boolean 등
• 값 자체로써 변수에 저장되고 복사된다
• 실제 메모리의 값은 변경되지 않음

객체 타입(=가변값)

• Object, Array, Function 등
• 참조값을 통해 변수에 저장되고 복사된다
• 실제 메모리의 값이 변경된다

객체 타입 주의사항

1. 의도치 않게 값이 수정될 수 있다.
2. 객체간의 비교는 기본적으로 참조값을 기준으로 이루어진다.
3. 배열과 함수도 사실 객체이다.

얕은 복사

• 객체의 참조값을 복사
• 원본 객체가 수정될 수 있어 위험

깊은 복사

• 새로운 객체를 생성하면서 프로퍼티만 따로 복사
• 원본 객체가 수정될 일이 없어 안전

얕은 비교

• 참조값을 기준으로 비교

깊은 비교

• 객체를 문자열로 변환하여 비교
• JSON.stringify 등의 내장 함수를 이용해야 함

• 배열이나 객체에 저장된 여러 개의 값들을 분해해서 각각 다른 변수에 할당하는 방법

let arr = [1, 2, 3];

let [one, two, three] = arr;
console.log(one, two, three);
// arr에 3이 없다면 그냥 앞에서부터 1이랑 2만 차례대로 할당
// console에 four를 추가한다고 가정했을 때, arr에는 4가 없으므로 undefined 출력
// 값이 모자랄 때 추가할 수 있게 기본값 설정도 가능(arr에 four = 4를 추가하는 식)

객체 분해 할당 시 다른 명칭으로 부르고 싶다면 해당 객체에 콜론 후 별칭 적기

let person = {
  name: "갱",
  age: 27,
  hobby: "배드민턴",
};

let {
  age: myAge, // 이런 방식으로 별칭 작성하면 됨
  hobby,
  name,
} = person;

let varA = false;
let varB = true;

//AND 연산자
console.log(varA && varB);

//OR 연산자
console.log(varB || varA);

• 논리 연산식에서 첫 번째 피연산자 값 만으로도 연산의 결과를 확정할 수 있다면 두번째 연산에는 접근조차 하지 않음

Truthy & Falsy란?

• 참이나 거짓을 의미하지 않는 값도, 조건문 내에서 참이나 거짓으로 평가하는 특징
• JavaScript의 모든 값은 Truthy 하거나 Falsy 함
  • 이를 이용하면 조건문을 간결하게 만들 수 있음

• 원시 타입이 아닌 객체 타입의 자료형
• 여러가지 값을 동시에 저장할 수 있는 자료형을 의미

  let person = {
  name: "티니핑",
  nickname: "ping",
  age: 5,
  location: "서울",
  };

• 우리말로 "범위"를 뜻함
• 변수나 함수에 접근하거나 호출할 수 있는 범위를 말함

function funcA() {
  let a = 1; // a 접근 가능 영역
} 

console.log(a); // a 접근 불가능 영역

• 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 함

  function main(value) {
  value();
  }
  

function sub() { console.log("sub"); }

main(sub); // console창에 sub 출력 ```

• 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법
• 대표적으로 if, switch 조건문이 존재함

반복문(Loop, Iteration)

• 어떠한 동작을 반복해서 수행할 수 있도록 만들어 주는 문법

  for (초기식; 조건식; 증감식) {
  반복할 무언가
  }

• 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말함
  • 덧셈 연산자 +
    • 곱셈 연산자 *
    • 뺄셈 연산자 -
    • 나눗셈 연산자 /

• 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함

묵시적 형 변환(암묵적 형 변환)

• 개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형 변환 하는 것을 말함

명시적 형 변환

• 개발자가 직접 함수 등을 이용해 형 변환을 일으킴