TS (5) 썸네일형 리스트형 <FE> Next.js 13 으로 알아보는 FE 렌더링 방식 (SSR vs RSC) 1. 소개 FE 개발자라면 CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)이라는 용어는 매우 익숙할 것이다. 이번 포스팅에서는 이와 같은 렌더링 방식에 대해 다룰 예정이다. 최근에 Server Components가 Next.js 13의 출시와 함께 등장하면서 렌더링 방식이 획기적으로 변했기 때문에 지금까지의 렌더링 방식의 변화과정과 RSC(React Server Components)와 SSR을 Next.js를 통해 비교해볼 것이다. 결론부터 확인하고싶다면 "3.비교" 부분부터 봐도 좋다. * 렌더링 방식의 변화 비교적 최근 FE에서 자주 볼 수 있는 렌더링 방식의 변화과정이다. 리액트와 같은 도구의 등장으로 CSR(Client-Side Rendering).. <Review> 이펙티브 타입스크립트 1. 소개 - 제목 : 이펙티브 타입스크립트 - 저자 : 댄 밴더캄 / 장원호 역 - 출판사 : 인사이트 - 페이지 : 344p - 목차 1장 타입스크립트 알아보기 2장 타입스크립트의 타입 시스템 3장 타입 추론 4장 타입 설계 5장 any 다루기 6장 타입 선언과 @types 7장 코드를 작성하고 실행하기 8장 타입스크립트로 마이그레이션하기 2. 리뷰 * 내용 크게 8장으로 구성되어 있고, 각 장마다 5~10개의 소단원(아이템)이 엮여있다. 총 62개의 아이템으로 이루어져있으며 타입스크립트를 효과적으로 사용하는 방법을 기술하고 있다. 처음에는 가볍게 타입스크립트에 기본적인 부분을 소개하지만 뒤로 갈수록 깊은 내용을 다룬다. 각 아이템마다 개념과 기술을 설명하고 예제를 상세하게 보여준다. 자연스럽게 타입.. <TS> 타입가드 * 소개 - 타입가드는 타입스크립트 컴파일러가 더 명확하게 타입을 예측할 수 있도록 코드를 작성하는 방법 중 하나이다. 공식문서를 찾아보니 Narrowing(좁히기)와 동의어로 쓰이는 것 같아서 정리해보려한다. - 이번 포스팅에서 다루는 타입가드의 종류는 7가지 이다. * typeof Type Guards * Truthiness Narrowing * Equality Narrowing * The in operator Narrowing * instanceof Narrowing * Using type predicates * Discriminated Unions * typeof Type Guards - 가장 기본적으로 알고 있는 타입가드방식이다. data는 number 또는 string을 받을 수 있으나 typ.. <TS> 효과적으로 타입 명시하기 1. 소개 필자가 타입스크립트를 사용하던 초반엔 선언하는 모든 곳에 당연히 타입을 명시해야 한다고 생각했다. 하지만 타입스크립트를 계속 쓰다보니 자연스럽게 타입추론이 생각보다 잘 일어난다는 것을 깨달았고, 단순한 선언 구문에서는 사용하지 않았다. 타입 스크립트의 많은 타입 구문은 사실 불필요합니다. 이펙티브 타입스크립트 p.108 그럼에도 불구하고 타입을 언제 명시하는 것이 좋을지에 대해서는 크게 생각해본 적이 없었다. 그러나 최근 이펙티브 타입스크립트를 읽으며 타입추론에 대해 좀 더 자세하게 접하게 되었고, 그 중 어떤 상황에서 타입명시를 쓰면 좋을지에 대해 읽고 정리해보았다. 타입이 추론될 수 있음에도 여전히 타입을 명시하고 싶은 몇 가지 상황이 있습니다. 이펙티브 타입스크립트 p.112 2. 사용 .. <TS> 유틸리티 타입으로 반복 줄이기 1. 반복 줄이기 - 타입스크립트를 사용하다보면 실제 런타임에 동작하지 않는 코드(타입 관련 코드)임에도 반복되는 작업들을 하는 경우가 생긴다. - 실제 런타임에 동작하는 코드에서는 다양한 방식으로 반복을 줄이기 위해 노력한다. 하지만 우리는 타입스크립트의 타입과 관련된 부분에서는 크게 신경쓰지 않거나 어떻게하면 좋을지 모르곤 한다. 이를 해결하기 위해 타입스크립트에서 어떻게 이러한 부분을 해결할 수 있을지 알아보자. * 확장 - 인터페이스의 확장은 반복을 제거하는 방법 중 하나이다. interface Person { firstName: string; lastName: string; } interface PersonWithBirthDate extends Person { birth: Date; } - 타입.. 이전 1 다음
