728x90 반응형 개발자 도전기111 ts-node | NodeBird | 시퀄라이즈 ※ 인프런 - Node.js에 TypeScript 적용하기(feat. NodeBire) by 조현영 강의를 기반으로 정리한 내용입니다. 미들웨어 세팅이 끝났으면 이제 시퀄라이즈 설치! npm i sequelize npm i sequelize-cli B -> A -> B -> ... 이렇게 서로를 계속 참조하게 되어 꼬리에 꼬리를 무는 무한 루프가 발생하게 될 것이다. 자바스크립트는 해당 문제를 방지하기 위해 순환 참조되는 상황이 오면 두 모듈 중 하나는 빈 객체({ })로 반환이 되고, 이는 무한루프는 막게 되지만 결국 모듈은 정상적으로 사용할 수 없는 상황이 생기는 것이다. 우리 프로젝트로 다시 이 상황을 보자면, models 폴더 내에 있는 파일들을 읽고 이를 모델로 정의하는 파일인 index.ts가.. 2022. 4. 20. ts-node | NodeBird | express 미들웨어 ※ 인프런 - Node.js에 TypeScript 적용하기(feat. NodeBire) by 조현영 강의를 기반으로 정리한 내용입니다. 모듈 설치 프로젝트에 필요한 모듈들을 한꺼번에 설치해보자. npm i morgan cors cookie-parser express-session dotenv passport hpp helmet 문제는 대부분 모듈들이 타입을 지원하지 않기 때문에 타이핑을 따로 설치해야 함 npm i @types/morgan @types/cors @types/cookie-parser @types/express-session @types/dotenv @types/passport @types/hpp @types/helmet 아래 모듈들도 필요할 것 같아서? 추가로 설치 npm i passpor.. 2022. 4. 19. ts-node | NodeBird | 초기 세팅 ※ 인프런 - Node.js에 TypeScript 적용하기(feat. NodeBire) by 조현영 강의를 기반으로 정리한 내용입니다. 타입스크립트에 대한 기본 지식을 배웠고, 이제 조금은 더 심화 학습을 위해 이번 강의를 수강하기로 했다. 나는 주로 node.js로 개발을 하고 있기 때문에 여기에 ts를 적용하는 것을 배워보려고 한다. 강의를 들으면서 TS 활용법을 더 체득시켜가자! 프로젝트 초기 세팅 일단 프로젝트 레포를 먼저 생성한 후, 초기 환경 설정부터 다시 시작! npm init -y 명령어로 package.json 생성, 그후 npm install typescript로 타입스크립트 설치. 나는 npx tsc --init 명령어로 tsconfig.json를 생성했지만, 강사님은 다음과 같이 설.. 2022. 4. 18. TypeScript | 강의 메모 | CLI에서 동작하는 todo앱 프로젝트 - Todo 추가, 삭제하기(2) ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. todo를 추가했고, 이제는 todo를 삭제하는 기능을 구현해보자. todo 삭제 클래스 command.ts 파일에 todo를 삭제하는 클래스를 작성한다. // src/command.ts // todo 제거하는 클래스 export class CommandDeleteTodo extends Command { constructor() { super("d", chalk`할 일 {red.bold 제거}하기`); } async run(state: Appstate): Promise { // todos에 있는 모든 todo 출력 for (const todo of state.todos) { const text = todo.toStrin.. 2022. 4. 14. TypeScript | 강의 메모 | CLI에서 동작하는 todo앱 프로젝트 - Todo 추가, 삭제하기(1) ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 이전까지는 todo리스트가 담겨져 있는 배열에 있는 Todo들을 터미널에 출력하는 것까지 구현했다. 이번에는 Todo 리스트의 타이틀과 우선순위를 직접 입력하여 추가하는 기능을 구현해볼 것이다. new todo 생성 클래스 command.ts 파일에 새로운 todo를 추가하는 클래스를 작성할 것이다. // src/command.ts // 새로운 todo 추가하는 클래스 export class CommandNewTodo extends Command { constructor() { super("n", "할 일 추가하기"); } async run(): Promise { // ActionNewTodo 타입도 설정 const t.. 2022. 4. 14. TypeScript | 강의 메모 | CLI에서 동작하는 todo앱 프로젝트 ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 프로젝트 환경 설정 강의 마지막은 간단한 실습 프로젝트! 커맨드라인에서 동작하는 todo앱을 만드는 것이다. 우선 https://github.com/landvibe/inflearn-react-project 에 들어가서 강사님 레포 클론 먼저 하기 그리고 이 프로젝트를 내 로컬에서 실행하기 위해서 npm install을 우선 실행한다. package.json을 보자. { "name": "todo-list", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "nodemon --watch '*.ts' --exec 'ts-node'.. 2022. 4. 13. TypeScript | 강의 메모 | 타입 추론, 타입가드 ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 타입 추론(Type Inference) 정적 타입 언의 단점은 타입을 정의하는데 많은 시간과 노력이 들기 때문에 생산성이 저하될 수 있다는 점이다. 하지만 타입스크립트의 경우 다양한 경우에 대해 타입 추론을 제공하기 때문에 꼭 필요한 경우에만 타입 정의를 할 수 있다. 여기서 말하는 타입 추론이란, 타입을 프로그래머가 따로 정의하지 않아도 자동으로 타입을 추론해주는 기능을 말한다. 타입 추론 덕분에 코드를 덜 작성하면서도 같은 수준의 타입 안정성을 유지할 수 있다는 점이 타입스크립트의 장점! export {}; let v1 = 123; let v2 = "abc"; v1 = 'a'; // number 형식에 string .. 2022. 4. 5. TypeScript | 강의 메모 | 제네릭(Generic), 맵드 타입(Mapped Type), 조건부 타입(Conditional Type) ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 제네릭(Generic) 제네릭은 타입 정보가 동적으로 결정되는 타입을 말한다. 제네릭을 통해 같은 규칙을 여러 타입에 적용할 수 있기 때문에 타입 코드를 작성할 때 발생할 수 있는 중복 코드를 제거할 수 있다. export {}; function makeNumberArray(defaultValue: number, size: number): number[] { const arr: number[] = []; for (let i = 0; i < size; i++) arr.push(defaultValue); return arr; } function makeStringArray(defaultValue: string, size: .. 2022. 4. 1. TypeScript | 강의 메모 | 타입 호환성 ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 타입 호환성 타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것을 의미한다. 정적 타입 언어의 가장 중요한 역할은 타입 호환성을 통해 컴파일 타임에 호환되지 않는 타입을 찾아내는 것이다. 어떤 변수가 다른 변수에 할당 가능하기 위해서는 해당 변수의 타입이 다른 변수의 타입에 할당 가능해야 한다. 할당 가능을 판단할 때는 타입이 가질 수 있는 값의 집합을 생각하면 이해하기 쉽다. export {}; function func1(a: number, b: number | string) { const v1: number | string = a; const v2:number = b; // 타입 number | s.. 2022. 4. 1. 이전 1 2 3 4 5 6 7 8 ··· 13 다음 728x90 반응형
