Frontend 35

[TypeScript] 2-2. 타입스크립트 이해하기 - 추론과 단언

타입 추론타입스크립트는 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론한다.ex. 타입 추론 가능한 경우let a = 10;// number 타입으로 추론ex. 타입 추론 불가능한 경우function func(param){ // 오류}타입 추론이 불가능한 변수(ex 매개변수)에는 암시적으로 any 타입이 추론된다.그러나 엄격한 타입 검사 모드 (tsconfig.json의 strict 옵션을 true로 설정)에서는 이런 암시적 any 타입의 추론을 오류로 판단1. 타입 추론이 가능한 상황들1) 변수 선언let a = 10;// number 타입으로 추론let b = "hello";// string 타입으로 추론let c = { id: 1, name: "이정환", profile: { nic..

Frontend/TypeScript 2025.01.24

[TypeScript] 2-1. 타입스크립트 이해하기 - 타입 관계

타입은 집합이다타입스크립트의 모든 타입들은 집합으로써 서로 포함하고 포함되는 관계를 갖는다.그리고 이런 관계에서 Number 타입처럼 다른 타입을 포함하는 타입을 **슈퍼 타입(부모 타입)**이라고 부릅니다. 반대는 **서브 타입(자식 타입)**이라고 한다.1. 타입 호환성A와 B 두개의 타입이 존재할 때 A 타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것을 의미한다. 만약 A 타입의 값이 B 타입의 값으로 취급 되어도 괜찮다면 호환된다고 하고 안된다면 호환되지 않는다고 함.따라서 타입스크립트에서는 이렇게 슈퍼타입의 값을 서브타입의 값으로 취급하는것을 허용하지 않는다.ex)// 가능let num1: number = 10;let num2: 10 = 10;num1 = num2;// 불가능let num..

Frontend/TypeScript 2025.01.23

[TypeScript] 1. 타입스크립트 기본

기본 타입타이브크립트가 자체적으로 제공하는 타입 1) 원시 타입 (Primitive Type)하나의 값만 저장하는 타입 ex. number, string, boolean, null, undefined number// numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN; string// stringlet str1: string = "hello";let str2: string = 'hello';let str3: string = `hel..

Frontend/TypeScript 2025.01.22

[Next.js] 0. Next.js 개요

Next.js는 라이러리가 아닌 프레임워크 Libraryex. React.js, JQuery주도권을 개발자가 가짐기능 구현을 원하는 방향으로 진행한다.쓰고싶은 도구, 쓰고싶은 기술을 쓴다.자유도가 높음 (기본 기능 외 제공 X) Frameworkex. Next.js, Remix주도권을 프레임워크가 가짐프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서 코드를 작성해야함자유도가 낮음 (거의 모든 기능을 제공)사전 렌더링 이해하기브라우저의 요청에 사전에 렌더링이 완료왼 HTML을 응답하는 렌더링 방식Client Side Rendering의 단점을 효율적으로 해결하는 기술 Client Side Rendering (CSR)React.js 앱의 기본적인 렌더링 방식클라이언트(브라우저)에서 직접 화면을 렌..

Frontend/Next.js 2025.01.21

[TypeScript] 0. 타입스크립트 개요

타입스크립트 = 자바스크립트의 확장판자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 언어// JavaScriptlet a = 1;let b = 2;console.log(a + b);// TypeScriptlet a:number = 1;let b:number = 2;console.log(a + b); JavaScript유연한 문법버그 발생 가능성 높음자유로움 TypeScriptNode.js의 등장 이후 탄생자바스크립트 구동기(런타임)어디서든 자바스크립트 구동 가능 (웹서버, 모바일 앱, 데스크탑 앱)엄격한 문법버그 발생 가능성 낮음안정적임타입 시스템 정적 타입 시스템코드 실행 이전 모든 변수의 타입을 고정적으로 결정함모든 변수에 일일히 타입을 지정해주어야함타이핑 양 증가, 유연하지 ..

Frontend/TypeScript 2025.01.21