포시코딩

개요 이틀전 끝난 프로젝트는 원래 그냥 JavaScript가 아닌 기능 개발 완료 후 TypeScript로 마이그레이션 하는게 목표였다. 하지만 결국 기능 개발도 다 완성하지 못한채 기간이 끝나게 됐고 그에 따라 TypeScript 적용은 해보지도 못했다. 앞으로 해당 프로젝트를 보수하게 된다면 계획했던 TypeScript로의 마이그레이션도 진행하게 될텐데 솔직히 하기로만 했었지 어떻게 할지는 생각을 못했다가 이번에 노마드코더에서 TypeScript 공부를 하며 관련 내용을 공부하게 되어 정리해본다. 상황 가정 (1) myPackage.js export function init(config) { return true; } export function exit(code) { return code + 1; ..

개요 Enum, Generic은 자주 접하다보니 어느정도 익숙해졌는데 Utility Type이라는 새로운걸 접해서 정리해봄 Partial Partial(파셜)은 특정 타입에 속해있는 집합을 모두 선택적으로 만드는 타입으로 변환 interface Toppings { tomatoes: boolean, onion: boolean, lettuce: boolean, } const toppingsIWant: Partial = { onion: true, letttuce: undefined, // 다른 집합은 있어도 되고 없어도 되고 undefined로 명시해줘도 됨 } ex) 햄버거 주문 API에서 토핑을 유저가 선택적으로 주문할 수 있게 인터페이스를 만들 때 유용 Required Partial의 반대. 특정 타입에..

오늘은 묵혀놓은 궁금한 것들을 해결하는 시간을 가져보았다. 구글링 및 그동안 공부한 것들 종합 + 튜터님한테 직접 물어보는 방법을 통해 아래 다섯가지 상황과 결과를 정리해보았다. api 통합 vs 분리 개요 대기중인요청 진행중인 요청 완료된 요청 위 세가지 요청 리스트 api에 대해 정리하던중 다시 path를 깔끔하게 재할당 해줘야하는 상황이 생겼는데 두가지 선택사항이 생겼다. 방법 찾기 1. 라우터에서 부터 나눠지게? /api/orders/waiting?p=1 /api/orders/doing /api/orders/done?p=1 2. GET /api/orders로 들어가 컨트롤러에서 type에 따라 다른 service 호출? /api/orders?type=waiting&p=1 /api/orders?ty..

다형성 (Polymorphism) 다른 모양의 코드를 가질 수 있게 해준다. 다형성을 이룰 수 있는 방법은 제네릭을 사용하는 것이다. 제네릭 (Generic) 제네릭은 placeholder 타입을 쓸 수 있도록 해준다. (concrete 타입 x) 때가 되면 TypeScript가 알아서 placeholder 타입을 concrete 타입으로 바꿔준다. 예시 polymorphism, generic, class, interface를 다 합쳐서 작업해보자 localStorage와 비슷한 기능을 만들어볼거임 우선 interface Storage { } 이렇게 작성하면 잘 알고 있는 JavaScript의 web storage API를 위한 인터페이스가 이미 있다는 것을 알 수 있다. 이 상태에서 property를 ..

추상 클래스 (Abstract class) 추상 클래스 사용 예시 abstract class User { constructor ( protected firstName: string, protected lastName: string ) {} abstract sayHi(name: string): string abstract fullName(): string } class Player extends User { fullName(): string { return `${this.firstName} ${this.lastName}` } sayHi(name: string): string { return `Hello ${name}. My name is ${this.fullName()}` } } 추상 클래스인 User 클..

@types/~~의 한계? TypeScript를 쓰다보면 추가로 사용할 라이브러리에 대해 @types/라이브러리 와 같이 설치해줘야 해당 라이브러리 타입을 사용 가능한데, 만약 @types/~~ 를 했는데 없다면 어떻게 될까? 컴파일? 트랜스파일? 컴파일은 코드를 기계가 읽기 쉽게 변환해주는거고 TypeScript에서 JavaScript로의 변환은 트랜스파일이라고 배웠는데 왜 자꾸 가르치는 영상들에서 (내배캠 튜터뿐만 아니라 노마드코더의 니꼬쌤마저!) '컴파일'이라고 말하는걸까 -> 그냥 대충 퉁치는건가? 기존 JavaScript 파일 -> TypeScript 적용하기 tsconfig.json "strictNullChecks": true, "noImplicitAny": true 두 설정이 적용될 시 an..

TypeScript tsconfig.json 설정 에러 변경한 설정이 적용이 안되고 에러가 나고 있을 때 shift + command + p typescript 치면 나오는 목록에서 TypeScript: Restart TS server 클릭하면 새로고침 된다. JavaScript에는 없는 Type 설치 npm i express dotenv npm i -D typescript @types/node @types/express @types/dotenv 이처럼 추가로 설치한 라이브러리에 대해 해당 라이브러리의 내부 코드에 대한 타입이 정의되어 있지 않아 타입스크립트 파일에서 타입 추론을 할 수 없는 상황에서 추가로 설치해줘야 하는 상황이 생길 수 있다. 그러면 위 처럼 추가로 설치하면 됨 ts-node 자동화 ..

사용 방법에 따른 메소드의 변화 다른 팀 프로젝트를 리뷰하면서 bcrypt 사용하는 부분에 대해 나와 같은 라이브러리를 가져다 쓰는데 리턴받는 값이 다르다는걸 알았다. 일단 사용하는 형태가 다르긴 했다. 나는 new Promise를 선언해 그 안에서 사용했고 다른 팀은 await을 붙여 사용했다. 아래는 그 코드다. 내 코드 encryptPassword = async (password) => { // ...생략 return new Promise((resolve, reject) => { bcrypt.hash(password, saltRounds, (err, hash) => { // ...생략 }); }); }; 다른 코드 const encryptPassword = await bcrypt.hash(passw..

TypeScript 기본적인 문법 말고 특수한 애들만 따로 공부를 더 해봤다. 튜플(Tuple) 튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다. const player: [string, number, boolean] = ["seonghun", 1, true] 열거형 - 이넘(Enum) 이넘은 특정 값들의 집합을 의미하는 자료형 타입스크립트에서는 숫자형 이넘과 문자형 이넘을 지원한다. enum Color {Red, Green, Blue} // 초기값이 없을 시 0부터 1씩 올라감 console.log(Color.Red); // 0 console.log(Color.Green); // 1 console.log(Color.Blue); // 2 let a: Color = Co..

다형성(Polymorphism) poly: 많은, 다수의 morphos or morphic: form(형태), structure(구조) 즉, 형태나 구조, 모양 polymorphous: 여러가지 다른 형태, 구조, 모양들 Generic type type SuperPrint = { (arr: number[]): void (arr: booleanp[): void } const suerPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)) } superPrint([1, 2, 3, 4]) superPrint(true, false, true) superPrint(["a", "b", "c"] 위의 코드에서 superPrint로 오게될 파라미터들에 대해 계속..