과거에는 서버에서 HTML을 완성하고 클라이언트에 넘겨주어, 클라이언트는 받아온 HTML을 그대로 렌더링 하는 SSR 방식으로 웹개발을 하였다. 그러나, JS의 발전과 함께 브라우저 단에서 직접 컴포넌트를 만들어 렌더링을 하고, 서버는 단지 REST API를 통해 브라우저에게 렌더링의 필요한 데이터만 보내주는 형식으로 웹개발 방식이 변화하였다. 즉, SSR 방식에서 CSR 방식으로 점차 변화한 것이다.  좀 더 구체적으로 정리하면 다음과 같다.SSR서버에서 완성된 HTML 파일을 브라우저에게 넘겨준다.과거에는 JSP, PHP 등과 웹서버 소프트웨어인 Apache, Nginx 등을 이용하여 SSR 방식을 이용하였다. 최근에는 웹서버 기능을 하는 Node.js의 Express.js 파이썬의 장고와 같은 프레..

타입스크립트는JS로 변환해주는 컴파일러 언어이기 때문에, tsconfig.json 파일을 통해 컴파일 옵션을 설정한다.흔히, 지금까지 컴파일 옵션을 설정할 때 gpt를 통해 나오는 결과를 아무 생각 없이 사용하였다. 이번 글에서는 각 컴파일 옵션이 어떠한 동작을 뜻하는지 예시를 통해 자세하게 알아보겠다.옵션을 설정했을 때와 하지 않았을 때의 동작 차이를 통해, 각 옵션을 정확히 이해해보자.물론, 컴파일 옵션은 너무나도 많아 전부 확인하는 것은 불가능하기에 자주 사용되는 몇몇 옵션 위주로 알아보겠다.1️⃣ outDir이 옵션은 컴파일 된 결과를 어느 곳에 저장할지 설정하는 옵션이다.예시를 보자// tsconfig.json{ "compilerOptions": { "outDir": "./dist", ..

아마 타입스크립트를 입문할 때, 첫 번째 고비가 제네릭일 것이다.그럴 것이 문법도 무언가 괴상하게 생겼다. 하지만, 제네릭을 완벽하게 이해하지 못하면 타입스크립트를 유연하게 사용하기 어려워진다.이번 글에서는 제네릭의 두려움을 벗어나는 것을 목표로 제네릭을 낱낱이 알아보겠다. 1️⃣ 제네릭의 사전적 의미우선 제네릭이 한국어로 무슨 뜻인지 살펴보자. 우리는 여기서 '포괄적인', '이름이 붙지 않은' 키워드에 초점을 두어야 한다.타입스크립트에서 제네릭 문법은 위의 키워드를 내포하고 있다.실제로, 제네릭 문법을 사용하면 타입을 어느 한 가지로 확정 짓는 것이 아니라, 개발자의 마음대로 유연하게 사용할 수 있게 해준다. 즉, 제네릭 문법은 타입의 이름을 붙이지 않고 다양한 타입에 대해 동작할 수 있는 포괄적인 코..

타입스크립트에서 인터페이스는 흔히, 객체 타입을 정의할 때 사용된다.하지만, 실제로 인터페이스는 단순한 객체 타입의 정의를 넘어 다양한 기능을 제공한다.이번 글에서는 타입스크립트에서 인터페이스의 다양한 기능들을 알아보겠다. 1️⃣ 인터페이스(interface)의 사전적 의미 인터페이스의 사전적 의미는 다음과 같다. 전기 신호의 변환으로 중앙 처리 장치와 그 주변 장치를 서로 잇는 부분.키보드나 디스플레이 등처럼 사람과 컴퓨터를 연결하는 장치출처 : Oxford Languages 위 두 정의에서 '잇는' , '연결' 이라는 키워드가 보인다.두 키워드를 통해 추론한다면, 인터페이스란 일종의 매개체라고 할 수 있다.서로 다른 무언가를 이어주는 매개체가 바로 인터페이스란 것이다. 우리가 흔히, 웹사이트에서 보는..