[학습 블로깅] Javascript & Typescript

들어가기 전에 ...

• Vite 사용

npm create vite@latest .

• 번들러
  • HTML, CSS, JS로 웹 개발
  • TS, SCSS 등등 웹 표준 X
    • 웹에 동작하게 사용하려면 변환 필요
      ⇒ Webpack 사용(압축 + 변환(컴파일))
• Webpack
  • Webpack은 번들러
  • 단점
    • 무언가를 고치면 번들러가 수정 내용을 다시 빌드(압축 + 변환)하여 결과를 다시 만듦
    • 프로젝트 규모가 커져서 용량이 늘어나면 시간이 많이 듦
    → 서비스 개발해서 배포하는 과정은 번들러를 쓰지만 최소한 테스트하는 로컬 서버는 최대 10초 안에 실행 되도록 
       ⇒ Vite

• Vite(비트)
  • 번들 최소화
  • 특정 부분을 수정해도 전체를 압축하지 않고 수정 부분만 압축
  • 1 대 1 매칭
  • CSR은 Vite 사용하는 것이 Best !
  • SSR은 X
    • Next.js 에서는 사용하기 어려움
      • Webpack 말고 다른 번들러 지원하지 않음
• SWC
  • Rust(저급언어) 기반
  • 메모리 제어 가능

• 브라우저에서 모듈 방식 사용 가능

<!-- index.html -->

<script type="module" src="/src/main.ts"></script>

• React는 라이브러리라 런타임 O
  • 현재 v19, v20에서 React를 컴파일러 형태로 제공하려고 함
• Vue는 런타임, 컴파일러 O
• Svelte는 런타임 X, 컴파일러 O

---

Javascript

this 키워드

• 일반 함수
  • 함수 호출 위치에서 this 정의
• 화살표 함수
  • 함수 선언 위치에서 this 정의
• ex 1)

<div>
	<button>hello</button>
<div>

const btnEl = document.querySelector('button');
btnEl.addEventListener('click', function () {
	setTimeout(function () {
		console.log(this) // 윈도우 객체 출력
	}, 2000)
})

const btnEl = document.querySelector('button');
btnEl.addEventListener('click', function () {
	setTimeout(() => {
		console.log(this) // 2초 뒤에 버튼 요소가 출력
	}, 2000)
})

• ex 2)

Array.prototype.helloWorld = function() {
	return this.slice(0, 1); // this는 ['A', 'B', 'C', 'D'] 배열
}

console.log(['A', 'B', 'C', 'D'].helloWorld()); // helloWorld 호출 -> this 정의

closure

• 버튼이 3개인 경우 isRed1과 같이 외부 변수를 일일이 설정해야 하는 번거로움

const btn1El = document.querySelector('.btn1');
let isRed1 = false;

btn1El.addEventListener('click', function () {
	isRed1 = !isRed1;
	this.style.backgroudColor = isRed1 ? 'green' : 'red';
})

const btn2El = document.querySelector('.btn2');
let isRed2 = false;

btn2El.addEventListener('click', function () {
	isRed2 = !isRed3;
	this.style.backgroudColor = isRed2 ? 'green' : 'red';
})

const btn3El = document.querySelector('.btn3');
// ...

• closure 사용

const btn1El = document.querySelector('.btn1');
const btn2El = document.querySelector('.btn2');
const btn3El = document.querySelector('.btn2');

function clickHandler() {
	let isRed = flase; // <----
	return function () {
		isRed = !isRed; // 함수 반환 시 isRed 때문에 내부 데이터가 없어지지 않고 isRed 변수의 유효범위 상태를 메모리에 저장 => closure 생성
		this.style.backgroudColor = isRed ? 'green' : 'red';
	}
}

// 호출될 때마다 closure 생성
btn1El.addEventListener('click', clickHanlder());
btn2El.addEventListener('click', clickHanlder());
btn3El.addEventListener('click', clickHanlder());

• 단점
  • 불필요하게 값이 남아있으면 성능 저하

function useCount() {
	let count= 0; // <----
	return function () {
		console.log(count); <----
		this.innerHTML = `Hello`;
	}
}

btn1El.addEventListener('click', useCount());

---

Typescript

참고하면 좋은 사이트: 한눈에 보는 타입스크립트

 

type vs interface

interface User {
	name: string
	age: number
}

type TUser {
	name: string
	age: number
}

interface IValidation {
	isValid: boolean
}

type InersectionType = Iuser & IValidation
interface IntersectionType extends IUser, IValidation {}

const i:IntersectionType = {
	name: 'John'
}

interface

• 객체 타입 지정할 때 주로 사용

type

• 모두 되기 때문에 객체 타입 지정 외의 조합하는 타입에 주로 사용

infer

• 추론 가능한 경우

type ReturnType<T extends (...args: any) => any> 
	= T extends (...args: any) => infer R ? R : any // R 추론이 가능하므로 R은 string

function fn(num: number) {
  return num.toString()
}

// (num: number) => string
const a: ReturnType<typeof fn> = 'Hello'

• 추론 불가능한 경우

type ReturnType<T> 
	= T extends (...args: any) => infer R ? R : any // number과 () => R 형태는 R 추론 불가능

function fn(num: number) {
  return num.toString()
}

// (num: number) => string
const a: ReturnType<number> = 'Hello'

interface User {
	name: string
	age: number
}

// 안전하지 않은 객체 타입 '단언'
const userA = {
} as User
// 안전한 객체 타입 '선언'
const userB: User = {
}
// 안전한 객체 타입 '만족'
const userC = {
	
} satisfies User

// 안전하지 않은 내부 객체 타입 '단언'
const userD = {
	info: {
		name: 'Neo',
		age: 85
	} as User
	photo: null
}
// 문법적으로 불가한 내부 객체 타입 '선언'
const userE = {
	info: {
		name: 'Neo',
		age: 85
	} as User,
	photo: null
}
// Error, 안전한 내부 객체 타입 '만족'
const userF = {
	info: { // 내부 객체 타입은 일반 객체
		name: 'Neo',
		age: 85
	} satisfies User,
	photo: null
}
// 내부 객체 타입이 특정 타입을 만족하는지 확인하면서 특정 타입으로 설정
const userG = {
	info: {
		name: 'Neo',
		age: 85
	} satisfies User as User, 
	photo: null
}