생각기록

2023-03-17 [udemy] typeScript 강의 섹션1: 시작하기 본문

SeSAC 풀스택/타입스크립트

2023-03-17 [udemy] typeScript 강의 섹션1: 시작하기

끼록관 2023. 3. 17. 20:28

타입스크립트란?

  • 자바스크립트의 superset
  • 자바스크립트 기반이며 새로운 언어가 아닙니다. 장점을 더 부각시킨 것

 

단, typeScript 는 브라우저와 같은 js 환경에서 실행 x

브라우저는 typeScript 실행 x

또한 node.js 도 typeScript 실행 불가

 

js 보다 더 나은 버전인데 왜 실행할 수 없나?

typeScript 는 프로그래밍 언어 + 도구입니다

즉, 코드를 실행하여 typeScript  코드를 js로 컴파일하는 강력한 컴파일러

코드와 typeScript 를 작성해 결과적으로 얻게 되는 것이 js

새로운 기능들을 js 해결책으로 컴파일하는 typeScript  컴파일러

typeScript  컴파일러는 우리에게 나은 구문과 작업을 보다 쉽게 수행하도록 하는 방법을 제공

복잡한 js 스니펫으로 더 멋지고 쉬운 방법으로 컴파일

 

typeScript  이름대로 js 언어 추가 기능 설정

=> 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 미리 식별할 기회 제공

에러를 초기 개발 과정 발견 후 수정가능한 기회

 

 

 

왜 사용하는가?

함수를 호출 할 때 두 숫자 대신 두 문자열을 전달하게 되면...

5가아닌! 23으로 호출되는 우리가 원치 않는 일이 생깁니다.

js에서 발생할 수 있는 오류로 런타임에는 오류가 발견되지 않습니다.

개발도중 이와 같은 에러 포착 가능

 

 

node.js

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Understanding TypeScript</title>
    <script src="js-only.js" defer></script>
  </head>
  <body>
    <input type="number" id="num1" placeholder="Number 1" />
    <input type="number" id="num2" placeholder="Number 2" />
    <button>Add!</button>
  </body>
</html>

 

const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
  return num1 + num2;
}

button.addEventListener("click", function() {
  console.log(add(input1.value, input2.value));
});

버튼, 인풋2개 요소에 접근 / 함수 / 버튼이벤트

우리가 유의해야할 점

javaScript 에서 input 값에 엑세스할 때 중요한 것은 이는 언제나 문자열입니다. 숫자든 무엇이든 상관없이 문자열

수학적으로 더하는게 아니라, 105 이런식으로 연결되게 됩니다.

 

우리는 이 것을 타입스크립트 처럼 해볼것임

const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
  if(typeof num1 === 'number' && typeof num2 === 'number'){
    return num1 + num2;
  } 
  else {
    return +num1 + +num2;
  }
}

button.addEventListener("click", function() {
  console.log(add(input1.value, input2.value));
});

이 부분이 바뀌었는데

num1, num2가 타입이 넘버면 그대로 더해주고

아니면, 숫자로 변환하도록 한다.

 

(+) 단항 더하기 연산자를 이용해 문자열을 숫자로 변환하는 방법

단항 더하기 연산자(+)는 문자열을 숫자로 반환하며 피연산자 앞에 위치합니다.

+num1 + +num2; 이런식으로 숫자변환도 가능하다!

이는 바닐라자바스크립트고, typeScript 가 아닙니다.

add 함수는 숫자에 대해서만 동작하므로 숫자를 얻었는지를 typeScript 는 검사해줄겁니다.

 

typeScript, nodejs  설치방법

https://www.typescriptlang.org/download 에서 다운로드 클릭 

설치방법 확인 가능

npm install -g typescript

그리고 필요한 nodejs를 따로 설치해줍니다.

https://nodejs.org/ko

npm i nodejs

 

시스템 전역 설정은 명령 프롬프트에서 sudo npm ~ 써주면 된다.

타입스크립트로 해보기

확장자는 .ts 새파일을 추가합니다.

js-only.js 파일의 코드를 using-ts.ts 파일에 복사합니다.

에러가 즉시 반환된다.

js파일은 삭제합니다.

 

타입스크립트는 우리가 의도를 더 명확히 하고 코드를 확인하도록 요구합니다.

 

뒤에 ! "느낌표"를 추가하면서 요소를 얻을 것임을 타입스크립트에게 알림

이것이 결코 null이 아님을 알려주기

또한 이것이 항상 input 요소이기 떄문에 형 변환인 HTMLinputElement로 사용할 수 있음을 알려줌

 

이렇게했더니 오류가 다 사라졌다.

이제 두 개의 js를 컴파일 할 것

 

큰 장점은 추가 타입이다. 이것때매 타입스크립트라고 불린다.

여기서 데이터 기능 장애의 타입에 대해 말하는게 아닌

any

typeScript 가 말하고자 하는 것은 그 안에 무엇이 있는지 알지 못하며

어떤 타입의 값이든 될 수 있다는 것

=> 더 명시적으로 추가를 해주자면

컴파일러가 이해할 수 있는 typeScript  추가 구문 사용

이것이 숫자 타입이 될 것이라고 말해주기

 

근데 또 오류가난다...

이 코드를 컴파일할때도 에러가 발생 => 궁극적으로 올바르게 수행해야 하는 작업이여서

컴파일을 위해 터미널을 엽니다.

 

컴파일 

폴더에 들어가면, TSC 를 실행하여 using-ts.ts에 앞서 설치된 타입스크립트 컴파일러를 호출할 수 있다.

js파일이 추가됬습니다.

 

에러에서 타입 문자열의 인수를 숫자 타입의 매개변수에 할당할 수 없다고 알려줍니다.

여기서 typeScript  가 input 요소의 value 속성에서 얻는 것이 문자열이 될 것이라고 이해하고 있다.

 

IDE에서 확인 가능

필요한건 문자열이 아닌 숫자가 필요

 

IDE란 무엇인가?

통합 개발 환경(Integrated Development Environment, IDE)은 코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어이다.

 

해결방법

위에서 숫자화 시켰던 것처럼 +input1.value 숫자화 해주기

 

 

근데 또 에러?

이 두파일을 여기서 동시에 사용하지 않을 것이라는 것을 이해하지 못해서 생기는 오류

하나만 쓸건데, 둘 다 사용한다고 이해해서 생기는 것

 

 

js파일을 열어보면

보다싶이 타입들이 다 사라졌습니다!

유형 변환도 사라졌고 바닐라 스크립트만이 남았다.

javaScript로 컴파일 할 때 이들은 코드를 평가하고 잠재적 에러를 찾는 데 사용되지만,

이들은 해당 작업 후 제거되고 일반 javaScript 가 출력됩니다.

 

최종

index.html 파일로 이동해 using-ts.js파일을 가져옵니다.

브라우저가 typeScript  실행 할 수 없으니 항상 javaScript 파일을 가져와야 합니다.

 

 

typeScript  Overview 장점

타입스크립트는 아주 중요한 타입과 데이터를 추가합니다.

1. Types : 우리가 작동방식에 대해 더 명시적이고, 예상치 못한 많은 에러 피할 수 있다.

+ 최신 IDE를 사용할 수 있다. (ide 또한 ts에 대한 이해도가 있어 도움이 된다.)

 

2. 차세대 JS 기능도 사용가능 : JS 코드로 컴파일되어 구형 브라우저에서도 사용 가능

바닐라 JS도 이와같은 기능을 하는 바벨이라는 도구가 있다.

 

3. 인터페이스와 일반 기능 같은 ts만 이해할 수 있는 특정한 기능 추가

개발과정에서 에러를 보다 명확히해 에러 제거할 수있는 기능들

 

4. 과정 중 장식자가 정확히 무엇인지, 왜 메타인지 : 우리가 이해할 수 있는 전체 모듈을 지닌 장식자와같은 특정 메타 프로그래밍 기능 제공

 

5. odds 전체 모듈 => 요구 사앟ㅇ에 맞게 더 엄격하거나 느슨하게 맘대로 

 

6. 최신 도구와 ide 사용 : ts가 아닌 프로젝트에서도 도움을 받을 수 있다.

 

 

강의 개요

단계별 학습

  • 핵심 ts 기본 - 일반작동방식, 추가된 몇 가지 새로운 기능
  • 컴파일러 종류, 구성 => 컴파일러로 설정할 수 있는 것 & 각각 설정의 기능을 이해하는것 아주 중요!
  •  ts에서 지원되는 차세대 js기능, 작동방식, ts에서 기능 사용방법 등
  • 클래스, 인터페이스 
  • 몇가지 고급타입, 고급 ts 기능 & 기본 사항 정리
  • Generics 제네릭스
  • Decorators 장식자 => ts에서 추가된 아주 멋진 기능 / 유용한 장식자 구축

이모든 기능 프로젝트에 어찌 적용하는지 시연

  • 네임스페이스 & 모듈 => 문제해결 방법
  • TS 사용해 Webpack => 웹팩 : 프엔 웹 개발에서 사용하는 구축 도구로 ts와 사용시 더 나은 프로젝트 설정 가능
  • 다양한 실제 프로젝트에서 필요한 것은 타사 라이브러리 .. 프로젝트 응용할수있는지?

 

자체 모듈 제공하는 특정 시나리오들

  • ts로만 전체 리액트 application을 구축하는 방법 Recat 강의
  • nodejs와 익스프레스 등을 다루기

 

본 강의 최대 활용법

영상 속도 맞추기 가능

코드 따라하기

연습 / 자잘한 시연 직접 시도 + 어레인지 스스로해보세요

에러발생 => 디버깅 & 검색 

내 코드, 선생님코드 비교 

질의응답 질문 => 답변 이용

 

코드 편집기 IDE 설정

VSCODE 강력추천

 

확장프로그램 추천

ESLint

프로젝트 진행 시 코드의 품질 검사

 

Material Icon Theme

외관용

 

Path Intellisense

Path Intellisense는 VScode를 사용중에 파일이나 이미지 등의 경로를 지정할때 자동으로 경로를 선택해서 지정할 수 있게 해주는 아주 편리한 익스텐션입니다.

 

Prettier

보기 좋고 읽기 쉽도록 코드 형식 정돈

* 특정 단축키와 함께 쓰여서

vscode 메뉴 code - preferences 에서 keyboard Shorcuts 를 참고

=> format document를 검색하면 나타나는 단축키들을 코드에서 사용하면

형식을 자동으로 맞춰줌

 

shift+alt+f

 

프로젝트 설정

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Understanding TypeScript</title>
    <script src="app.js" defer></script>
</head>
<body>
    
</body>
</html>

app.ts

컴파일 해주기

tsc app.ts

 

app.js파일이 생기고

html파일을 실행하면,

콘솔찍힘

 

 

코드에서 무언가 변경될때마다 수동으로 컴파일해야하나?

이 과정을 없애기위한 도구로 자동 수행하는 법!

 

이 프로젝트 폴더에서

1. npm init

nodejs를 설치하면 npm 커맨드를 사용할 수 있다.

이 프로젝트에 독점적인 종속성을 설치 할 수 있다.

 

 

터미널에

2. npm i --save-dev lite-server => 개발 전용 종속성 표시

개발 도중 도움이 될 도구로 메인 코드의 일부로 실행되는 코드를 포함하지 않는다.

npm install (plugin) --save-dev란?

  • 패키지(plugin)를 ./node_moduels 디렉터리에 설치하고 ./package.json 파일의 devDependencies 항목에 플러그인 정보가 저장 됩니다.
  • --production 빌드시 해당 플러그인이 포함되지 않습니다.

추가가된것을 확인했습니다.

 

3. 그 후 script에 "start" : "lite-server"을 추가

*lite-server 는 package.json 파일 옆에 항상 index.html파일을 제공하는 간단한 개발 서버입니다.

4. 그다음 npm start를 하면

* 여기서 오류가 떳는데 lite-server 버전 오류입니다.

2.5.4 로 버전 변경후 하니 되더군요

자동으로 창이 뜹니다.

 

localhost:3000에서 어플리케이션 제공

 

 

자동화가 잘되는지 확인해볼까요?

이 파일을

tsc app.ts로 컴파일합니다.

리로딩브라우저가 뜨네요

콘솔도 바뀌었습니다.

 

컨트롤+c하면 멈출 수 있습니다.

 

 

주의할점은

파일같은것을 강의실에서 다운받을 때 node_modules 폴더가 포함되지 않은 파일이 다운될 것입니다.

압축해제후 package.json에서 그냥 npm install하면 됩니다 !

 

'SeSAC 풀스택 > 타입스크립트' 카테고리의 다른 글

2023-03-22 [udemy] typeScript 강의 섹션2: 기본과 기본타입  (0) 2023.03.22
2023-03-06 타입스크립트 / 함수 /  (0) 2023.03.06
2023-03-06 타입스크립트 2일차 / 인터페이스 /  (0) 2023.03.06
2023-03-06 타입스크립트 2일차 / 기본 타입 /  (0) 2023.03.06
2023-03-06 타입스크립트 2일차 타입스크립트의 목적/ ts for js programmers  (0) 2023.03.06
'SeSAC 풀스택/타입스크립트' Related Articles more