24 Jun 2021
|
퍼온자료
[펌] require와 import의 차이
요약 :
- require는 CommonJS에서 지원하는 모듈 개념, import, export는 ES6에서 지원하는 모듈 의존성 방식
- require는 NodeJS의 표준으로 서버쪽에서 많이 쓰인다
- import는 ES6 문법이라 호환성을 위해 babel이 필요
참고 자료
[javascript] require vs import (CommonJs와 ES6)
JavaScript- require vs import (CommonJs와 ES6) 차이점
24 Jun 2021
|
퍼온자료
[펌] CSR과 SSR의 차이
요약 :
- 렌더링이란 웹 페이지 접속 시 그 페이지를 화면에 그려주는 것
- SSR(Server Side Rendering)이란 요청시마다 새로고침이 일어나며 서버에 새로운 페이지를 요청하는 방식
- 서버는 단지 JSON만 보내주며, html을 그리는 역할을 클라이언트측의 자바스크립트가 수행하는 것이 CSR(Client Side Rendering)
- SPA(Single Page Application)은 최초 한 번 페이지 전체를 로딩하여 바뀐 데이터만 변경하여 사용하는 웹 어플리케이션으로 요청시마다 서버로부터 리소스를 받아 해석하고 화면에 렌더링하여 SSR에 비해 성능이 뛰어나다.
- SSR은 View를 서버에서 렌더링하여 가져오기에 첫 로딩이 짧다.
- CSR은 HTML, JS 번들, 각종 리소스를 다운받은 후 브라우저에서 렌더링하기 때문에 초기 로딩 속도가 길다.
- 초기 로딩 이후에는 사용자의 행동에 따라 필요한 부분만 바꾸기 때문에 서버에서 렌더링하여 전체 페이지를 읽어들이는 SSR에 비해 빠른 인터렉션이 가능하다.
- CSR은 자바스크립트를 실행해 View를 렌더링하기 때문에 웹 크롤러 봇들이 CSR 페이지를 빈 페이지로 인식하여 SEO(검색엔진최적화)의 문제가 존재한다.
- SSR은 서버측의 세션에 사용자에 대한 정보를 관리하였으나 CSR은 쿠키에 관리하기 때문에 보안 문제가 있다.
참고 자료
클라이언트 사이드 렌더링 & 서버 사이드 렌더링
서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)
22 Jun 2021
|
Typescript
Typescript Day 09 - 제네릭
제네릭 타입
제네릭 타입은 인터페이스나 클래스, 함수, 타입 별칭 등에 사용할 수 있는 기능으로, 타입을 미리 지정하지 않고 다양한 타입에 대응하려 할 때 사용한다.
제네릭은 타입변수라고도 부른다. 타입 자체를 파라미터처럼 받아서 사용이 가능하다.
제네릭은 일반적으로 대문자로 적는것이 관례이다.
// 제네릭 인터페이스
interface IValue<T> {
value: T
}
// 제네릭 함수
function sum<T>(arg: T): T {
return arg
}
// 제네릭 타입 별칭
type IValue<T> = {
value: T
}
// 제네릭 클래스
class Value<T> {
constructor(public value: T){}
}
// 제네릭 사용 예시
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>('hello world'); // hello world
let output = identity('hello world'); // 타입 추론도 가능하다
제네릭 타입 제약
제네릭 타입 제약은 타입 변수에 적용할 수 있는 타입의 범위를 한정하는 기능을 한다.
<최종타입 extends 타입1>(a: 최종타입){}
interface IValuable {
length: number
}
const printValue = <T extends IValueable>(arg: T) => console.log(arg.length);
printValue(3); // Error: number는 length 프로퍼티가 없다
printValue({length: 10}); // 10
인덱스 타입 제약
타입 매개변수로 다른 타입 매개변수를 제한할 수 있다.
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a"); // 1
getProperty(x, "z"); // Error: 'z'가 해당되는 인수가 없다
참고 자료
Do it 타입스크립트 프로그래밍
Typescript-Handbook
22 Jun 2021
|
퍼온자료
[펌] Task와 Microtask의 동작방식
요약 :
- 이벤트 루프는 자바스크립트 엔진이 아닌 구동환경(브라우저, 노드)이 가지고 있는 장치이다. 이벤트 루프는 콜 스택과 태스크 큐를 감시하며 콜 스택이 비어있으면 태스크 큐의 태스크를 콜 스택에 넣어 실행시킨다.
- setTimeout, setInterval => 태스크 큐
- Promise => 마이크로태스크 큐
- 두 개의 큐 중 마이크로태스크 큐가 먼저 실행된다.
참고 자료
[JS] Task와 Microtask의 동작방식
자바스크립트와 이벤트 루프
Archive