20220714 TIL

Facts.

• 프로그래머스 멀쩡한 사각형 문제를 푸느라 다른 문제도 못 풀었습니다. 근데 결국 이것도 못 품
• 타입스크립트에 대해서 학습했습니다. 왜 사용하는지, 어떻게 사용하는지에 대해서 간단히 실습했습니다.
• 포폴 과제 검사를 안 한 이후로 작업을 하나도 안 했었는데 오늘 몰아서 다 했습니다. 오늘 배운 타입스크립트를 적용하는 것까지 완료했습니다. 게시판 클릭하면 상세로 이동하는 기능도 구현했어야 했는데 까먹.

Feelings.

• 에…. 어제 새끼 발톱만큼 성장한 것 같다고 좋아했는데 아닌 것 같습니다…ㅠ
• 새로운 내용을 배웠습니다. 타입스크립트에 대해서 들어는 봤지만 한 번도 제대로 본 적이 없었는데 오늘 수업을 통해 배울 수 있었습니다. 자바스크립트 이전에 정적 타입 언어를 사용해서 크게 거부감은 없었습니다. 굿
• 코틀린에서는 타입을 항상 대문자로 시작했어서 타입 적어줄 때 자꾸 헷갈립니다. 많이 연습해서 손에 익혀야겠습니다.
• next에는 편리한 기능이 많은 것 같습니다. config파일을 자동으로 채워주다니…. 쩌러… 짱이야….멋있어….

Findings.

• 타입스크립트

  • 프로젝트에 타입스크립트 설정하기

  • 리액트 버전을 지정해서 사용하고 있기 때문에 리액트 버전을 명시해서 타입스크립트 모듈을 추가 하도록 합니다.

    yarn add --dev @types/react@17.0.2 @types/node@17.0.2

  • tsconfig.json 파일을 생성만 해주고 빌드해서 돌리면 next가 tsconfig.json을 감지하고 자동으로 내용을 채워줍니다.
  • tsconfig.json에서 strict 모드를 true로 변경합니다.
  • 타입스크립트는 자바스크립트에 타입을 강제 시키는 언어입니다.
  • const 변수명 : 타입 = 값 형태로 사용합니다.
  • 코틀린이랑 비슷합니다.
  • 타입
  • 원시 타입으로는 string, number, boolean이 있습니다.
  • 배열의 타입은 배열안에 들어갈 데이터의 타입[]으로 표현합니다.

  • | 를 사용해서 여러 타입의 데이터를 포함할 수 있음을 표현할 수 있습니다.

    const arr: number[] = [1,2,3,4,5]
    const arr2 : (string | number)[]= [1,2,3,4,5. '이름']

  • 객체를 사용할 경우 특별한 타입을 지정하지 않는 한 자동 추론됩니다.

  • 객체의 타입을 지정하고 싶으면 interface 키워드를 사용합니다.

    //타입을 만들어서 사용.
    interface IProfile{
    	name : string,
    	age : number | string,
    	school : string,
    }
    
    const profile : IProfile ={...}

  • 함수를 사용할 때 함수 선언 시 매개 변수의 타입을 반드시 지정해 주어야 합니다.
  • 파일 확장자
  • jsx를 사용하는 파일일 경우 .tsx를 사용해야 합니다.
  • jsx를 사용하지 않는 경우 .ts 확장자를 사용합니다.

Future Action Plans.

• 포트폴리오 작업
• 블로깅