[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1,2일차 후기

사전 직무 교육 1,2일 차 회고

스나이퍼팩토리 React2기 과정이 드디어 시작!

오전시간 동안은 OT를 통해 프로그램 진행에 대한 설명을 듣고, 9월부터 진행하게 될 기업 프로젝트들에 대한 설명을 받으며 내가 진행하고자 하는 프로젝트를 고민해 보고 선정하는 시간을 가졌다.

단순한 사이드프로젝트의 느낌이 아닌 실제 업무에 참여하는 수준의 과정인듯하여 오래 고민해보고 결정하게 되는,,

점심시간이 지나고 바로 시작된 사전 직무 교육,,  유튜브와 책을 집필하시는  '수코딩'님이 강의를 진행해 주셨고 빠르고 필요한 부분을 쏙쏙 배우는 느낌이었다.

오랜만에 긴 시간 교육을 듣는게 생각보다 더 힘들었지만 아는 내용이라고 생각하다가도 중간중간 신경 쓰지 못한 디테일들이 나타나 정신을 놓지 않으려고 집중! 집중! 

이미 잡아둔 아르바이트때문에 어쩔 수 없이 결석을 하게 된 게 너무 아쉬울 정도의 쏙쏙 들어오는 강의입니다 ...쵝오

(마지막으로는 내 캐릭터 자랑)

1, 2일 차 강의 복습

강의의 내용 중 일부분을 직접 복습하며 요약하고 내용을 추가하거나 예제를 변경한 내용입니다. 기본 출처는 [수코딩(https://www.sucoding.kr)]

TypeScript 문법

- 동적타입 언어인 JavaScript에 타입을 지정하는 언어

타입

-기본 자료형 : number, string, boolean, null, undefined, symbol

let name: string = "potato";
let age: number = 100;
let isTrue: boolean = true;
let symbol: symbol = Symbol("potato");

name = 10; //타입 에러

- 참조 자료형 : object, array, function

//object
const food: object = {
  name: "potato",
  count: 10,
};

food.name; //object타입에는 name이라는 속성이 없기 때문에 error

const food: { name: string; count: number } = {

//object+array
const foods: { name: string; count: number }[] = [
  {
    name: "potato",
    count: 10,
  },
  {
    name: "pizza",
    count: 1,
  },
];

//function
function add(num1: number, num2: number): number {
  return num1 + num2;
}
const add22 = (num1: number, num2: number): number => {
  return num1 + num2;
};
const add333: (num1: number, num2: number) => number = (num1, num2) =>
  num1 + num2;

 

타입 오퍼레이터 ( Union Type , Intersection Type) 

//Union
const food: { name: string; count: number; option: string | number } = {
  name: "potato",
  count: 10,
  option: "main",
};

//Intersaction
const food: { name: string } & { count: number } = {
  name: "potato",
  count: 10,
};

 

인터페이스 (Interface)

//기본
interface Ihuman {
  name: string;
  age: number;
  isFemale: boolean;
}

const gildong: Ihuman = {
  name: "hong",
  age: 300,
  isFemale: false,
  //job:"something" =>error
};

//함수타입
interface IAdd {
  (num1: number, num2: number): number;
}
const add: IAdd = (num1, num2) => num1 + num2;

//병합=> 동일한 이름의 인터페이스를 정의하면 합쳐지게 됨-> 주의
interface Ihuman {
  name: string;
}
interface Ihuman {
  age: number;
}

const gildong: Ihuman = {
  name: "hong",
  age: 300,
};

//인덱스 시그니처
interface Ihuman {
  [key: string]: string | number; //객체의 key는 모두 string이기때문에 가능,
}
const gildong: Ihuman = {
  name: "Benz",
  age: 23,
};

//상속
interface Job extends Ihuman {
  //Ihuman & Job과 같은 기능
  job: string;
}
const gildong: Job = {
  name: "user",
  age: 20,
  job: "Developer",
};

타입별칭 (Type alias)

//기본
type Thuman = {
  name: string;
  age: number;
};

//상속과 병합 대신 intersection사용
type TJob = Thuman & { job: string };

=> 인터페이스는 상속, 병합 o / 타입별칭은 상속, 병합 x

제네릭 (Generic)

- 타입을 미리 정하지 않고 사용하는 시점에 정의 -> 함수에서 제일 많이 사용

function getContent<T>(arr: T[]) {
  console.log(arr);
}

getContent<number>([1, 2, 3]);
getContent<string>(["a", "b", "c"]);

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정