오늘의 코드

https://github.com/hyoungwonkang/TypeScript

오늘 공부 한 것

• 타입스크립트를 배우기 전 클래스 보충 수업. 클래스로 써서 callback으로 재조립

class Counter{
  constructor(runEveryFiveTimes){
    this.counter =0;
    this.callback = runEveryFiveTimes;
  }
  
  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter%5 === 0){
      this.callback && this.callback(this.counter);
    }
  }
}

function printSomething(num) {
  console.log(`Wow! ${num}`);
}
function alertNum(num){
  alert(`alert! ${num}`)
}

//서로 다른 기능을 수행하는 오브젝트
const printCounter = new Counter(printSomething);
const alertCounter = new Counter(alertNum);

오늘 배운 것

타입스크립트 강의

기본 타입들 정리

Primitive: number, string, booolean, symbol, null, undefined
Object: function, Array

number, string, boolean

undefined

let age: number | undefined; // 옵셔널 타입. number와 undefined 동시에!

function find(): number | undefined{
찾으면 숫자, 없으면 undefined
return 1; //숫자를 리턴하거나
// return undefined; //undefined를 리턴합니다!
}

null

let person: string | null; // 옵셔널 타입. number와 undefined 동시에!

unknown 똥! 어떤것이 들어올지 모르겠어!

let notSure: unknown = 0;
notSure = "he";
notSure = true;

any 똥! 어떤것이든 다 담을 수 있어!

let anything: any = 0;
anything = "hello";

void 비어있는 것 표현!

function print(): void{ // void 생략 가능!
console.log('hello');
return;
}
let unusable: void = undefined; // 활용성이 없어 이렇게 선언하지 않는다!

never 절대 다른것을 리턴할 수 없다. (오류 확인용)

function throwError(message:string): never {
//message -> server (log)
throw new Error(message);
while(true){} //무한 루프
// return 1;
}
// let neverEnding: never; 절대 사용하지 않음

object 똥! 객체표현. 하지만 객체를 타입으로 하면 의미가 없으니 안 쓴다!

let obj: object
function acceptSomeObject(obj: object) {}
acceptSomeObject({name: 'ellie'})
acceptSomeObject({animal: 'dog'})

함수형 타입 정리

//JavaScript 똥!
function jsAdd(num1, num2) {
  return num1 + num2;
}

//TypeScript 빛!
function add(num1: number, num2: number): number {
  return num1 + num2;
}

//JavaScript 똥!
function jsFetchNum(id) {
  // code...
  // code...
  // code...
  return new Promise((resolve, reject) => {
    resolve(100);
  });
}

//TypeScript 빛!
//안정적인 개발을 위한 static함을 사용. 문서화에 도움이 됨.
function fetchNum(id: string): Promise<number> {
  // code...
  // code...
  // code...
  return new Promise((resolve, reject) => {
    resolve(100);
  });
}

// 자바 스크립트에서도 사용할 수 있고 타스에서 더 활용도를 높일 수 있는 타입이 더해진 함수 정의 방법

Optional parameter //인자를 전달해도 되고 안해도 된다. //이름을 출력할 수 있는 함수

function printName(firstName: string, lastName?: string) {
console.log(firstName);
console.log(lastName);
}
printName("Steve", "Jobs");
printName("Ellie"); // 인자 갯수와 정해진 타입으로 전해줘야 한다.
// printName("Anna", undefined);

Default Parameter

function printMessage(message: string = "default message") {
//타입 스크립트에서 default값 전달 가능.
console.log(message);
}
printMessage();

Rest parameter

function addNumbers(...numbers: number[]): number { // ... (rest param)로 numbers라는 배열을 받아옴. number[]: 숫자타입의 배열.
return numbers.reduce((a, b) => a + b);
}
console.log(addNumbers(1, 2));
console.log(addNumbers(1, 2, 3, 4));
console.log(addNumbers(1, 2, 3, 4, 5, 0));
}

Array

const fruits: string[] = ["apple", "banana"];
const scores: Array = [1, 3, 4];
function printArray(fruits: readonly string[]) {
// readonly를 사용하려면 string 다음에 배열 표시가 있는 문법이용.
// 즉 불변성 때문에 string[]을 사용하는 경우가 더 많음.

Tuple //서로 다른 타입의 데이터를 배열에 담을 수 있음

let student: [string, number];
student = ['name', 123]
student[0]      // name
student[1]      // 123
//Tuple을 스면 인덱스를 읽어야 하는 가독성이 떨어짐.

//object destructuring을 이용.
const [name, age] = student;     // student안에 첫번째 값이 name으로 두번째값이 age로 할당 됨.

}

React. useState

const [count, setCount] = useState(0); : 동적으로 뭔가 좀 관련 있는 다른 타입의 데이터를 묶어서 사용자가 이름을 정의해서 써서, Tuple을 잘 사용한 예.

마무리

오늘은 여러 내적갈등이 많았습니다. 남에게 끌려가야 하나 아님 내가 더 적극적으로 나서야 하나 고민하고 스트레스 받는 한 때 였습니다. 허나 부질 없는 것이었습니다. 그저 열심히 하여도 못 하면 다음에 하면 되는것이고 현재 할 수 있는 것만 하자고 다시 마음을 다잡았습니다. 실전프로젝트는 이제 2틀밖에 안지났고 앞으로의 5주 5일은 해왔고 해나가고 있는 모든 것들을 내 실력으로 만드는 기간인 것 같습니다.

그리고 긴 팀플에서 놓치지 말아야 할 것은 내가 스스로에게 충분히 노력했는지 하루하루 돌아보는 것, 과 동시에 프로젝트에 대한 적당한 주인의식이라 생각합니다. 개발자로서 서비스를 만듬에 있어 프로젝트가 어떻게 유저에게 쓰여질지 생각해야 할 것입니다.