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

- 제로베이스 TS 강의

• 통일성을 위해 규칙을 가지고 null과 undefined 중 하나만 사용할 수 있도록 하자.
• any Type 지양하기.
  noImplicitAny or strict 옵션 true 권장
• unknown Type은 any처럼 모든 값을 허용하지만, 상대적으로 엄격하다.
  TS에서 unknown으로 추론하는 경우는 없으니 개발자가 직접 명시해야 함.

 

---

 

 Array Type

둘 다 Array Type을 만드는 구문. 특별한 차이가 없으므로 개인의 취향에 따라 작성하면 됨.

const strArr: string[] = ['str', 'str', 'str']
/* .JS
const strArr = ['str', 'str', 'str']; */
/* .D.TS
declare const strArr: string[]; */


const strArr2: Array<string> = ['str', 'str', 'str']
/* .JS
const strArr2 = ['str', 'str', 'str']; */
/* .D.TS
declare const strArr2: Array<string>; */

---

Tuple Type

• 길이 고정 & 인덱스 타입이 고정
• 여러 다른 타입으로 이루어진 배열을 안전하게 관리
• 배열 타입의 길이 조절

const arr: string[] = ['a', 'b', 'c']
/* .JS
const arr = ['a', 'b', 'c']; */
/* .D.TS
const arr = ['a', 'b', 'c']; */


const tuple0: [number, string] = [1, 'a']
/* .JS
const tuple0 = [1, 'a']; */
/* .D.TS
const tuple0 = [1, 'a']; */


const tuple1: (string | number)[] = [1, 'a']
/* .JS
const tuple1 = [1, 'a']; */
/* .D.TS
const tuple1 = [1, 'a']; */


const tuple2: [number, ...string[]] = [0, 'a', 'b']
/* .JS
const tuple2 = [0, 'a', 'b']; */
/* .D.TS
const tuple2 = [0, 'a', 'b']; */

---

Void

• 함수의 반환이 없는 경우를 명시
• 타입 추론에 위임하자
• JS에서는 암시적으로 undefined 반환.
  그러나 TS에서는 void와 undefined는 같은 것이 아님.

function test(): undefined {
    return undefined
}
/* .D.TS
declare function test(): undefined; */


function test2(): void {
}
/* .D.TS
declare function test2(): void; */


function voidFunc() {
}
/* .D.TS
declare function voidFunc(): void; */

---

https://velog.io/@eunbinn/A-Proposal-For-Type-Syntax-in-JavaScript

[번역] 자바스크립트에 타입 구문 도입 제안

---

오전 회고 (만족도: 7)

REACT와 TS가 제일 중요한데 이제까지 다른 것에 정신이 팔려서 집중을 못한 것 같다.
그래서 TS와 REACT를 최우선으로 학습하여 두 개의 목표를 달성한 후, 다른 목표들을 수행하는 것으로 변경했다.

목표 수정 후 오전에 TS를 학습하여, 목표로 했던 챕터 1을 끝냈음. 8월에는 조금 더 타이트하게 학습해보자!

---

- 제로베이스 REACT 강의

SPA와 react-router-dom

SPA(Single-page application)은 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다.

 

전통적인 방식의 웹 애플리케이션의 단점 :
1. 서버의 부담이 크다. 2. 속도가 느려질 수 있다. 3. 페이지 이동 시, 깜박임이 발생한다.

이와 같은 전통적인 방식의 웹 애플리케이션의 단점을 보안하고자 SPA가 나왔음.
url을 이동하더라도 새로운 HTML을 서버에서 받지 말고 화면을 Client에서 그린다 (Client Sids Rendering)

즉, React는 CSR방식으로 동작하고, SPA를 만들 수 있도록 지원하는 라이브러리이다.

---

Routes and Route

위치가 변경될 때마다 <Routes>는 모든 children <Route> 요소를 ​​살펴보고 가장 일치하는 항목을 찾아 UI의 해당 분기를 렌더링 한다. 중첩된 URL 경로에 해당하는 중첩된 UI를 나타내기 위해 중첩될 수 있다. 
상위 경로는 <Outlet>를 사용해서 하위 경로를 렌더링 한다.

---

Outlet

자식 경로 요소를 렌더링 하려면 부모 경로 요소에서 <Outlet>을 사용해야 한다. 이를 통해 하위 경로가 렌더링 될 때 중첩된 UI가 표시된다. 
부모 경로가 정확히 일치하면 자식 경로를 또는 인덱스 경로를 렌더링 하고, 일치하지 않으면 렌더링 하지 않는다.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

https://reactrouter.com/docs/en/v6/components/outlet

React Router | Outlet

---

Url Parameter, useParams

useParams는 <Route path>에 의해 일치된 현재 URL에서 동적 매개변수의 키/값 쌍의 개체를 반환한다.
자식 경로는 부모 경로에서 모든 매개변수를 상속한다.

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

https://reactrouter.com/docs/en/v6/hooks/use-params

React Router | useParams

---

- leetcode 알고리즘 연결 리스트 문제 풀이

Linked List Cycle1, 2

연결 리스트 안에 cycle이 존재하는지 확인하는 방식들.

1. If there is no cycle, the fast pointer will stop at the end of the linked list.
2. If there is a cycle, the fast pointer will eventually meet with the slow pointer.

빠른 포인터를 한 번 이동하고, 느린 포인터를 한 번 이동시키는 것을 반복한다.
각 반복에 대해 빠른 포인터가 한 단계 더 이동합니다. ex) fast는 2 steps 간다면, slow는 1 step
사이클의 길이가 M인 경우, M 반복 후 fast는 한 바퀴를 더 돌아서, slow를 따라잡는다.

let detectCycle = function (head) {
	if (!head) return null;
	if (!head.next) return null;

	let fast = head;
	let slow = head;

	while (fast) {
		if (!fast.next) {
			return false;
		} else {
			fast = fast.next.next;
			slow = slow.next;
		}
		if (fast == slow) return true;
	}

	return false;
};

let detectCycle = function (head) {
	if (!head) return null;
	if (!head.next) return null;

	let fast = head;
	let slow = head;
	let pointer = head;

	while (fast) {
		if (!fast.next) {
			return null;
		} else {
			fast = fast.next.next;
			slow = slow.next;
			if (fast === slow) break;
		}
	}

	if (fast !== slow) return null;

	while (pointer !== slow) {
		pointer = pointer.next;
		slow = slow.next;
	}
	return slow;
};

 

https://leetcode.com/explore/learn/card/linked-list/214/two-pointer-technique/1212/

Explore - LeetCode

https://leetcode.com/explore/learn/card/linked-list/214/two-pointer-technique/1214/

Explore - LeetCode

https://www.youtube.com/watch?v=wDgDAOVqhhA

https://www.youtube.com/watch?v=hZIZorVvn0M

---

오후 회고 (만족도: 7)

스카도 최근 기준 제일 일찍 왔고, 오랜만에 목표도 달성하였지만 앞으로 어떻게 학습해야 할지 생각이 많은 하루여서 집중이 잘 안 됐고, 만족도가 조금 떨어지는 것 같다.
조금 쉬긴 하였지만 대부분 타이머를 맞춰놓고 쉬었고 목표도 달성했기 때문에 7점 정도 주면 될 것 같음.

---

- 쏙쏙 들어오는 함수형 코딩 책

https://dev-minju.tistory.com/296?category=1039940

---

- 유데미 클린 코드 js 강의

타입 다루기

암묵적인 형 변환보다 명시적인 형 변환을 해주자

parseInt('9, 999',10);
// 초기값이 10이 아니기에, 10진수 필요한 상황에는 10을 꼭 써주면 자잘한 오류를 막을 수 있다.

/* 암묵적인 표현들 */
11 + '문자와 결합'
'문자열'
''
11

/* 명시적으로 변환 */
String(11 + '문자와 결합')
String('문자열')
Boolean('')
Number('11')

---

IEEE 754(floating point number specification) 부동 소수점

자바스크립트뿐만 아니라, 많은 프로그래밍 언어들이 2진법 기반의 계산으로 실수들을 계산하기 때문에 정확히 계산되지 않고, 오차가 발생한다.

이러한 오차를 줄이기 위해서, 이진법이 아닌 다른 방식으로 계산하는 방법도 있지만 메모리가 많이 소요되기 때문에
한정된 메모리 공간을 최대한 절약해서 소프트웨어의 수많은 데이터들을 올려두고 연산해야 하는 대부분의 프로그래밍 언어들은 오차가 생긴다는 단점이 있지만, 기본적으로는 부동 소수점 자료형들로 실수들을 표현한다.

오차 없는 정확한 실수 계산이 필요할 땐 기본 자료형의 한계를 소프트웨어적으로 보완해주는 라이브러리들을 사용하면, 필요한 곳에서 정확한 계산들을 할 수 있다. ex) big.js

https://ko.wikipedia.org/wiki/IEEE_754

IEEE 754 - 위키백과, 우리 모두의 백과사전

https://www.youtube.com/watch?v=wPBjd-vb9eI

https://www.youtube.com/watch?v=ZQDsWySjY6g

---

isNaN

isNaN // 느슨한 검사
Number.isNaN // 엄격한 검사

let a = 123
let b = "테스트"

isNaN(a + b) // true
Number.isNaN(a + b) // false

isNaN을 사용할 경우 느슨한 검사로 내가 생각하는 결과와 다를 수 있으므로 Number.isNaN을 사용하자.

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

isNaN() - JavaScript | MDN

---

저녁 회고 (만족도: 8)

저녁 먹기 전과 후에 함수형 코딩 책을 보고 정리한 후, 클린 코드 강의를 들었는데 졸려서 집중이 잘 안 된 부분이 아쉽긴 하지만 그래도 진짜 오랜만에 계획했던 오늘의 목표를 모두 달성해서 만족도는 8점으로 하겠다.
내일은 조금만 더 일찍 오고, 이런 식으로만 학습한다면 그래도 예전보다는 훨씬 진도를 많이 나가고 많이 배울 것 같다.

---