본문 바로가기
728x90
반응형

분류 전체보기132

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.
답수실Log | 220327 | ???: 난 잘나가는 장덕수가 아니라, 그냥 장덕수라는 사람을 좋아하는 거라구! 방금 4년 만에 군 시절 같은 중대에 있던 부사관 한 분과 전화를 했다. 이분(편의상 Y상사라고 하겠음)과의 관계는 내가 3중대 선임 소대장을 역임할 때 우리 중대의 정비관이셨다. 항상 유쾌하시고 유머감각이 뛰어나셨던 분이라 평소에도 스스럼없이 잘 지냈었고, 무엇보다 사진 찍기라는 공통 취미도 있어서 많은 대화를 나눴던 기억이 있다. Y상사뿐만 아니라 군대 시절 많은 부사관들과 정말 좋은 관계를 유지해왔었고, 지금도 이분들을 생각하면 좋은 기억만 떠오를 정도로 나에겐 정말 좋은 인연들이다. 여하튼, 오랜만에 전화하면서 Y상사는 1년 전 본인이 어떠한 계기로 20년 넘게 사용하던 핸드폰 번호를 바꿨고, 번호를 바꾸면서 인간관계도 한 번 정리하게 되었다고 한다. 그래서 번호가 바뀌었을 때 좋은 사람들에게만 .. 2022. 4. 8.
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.
728x90
반응형

티스토리툴바