Will find a way

들어가기 전필자가 프론트엔드 프로젝트를 하면서 겪었던 사소한 문제가 있었다. 프론트에서는 카멜 케이스를 사용하는데 백엔드는 스네이크 케이스를 사용하기 때문에 데이터를 주고 받으면서 생기는 문제이다. 내가 받은 데이터의 key를 다시 스네이크로 변환하여 백엔드한테 요청을 보내야할 때가 생긴다. 이 문제를 해결하는 방법을 간단하게 알아보자.camelCase -> snake_case 변환// camelCase -> snake_case 문자열// ex: userName -> user_namefunction camelToSnake(str: string): string { return str.replace(/([A-Z])/g, '_$').toLowerCase(); // 대문자 앞에 언더스코어 추가하고, 전체를 ..

들어가기 전타입스크립트를 사용하다보면 객체 일부만 수정하거나, 특정 필드를 제외한 타입을 필요로 할 때가 있다. 필자도 타입스크립트를 이런 상황을 마주하곤 했다. 그럴 때 Partial과 Omit이 매우 유용하게 쓰였다. 오늘은 Partial과 Omit에 대해서 간단히 알아보자. Utility Type (유틸리티 타입)먼저 Partial과 Omit을 알기 전에 유틸리티 타입에 대해 간단하게 설명하겠다.Utility type(유틸리티타입)은 TypeScript에서 기본 타입을 변헝하거나 조합해서 새 타입을 만들 수 있게 도와주는 타입이다. PartialPartial은 T 타입의 모든 속성을 선택적으로 만든다.type User = { id: number; name: string; email: strin..

제네릭이란?제네릭은 타입을 매개변수화하는 기능.함수나 클래스를 정의 할 때 궤적인 타입 대신 타입변수를 사용하여실제 사용할 때 타입을 결정할 수 있게 해줌 사용 목적1. 코드 재사용성동일한 로직을 여러 타입에서 사용할 수 있음 2. 타입 안정성any를 사용하지 않고도 유연한타입 처리가 가능 3. 가독성과 유지보수성코드 중복을 줄이고 의도를 명확히 표현이 가능 제네릭 사용 전 / 후// 제네릭 사용 전function getFirstString(arr: string[]): string { return arr[0];}function getFirstNumber(arr: number[]): number { return arr[0]}// 제네릭 사용 후function getFirst(arr: T[]): T { ..

들어가기 전TypeScript는 코드를 미리 검증해서 오류를 줄이고, 개발을 더 빠르고 안정적으로 만드는 도구다.가장 좋은 장점 중 하나는 명확한 타입 정의로 큰 프로젝트 유지보수가 가능하다는 점이다.타입을 정의함으로써 데이터 유효성 검증을 할 수 있게된다. 그리고 클라이언트와 서버간의 통신 사용자가 입력한 데이터API응답 데이터를 검증하는데 이 작업은 필요하다.TypeScript는 컴파일 시점에서 타입은 검증하지만, 런타임에서 발생하는 에러는 방지하기가 어렵다.(런타임은 타입스크립트가 아닌 자바스크립트 실행이기 때문이다.)Zod를 사용하면 이를 해결할 수 있다. 오늘은 Zod에 대해서 알아보겠다.Zod 란?Zod는 스키마 선언 및 유효성 검사 라이브러리다.Zod는 앞서 말했듯이 타입스크립트의 런타임에서..

타입스크립트로 프로젝트를 진행하던 중 에러가 발생했다.타입 지정을 제대로 하지못해 발생했다.밑에는 내가 겪은 TypeScript 에러다.Type 'AxiosResponse' is missing the following properties from type 'Promise>': then, catch, finally, [Symbol.toStringTag]ts(2739)const res: Promise> 의미는 다음과 같다."야! AxiosResponse 을 Promise>라고 착각한거야!!!" 내가 착각한 부분은 다음과 같다.- axios면 비동기니까 당연히 Promise 객체를 받아야하는거 아니야??- 그럼 Promise도 써주고 AxiosResponse도 써주면 되는거 아니야?? 결론당연히 내가 틀렸다..

들어가기 전React 프로젝트 진행중 객체의 상태관리를 필요로 하던 중 Record라는 타입정의 하는 법을 알게 됐다.오늘은 Record가 뭔지 간단하게 알아 보겠다. Record란 무엇인가?타입스크립트에서 객체의 타입을 정의할 때 자주 쓰이는 유틸리티 타입이다. 기본 문법RecordKey's type : 객체의 키 데이터 타입 / Value's type : 객체의 값의 데이터 타입 예시 1 (문자열 키에 불리언 값)const checks: Record = { age: true, terms: false, privacy: true,};// 다음과 같다type Checks = { [key: string]: boolean;} 예시 2 (특정 키들만 허용)type TermKey = 'age' | 'te..

전략 패턴공통된 기능을 인터페이스 중심으로 기능을 들어내서 의존성을 주입한다.클래스로 생성 객체를 기능으로 받아서 사용하는 패턴 클래스를 공통된 기능 단위로 작성한다.상속을 받을 경우에는 공통된 기능을 조건문으로 다 처리를 해야하는데기능의 의존성을 공유하지 않고 하나의 기능만 관리하게 공통된 기능단위로 클래스를 작성한다.(확장성 + 유지보수성 증가) // interface// 유저가 전달할 데이터 객체 구조 정의interface IUserParams{ email : string; password : string;}// 유저가 로그인을 요청하고 응답을 받았을 때// 유니온 : 타입을 두가지 이상 포함 시킬 수 있다.interface IAuthReps{ success : boolean; // mess..

목차1. 타입 어서션2. 타입 앨리어스3. 타입 클래스 수정자4. 제네릭 1. 타입 어서션구체적인 객체의 타입을 알려주고 명시한다.변수명 = 값 as 타입ex)const input = document.querySelector("input"); // 자바스크립트 경우에서는 에러가 발생하지 않는다.const input = documnet.querySelector("input") as HTMLinputElemnet// typescript에서는 input에 as 타입을 지정해 주어야 에러가 발생하지 않는다  2. 타입 앨리어스- 타입 지정에 별명을 붙여줄  때 사용합니다.ininterface는 기능이나 사물의 객체의 구조를 정의할 때 사용하고type은 데이터의 형태를 정의할 때 사용합니다.type userLog..

목차1. interface란?2. interface 사용3. 선택적 프로퍼티4. 읽기 전용 프로퍼티5. 인터페이스 클래스 타입 1. interface란?타입스크립트에서 인터페이스는 두시스템 사이에 상호간에 정의한 통신규약이며 선언만 존재합니다. 타입을 미리 선언해주는 장치로서 사용할 수 있다. 미리 개발할 때 서로 공통적으로 사용할 부분을 미리 선언을 할 때 사용한다. 사용목적은 클래스와 함수간의 일관성을 유지할 수 있도록 하기 위함이다. 2.interface 특징- ES6(자바스크립트)가 지원하지 않는 TypeScript 에서만 사용- 컴파일 후에 사라진다 (자바스크립트에서 지원하지 않기 문이다)- interface 간에 다중상속이 가능 interface  예시// 인터페이스명은 대문자로 표기inter..

GUI (Grahpoic User Interface) : 볼 수 있는 아이콘등의 UI가 있는 것 CLI (Command Line Interface) : 콘솔창을 통해서 프로그램을 실행하는 환경- CLI 는 터미널을 통해 컴퓨터가 상호작용을 하는 방식- 유저는 문자열의 형태로 작성해서 컴퓨터에게 출력을 받는다 쉘터미널을 사용하기 위해 키보드 입력같은 명령어를 실행하고 폴더와 파일 등을 관리합니다.명령어를 입력하면 커널이 읽을 수 있는 이진코드로 변환합니다. 커널컴퓨터를 켜면 메모리에 항상 올라가 있는 운영체제.하드웨어와 프로그램 사이에서 인터페이스를 제공하는 역할을 담당합니다.컴퓨터의 자원들을 관리하는 역할을 합니다.cd : 하위 폴더 경로로 이동cd.. : 상위 폴더 경로로 이동 npmnode의 패키지..