[TDL] 08/03 Today's-Done-List

- 제로베이스 TS 강의

접근제어자

• 속성과 메서드에 접근을 제한할 수 있다.
• 클래스 내부 구현 정보를 적당히 공개하여 일부분만 노출시킨다
  • API와 비슷한 흉내를 낼 수 있다.
  • 타입 시스템을 이용해 규칙을 강제할 수 있다.

제어자	설명
public	어디서나 접근 가능 (기본값)
protected	해당 클래스와 서브클래스에서만 접근 가능
private	해당 클래스의 인스턴스에서만 접근 가능

---

Static

• 클래스의 속성과 메서드를 new로 인스턴스화 하지 않고 호출할 수 있다.
• 접근 제어자를 활용할 수 있다.
• 몇 가지 정적 이름을 사용할 수 없다.
  • 클래스는 그 자체로 new를 호출할 수 있는 함수이기 때문

---

추상 클래스

• abstract를 선언한 클래스로 직접 인스턴스화 될 수 없는 클래스이다.
• 직접 인스턴스화 될 수 없지만 extends 후 파생된 클래스를 인스턴스화 하도록 유도한다.

직접 인스턴스화 될 수 없다.

파생된 클래스는 인스턴스화 될 수 있다.

• 추상 클래스는 구현된 메서드를 포함시킬 수 있다.
• abstract 선언한 메서드는 파생된 클래스에서 메서드를 구현해야 한다.

선언한 메서드 구현할 수 있음.

• 추상 클래스는 일종의 설계의 목적을 명확하게 가지는 클래스라고 생각할 수 있음.
  (그렇기에 직접 인스턴스화 될 수 없음)
• 객체지향을 활용해서 인터페이스를 설계하는 클래스를 만들고 싶을 때, abstract + extends를 사용.

---

Parameter Properties

타입 스크립트에서는 필드를 생성하고 -> 생성자 매개변수를 또 비슷하게 한번 만들어야 한다.

이러한 번거로움을 줄이기 위해서 만들어진 Parameter Properties

하지만, 이렇게만 해준다면은 JS로 컴파일했을 때 생성자 코드 부분이 겹치게 된다.

아래와 같이 수정해준다면 가독성은 조금 떨어질 수 있지만 코드라인도 줄고 간편하게 코딩할 수 있다는 장점이 있다.

---

Method OverWriting

• 생성한 클래스를 확장하고, 또 확장하더라도 메서드는 필요에 의해서 오버 라이딩할 수 있다.
• 오버 라이딩은 서브클래스에서 할 수 있고, 부모(기본 클래스)의 메서드는 그대로 유지된다.
• 따라서, 클래스로 어느 정도 계층을 나누고, 이 계층 별로 메서드를 새로 만들 수 있는 작업을 할 수 있다.

---

- 제로베이스 REACT 강의

비동기 프로그래밍과 API 호출

---

오후 회고 (만족도: 6)

오늘 아주 늦잠+꿀잠 잤다....! 최근에 두통이 심했는데, 그래도 많이 사라져서 후회는 없다...!
그래도 오후에 ts 공부할 땐 집중을 어느 정도 했지만, 생각보다 오래 걸려서 react는 많이는 못 했음.
저녁 먹고 나서 마저 공부하고, 코테를 볼 예정이다.

---

- 제로베이스 REACT 강의

비동기 프로그래밍과 API 호출

화살표 함수를 hello에 할당해서 콘솔에 입력해보면 "Hello"가 잘 반환된다.

여기서 async를 추가한다면 어떻게 될까?

Promise를 반환하는 것을 볼 수 있다.
async 기능의 특징 중 하나이다. async를 사용하면 반환받는 값은 Promise가 된다.

fulfil Promise의 반환된 값을 사용하기 위해서는. then()을 적용하면 된다.

더 짧게 표현하는 방법.

---

정리하면, async를 함수와 같이 사용하면 결과를 직접 반환하는 게 아니라 Promise를 반환하게 한다.
함수가 async라고 선언될 때 필요한 핸들링만 추가하면 JS엔진이 우리가 만든 프로그램을 최적화할 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function - JavaScript | MDN

---

비동기 함수를 await 키워드와 함께 쓰면 그 장점이 확실히 보인다. await키워드는 Promise기반 함수 앞에 놓을 수 있다.
그리고 작성한 코드의 Promise가 fulfil 될 때까지 잠시 중단하고, 결과를 반환한다.
그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 한다.

await 키워드는 웹 API를 포함해서 Promise를 반환하는 함수를 호출할 때 사용할 수 있다.

fetch("coffee.jpg")
	.then((response) => response.blob())
	.then((myBlob) => {
		let objectURL = URL.createObjectURL(myBlob);
		let image = document.createElement("img");
		image.src = objectURL;
		document.body.appendChile(image);
	})
	.catch((e) => {
		console.log(
			"There has been a problem with your fetch operation : " + e.message,
		);
	});

해당 코드를 async/await을 사용하여 더 간단하게 만들어보자.

async function myFetch() {
	let response = await fetch("coffee.jpg");
	let myBlob = await response.blob();

	let objectURL = URL.createObjectURL(myBlob);
	let image = document.createElement("img");
	image.src = objectURL;
	document.body.appendChile(image);
}

myFetch().catch((e) => {
	console.log(
		"There has been a problem with your fetch operation : " + e.message,
	);
});

---

보통의 api call을 하는 함수이다.
내부에서 async를 붙인 함수 내부에서 받아온 api를 처리한다면 promise를 받아오지 않고 데이터를 가져올 수 있다.

import { useEffect, useState } from "react";

const [docs, setDocs] = useState([]);

useEffect(() => {
	async function fetch() {
		const res = await fetch("API");
		const result = await res.json();
		setDocs(result);
	}
	fetch();
});

 

하지만 return을 해야 되는 경우가 발생하여, async를 호출하는 함수에서 데이터를 불러와야 할 경우에는 다르다.
async를 호출하는 함수는 value값을 바로 반환하지 않고, promise를 반환하기 때문에
아래와 같이 .then을 추가해서 데이터를 가져와야 한다.

import { useEffect, useState } from "react";

const [docs, setDocs] = useState([]);

useEffect(() => {
	async function fetch() {
		const res = await fetch("API");
		const result = await res.json();
		return result;
	}

	fetch().then((res) => {
		setDocs(res);
	});
});

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Promise.all() - JavaScript | MDN

 

---

AXIOS

Axios는 브라우저를 위한 약속 기반 HTTP 클라이언트입니다. 
node.js 동형입니다 (= 동일한 코드 베이스로 브라우저와 nodejs에서 실행할 수 있음).
서버 측에서는 기본 node.js http모듈을 사용하고 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

• axios의 장점 (fetch 대비)
  • 내장 메서드인 fetch함수를 사용할 땐 json 데이터를 우리가 수동으로 변환해주어야 했는데, axios를 사용할 경우에는 JSON 데이터를 자동으로 변환해주기 때문에, fetch함수보다 코드 작성이 수월하다.
  • 모든 웹 브라우저를 지원해준다. ( ie 포함)

이러한 장점 때문에 최근에는 fetch 보다 axios를 쓰는 추세.

/* yarn */
yarn add axios

/* npm */
npm install axios

---

위에서 fetch함수에 사용했던 코드를 axios로 바꿔보자.

import { useEffect, useState } from "react";
import axios from "axios";

const [docs, setDocs] = useState([]);

useEffect(() => {
	async function fetch() {
		const result = await axios.get("API");

		return result.data;
	}
	fetch().then((res) => {
		setDocs(res);
	});
}, []);

axios도 Promise 기반이고 async를 붙인 함수니깐 Promise를 반환하기때문에 .then을 추가해서 데이터를 가져와야 한다.

https://axios-http.com/docs/req_config

Request Config | Axios Docs

---

- 제로베이스 코딩테스트

---

저녁 회고 (만족도: 6)

집에 오니까 역시 집중이 안된다~ 밥 먹고 계속 쉬느라고 리액트도 목표한 것 다 못하고, 코테도 1시간만 보고... 잘 예정.
내일 일찍 일어나서 내일의 내가 해주겠지!

---

[ 출처 및 참고 : 제로베이스 TypeScript,
제로베이스 React 이론 ]