[TS Pair Study - 1Week] 기본 타입 part1 / 깃헙!!!!

페어스터디 첫번째 주!

한 주 동안 공부한 타입을 잘 보여줄 수 있는 코드를 만들어 깃헙으로 공유하고 발표를 했다.

 

스터디를 진행하면서 새롭게 배운점과 깃헙 사용시 어려웠던 점을 포스팅 해보려 한다!

---

✏️   TypeScript

➤ 내가 맡은 타입

unknown, any, void, never, rest parameter, array, tuple

➤ 민선님이 맡은 타입

object, alias, union, optional parameter, default parameter

발표 순서

any → array → never → rest parameter → object → alias → union → tuple → unknown → void → optional parameter  → default parameter

 

👉    타입을 지정해주지 않을 경우 암시적으로 any타입이 지정된다.

// 암시적으로 any 타입 지정
    let color2;
    color2 = 12;
    color2 = 'rainbow';

    console.log(typeof color2); // string

변수 color2는 타입을 지정해주지 않았기 때문에 any type이 암시적으로 지정되어있다.

any type은 어떠한 타입도 들어올 수 있기때문에 최종적으로 string 타입이라고 할 수 있다.

 

하지만 타입스크립트를 사용하는 의도에 맞지 않기 때문에 any type은 가급적 사용하지 않는 것이 좋다!

 

👉    any type과 unknown type 차이

두 타입 모두 타입을 지정하기 애매할때 사용하지만 unknown 타입은 any 타입을 제외한 다른 타입으로 선언한 변수에 할당할 수 없다.

//any를 제외한 다른 타입으로 선언된 변수에 할당될 수 없다

    let variable2: unknown

    let anyType: any = variable2
    let booleanType: boolean = variable2  // Error
    let numberType: number = variable2 //  Error
    let stringType: string = variable2 //  Error
    let objectType: object = variable2 //  Error

또한 unknown 타입으로 선언된 변수는 프로퍼티에 접근할 수 없으며, 인스턴스를 생성할수도 없다.

 

unknown은 타입을 좁혀서 사용해야 하는 의무가 있지만,

any는 타입을 좁혀서 사용하지 않아 자유롭다는 차이점이 있다.

 

따라서 타입을 지정할 수 없는 상황일 경우 unknown을 사용하는 것이 보다 안전하게 코딩을 할 수 있는 방법이다.

 

👉    다재다능한 alias type

// 객체의 각 key들의 type을 명시적으로 지정할 수 있음.
  // object 타입을 지양하고 type을 사용하면 객체의 구조를 보다 명확하게 표현할 수 있습니다.
  type Movie = {
    title: string,
    cast: string[];
  };

  const myFavoriteMovie: Movie = {
    title: "Gravity",
    cast: ["Sandra Bullock", "George Clooney", "Ed Harris"],
  };

alias type은 기존 타입에 새로운 이름을 붙여 사용할 수 있다.

어려워서 그냥 타입을 변수에 담은거라고 생각하니 한결 이해하기 편해졌다.

객체의 타이틀은 string 타입으로 캐스트는 string 타입으로 이루어진 배열로 정의를 해주고,

myFavoriteMovie라는 새로운 변수에 만들어 놓은 Movie타입을 지정해주면 타입스크립트가 알아서 타입을 지정해 주게 된다.

 

👉    Tuple과 alias의 콜라보

type rgb = number | string;

    let rgbColor1: [rgb, rgb, rgb] = [255, 255, 0];
    let rgbColor2: [rgb, rgb, rgb] = ['FF', 255, '00'];

rgb타입은 tuple을 사용해 number 타입과 string 타입 둘 중 하나가 들어올 수 있도록 해주었다.

새로운 변수에 타입을 rgb로 했을 경우 두가지 타입을 동시에 사용 할 수 있다!!

 

 

✏️   GitHub 협업하기! 

깃헙으로 헙엽하는게 처음이다보니 둘다 어려운 부분이 많아서 갈피를 못잡았었다.

민선님은 Team Leader로 되어있으시고 나는 Team Member이기 때문에 push를 하는 과정에서 어려움이 컸다.😭

 

우왕좌왕했던 나의 깃헙 사용기,,

 

→ 내가 했던 방법

1. 민선님이 만들어 놓은 프로젝트를 git clone을 통해 가져온다! 

2. 열심히 코드를 작성! 그후 git add와 git commit을 통해 저장

3. git push origin main을 통해 푸쉬하려했지만 에러!!! (코드를 작성하는 사이 민선님이 파일 수정을 해서 뜬 오류)

4. git pull origin main을 해주고 다시 한번 push를 해주었지만 또 에러!!!!!!

    여기서 굉장히 멘붕이었다. 코드가 공유되야 민선님도 확인이 가능한데 일단 화면공유로 페어 진행을했다😿

 

→ 오류 해결!!

이런 저런 시도끝에 문제의 오류를 발견했다. 클론한 저장소는 기본적으로 공용으로 사용하는 main 브랜치에 저장되어있다는것...!

협업을 위해선 새로운 브렌치를 만들어주고 거기서 파일을 작성해야 했던것이었다!

git checkout -b [브렌치 이름]
// 브렌치 생성과 동시에 기존 브렌치에서 생성된 브렌치로 이동할 수 있게 해주는 명령어

1. 새로운 user라는 브렌치를 만들었다.

 

2. 작성했던 코드 복붙 후 git add와 git commit을 한다.

 

3. git push origin main이 아닌 git push origin user로 푸시하기!

 

4. 이제 이렇게 작업한 내 브렌치의 코드들을 Pull requests를 통해 공용 저장소로 합치면 된다.

5. Pull requests를 하게 되면 (관리자 권한이 있다는 하에) 이런 창이뜨는데 여기서 Marge를 해주면

user브렌치가 main브렌치로 합쳐지게 된다!

여기까지 하고 나면 끝!!!🎉

 

* 내 브렌치가 공용브렌치와 잘 합쳐졌는지 확인하고 싶다면 Insights → Network에서 확인하면 된다.

내 브랜치가 공용 브랜치와 합쳐져있는 로그를 확인 할 수 있다! 진짜 끝!!

---

이렇게 하면 그래프에서 누가 작업했는지 알 수가 없기때문에 다음번엔 포크 후 작업을 해봐야겠다...!

첫 페어이고 협업이라 신경쓰이는게 많았지만 그래도 성공적으로 진행을 한거같다!😆

 

수고많으셨습니다 민선님👏👏👏