본문 바로가기

TIL53

156. [TypeScript] enum 타입 TIL 23.05.23 enum 타입 자바스크립트에는 없고 타입스크립트에만 있는 타입 enum은 특정 값들의 집합을 의미하는 자료형 숫자형 enum 숫자형 enum은 각 멤버에 대해 숫자 값을 할당할 수 있는 열거형이다. enum Direction { Up = 1, Down, //2 Left, //3 Right, //4 } 위 코드에서 Up 멤버에 값으로 1이 할당되고, 이후 멤버에는 값을 지정하지 않았기 때문에 1씩 증가하는 값들이 할당된다. const direction: Direction = Direction.Up; console.log(direction) //1 const downdirection: Direction = Direction.Down; console.log(downdirection) //2 숫자형 enum을 .. 2023. 5. 23.
155. [TypeScript] TS + React 이벤트 타입 지정 TIL 23.05.18 tsx 'event' 오류 TS todolist input 핸들러를 만들던 중 기존 jsx에서 작성했던 것처럼 아래와 같이 작성하였다. 하지만 아래와 같은 오류가 발생했다. 오류('event' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다) 그래서 왜 오류가 발생했는지 찾아봤다. 오류가 발생한 이유는 event에도 타입을 지정을 해주지 않아서 오류가 발생했다. 해결 event 변수에 타입을 지정해서 알려주면 된다. 리액트에서는 React.ChangeEvent와 React.FormEvent 등 이벤트 관련 타입을 지원한다. event: any를 사용해도 되지만 any를 사용하는 건 js사용하는 것과 똑같다. 난 React.ChangeEvent를 사용했다. 2023. 5. 18.
154. [TypeScript] 함수타입 TIL 23.05.15 JS 👉 TS 함수 변환 JS로 작성된 함수 function add(n1, n2){ return n1 + n2; } TS로 변환 function add(n1: number, n2: number): number { return n1 + n2; } //화살표함수 const add = (n1: number, n2: number) => { return n1 + n2; } const a = add(1, 2) const b = add('1', 2) //오류 string을 number 형식에 할당할 수 없기 때문 const c = add(1, 2, 3) //오류 2개의 인수가 필요한데 3개를 가져옴 const d = add(10) //오류 2개의 인수가 필요한데 1개를 가져옴 반환 값이 없는 함수 function p.. 2023. 5. 15.
153. [TypeScript] 기본타입 TIL.23.05.10 기본 타입의 종류 String, Number, Boolean, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never String TS에서는 텍스트 데이터 타입을 string으로 표현. JS처럼 TS도 큰따옴표 (""), 작은따옴표('')를 문자열 데이터를 감싸는 데 사용한다. let str: string = '타입스크립트'; // : 2023. 5. 10.
152. [TypeScript] TS 설치하기 TIL 23.05.09 TypeScript 설치하기 1. npm init -y //package.json { "name": "2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 2. npm install typescript 3. npx tsc --init Created a new tsconfig.json with: TS target: es2016 module: commonjs ...생략... target : 어떤 JS버전으로 변환할 것인지 설정 module .. 2023. 5. 9.
151. [TypeScript] TypeScript란? TIL 23.05.08 TypeScript란? 타입스크립트는 자바스크립트에 타입을 부여한 언어. Microsoft에 의해서 개발 및 관리되고 있는 오픈소스 프로그래밍 언어로 대규모 애플리케이션을 개발하는데 JS가 어렵고 불편하다는 불만에 대응하기 위해서 개발되었다. SuperSet : JS의 모든 기능을 포함하고 있다. 👉 슈퍼셋(SuperSet)이란 슈퍼셋은 상위 집합을 의미. 모든 자바스크립트 프로그램은 이미 타입스크립트 프로그램이며, 반대로 타입 스크립트는 별도의 문법을 가지고 있기 때문에 유효한 자바스크립트 프로그램이 아니다. 👉 타입이란? 기본형 타입(단일타입)으로는 7가지(string, number, boolean, null, undefined. symbol, bigint)와 유니온 타입(다중 타입, =교집합)과 인.. 2023. 5. 8.
150. [JS] JavaScript 실행컨텍스트(Execution Context) TIL 23.04.25 실행컨텍스트(Execution Context) 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 실행 컨텍스트는 실행가능한 코드가 실행되기 위해 필요한 환경 실행가능한 코드 3가지 - 전역 코드 : 전역 영역에 존재하는 코드 - Eval 코드 : eval()로 실행되는 코드 - 함수 코드 : 함수 내에 존재하는 코드 자바스크립트 엔진은 코드를.. 2023. 4. 25.
149. [CS] SSR, CSR, SSG 장단점 TIL 23.04.1 SSR(Server Side Rendering) 👉 장점 : - 초기 렌더링 시 서버에서 완전한 HTML페이지를 클라이언트에게 전달하므로 검색 엔진 최적화(SEO)가 용이하다. - 서버에서 데이터를 가져오고 렌더링 하여 클라이언트에게 전달하므로 초기 로딩 속도가 빠르다. 👉 단점 : - 서버 부하가 높아질 수 있다. - 페이지 전환이 발생할 때마다 서버로부터 새로운 HTML을 가져와야 하므로 네트워크 부하가 발생할 수 있다. - 상호작용이 많은 애플리케이션의 경우 클라이언트와 서버 간의 라운드트립 시간(패킷의 왕복 시간)이 길어질 수 있다. 대표사이트 : 다음 https://www.daum.net CSR(Client Side Rendering) 👉 장점 : - 클라이언트 측에서 렌더링되므로 서버 부하가 .. 2023. 4. 14.
728x90

티스토리툴바