타입스크립트란기존 자바스크립트 문법에 타입을 가미한 것동적 타입인 자바스크립트와 달리 정적으로 빌드 타임에 타입 체크를 수행함즉, 자바스크립트의 슈퍼셋으로서 함수의 반환 타입, 배열, enum 등 기존에는 사용하기 어려웠던 타입 관련 작업들을 손쉽게 처리함리액트에서도 @types/react 라이브러리를 제공해 타입스크립트로 코드를 안정적으로 작성 가능함 타입스크립트 활용법any 대신 unknown 사용하기any 타입은 정말 불가피할 때만 사용해야 하는 타입any를 사용하는 것은 타입스크립트가 제공하는 정적 타이핑의 이점을 모두 버리게 되는 것불가피하게 아직 타입을 단정할 수 없는 경우 unknown을 사용하는 것이 좋음unknown은 모든 값을 할당할 수 있는 top type이지만 type narrow..
typescript
사용법 기본적인 사용법은 먼저 Zod에서 z를 불러와 z.object()를 통해 객체인 스키마를 정의한다! export const loginSchema = z.object({ email: z .string() .min(1, '이메일을 입력해주세요.') .regex( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, '이메일 형식을 확인해주세요.', ), password: z.string().min(1, { message: '비밀번호를 입력해주세요.' }), }); z.string()으로 여러 validation을 추가할 수 있다! 잘 설명되어있는 아래 링크를 참고해 볼 수 있겠다! https://velog.io/@tmdgp0212/Zod String 형 말고도 num..
서론.. 프로젝트를 진행하면서 zodSchema 라는 파일을 마주보게되었다 파일 안에 들어있는 함수들을 쭉 둘러보니 유효성 검사를 진행하는 함수임을 알 수 있었다 여기서 Zod 라는 것을 또 새롭게 알게되고 알게된 내용을 정리하고자 한다.. Zod란? Zod는 TypeScript 용으로 만들어진 스키마 검증 및 파싱 라이브러리이다. 공식문서는 아래와 같다.. https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference TypeScript-first schema validation with static type inference - GitHub - colinhacks/zod: Typ..
안녕하세요 오늘은 React + TypeScript 환경에서 Kakao Map API 연동하는 방법에 대해서 설명해드리겠습니다. 1. Kakao Map API Key 발급하기 아래 사이트에서 애플리케이션 추가하기 버튼을 클릭해 추가한 뒤 API key를 발급받습니다 https://apis.map.kakao.com/web/ 그럼 다음과 같이 발급받은 앱 키 중에 Javascript 키를 선택합니다. 2. .env 파일에 키 추가하기 REACT_APP_KAKAO_API_KEY = 발급받은 키 이런식으로 .env 파일에 발급받은 키를 넣어줍니다. 3. 지도를 담을 파일 생성하기 저는 KakaoMap.tsx 파일을 추가해주었습니다. import React, { useEffect } from 'react' imp..
compilerOptions : 컴파일러 옵션 지정 target : 컴파일될 ES(JS) 버전 명시 - “ES2015” 권장 module : 모듈 시스템 지정 - “CommonJS”, “AMD”, “ESNext” moduleResolution : 모듈 해석 방식 지정 - “Node”, “Classic” esModuleInterop : ESM 모듈 방식 호환성 활성화 여부 isolatedModules : 모든 파일을 모듈로 컴파일, import 혹은 export 필수 baseUrl : 모듈 해석에 사용할 기준 경로 지정 typeRoots : 컴파일러가 참조할 타입 선언(d.ts)의 경로 지정 lib : 컴파일에서 사용할 라이브러리 지정 - “ESNext”, “DOM” strict : 더 엄격한 타입 검색 ..
제네릭(Generic) 재사용성을 높이기 위해 사용 함수 function toArray (a:T, b:T) { return [a,b] } toArray('Neo','Tom') toArray(1, 2) 클래스 class User { constructor(public payload : P) {} getPayload() { return this.payload } } interface UserA { name:string age:number isValid:boolean } const IU = new User ({ name : 'IU', age : 23, isValid : true }) 인터페이스 interface MyData { name : string value : T } const dataA : MyData ..
접근 제어자(Acess Modifier) public : default, 어디서나 자유롭게 접근 가능 protected : 나와 파생된 후손 클래스 내에서 접근 가능 private : 클래스 내에서만 접근 가능 class userA { constructor(public first : string, protected last : string,private age : number) { this.first = first this.last = last this.age = age } } class UserB extends UserA() { getAge() { return `${this.first} ${this.last} is ${this.age}` //first, last 사용 가능 but age는 접근 불간ㅇ ..
인터페이스 선택적 속성 ? 읽기 전용 속성 readonly interface User { name : string readonly age : number: string isValid?: boolean } const IU : User { name : 'IU', age : 12, //isValid 속성은 선택적이므로 오류가 뜨지 않음 } IU.age = 22 // readonly로 작성되었기 때문에 오류발생 호출 시그니처(Call Signature) 함수의 타입 지정 interface GetName { //호출 시그니처 (message : string) : string } interface User { name : string age : number getName : GetName // getName : (..
