안녕하세요. 인생씁니다.ggg
오늘 알려드릴 내용은 들어보신적도 있겠지만
Type Script라는 JavaScript 기반의 언어를 가진 객체 지향 컴파일 언어입니다.
객체 지향이란 객체라는 한 조각을 클래스라는 틀을 사용해
만들어진 조각들을 이용해 무언가를 만드는 방식이라고 생각하면됩니다.
먼저 TypeScript에 들어가기 앞서 다른 IT기업이나 웹사이트에서는 어떤 언어와 기술들을 사용할까요?
카카오쪽의 윗단을 보시면 사용하는언어들입니다. 자바스크립트 , 자바 ,파이썬 등 다양한 언어들을 사용하고
백엔드 단에서는 스프링 프레임워크 , 노드js 등 다양하게 사용하는 것을 볼 수 있습니다.
물론 전부 다 사용은 안하겠죠? 실시간 채팅이나 즉각적인 것을 보여줄때는 node를 사용할수 있고
많은 정보를 가진 페이지는 스프링을 통해서 보여줄수도 있습니다.
그다음에는 저희가 사용하는 PHP를 쓰는 OP.GG페이지를 볼까요?
웹 , 앱, 어플리케이션 , 모바일,소프트웨어등을 사용하는 카카오에 비해서 현저히 적네요.
여기에선 라라벨을 이용해서 구축했네요.
맨 처음 사이트가 생겼을 당시에는 PHP로만 유지하다가
급격히 늘어난 사용자수라던지 다양한 항목들을 구성하기 때문에 변화된걸로 보입니다.
우리가 계속 PHP, JavaScript, Jquery를 고집하는 이유에는 여러가지들이 있겠지만 간단한 기존의 방식과 오래된 사이트들 때문입니다.
현재 오류가 생기고 난 후에 찾으려면 소스코드를 뒤져가면서 어디에 문제가 있는 지 하나 하나 찾아야 됩니다.
매번 하는 일이지만 굉장히 비효율적인 일이라고 생각됩니다.
누군가 부재시에 그 오류를 바로 찾을 수 있을까 한다면 저는 불가능이라고 생각합니다.
TypeScript를 왜 사용해야 할까요?
타입스크립트는 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어입니다.
우리가 알고 있는 자바스크립트는 동적타입언어입니다.
런타임(응용프로그램이 실행중일때)이 되고 나서 오류가 발생됩니다.
정적타입인 TypeScript는 컴파일 후 런타임이 진행됩니다. 컴파일은 소스코드가 컴퓨터코드로 변환되는 과정이며 이러한 상황에 오류를 찾아 낼 수 있습니다.
-설치-
먼저 간단한 설치 및 사용방법을 알려드리겠습니다.
node.js라는 자바스트립트 런타임입니다.
런타임이란 특정언어로 만든 프로그램들을 실행할 수 있는 환경이라고 생각하시면 됩니다.
html에서 자바스크립트를 넣는다면 그 해석은 브라우저가 합니다.
Node.js는 브라우저 내부에서도 말고 서버나 다른 환경에서도 자바스크립트을 사용하게 해줍니다.
먼저 npm init을 씁니다. package.json를 생성하여 Node 패키지에 관한 정보와 의존중인 버전에 관한 정보로
node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하기 위해서 사용되는 것입니다.
그 후에 typeScript라는 모듈을 설치합니다.
글로벌 설치와 로컬설치 가 있습니다. 저희는 한 서버에서 많은 프로젝트를 운영하기 때문에 글로벌설치를 하면 됩니다.
# 글로벌 설치
# npm install --global typescript
$ npm i -g typescript
# 로컬 설치
# npm install --save-dev typescript
$ npm i -D typescript
그 후에 tsc --init 이라는 걸로 tsconfig.json을 생성해서 typeScript에 관한 설정값들을 수정하고 사용합니다.
이렇게 하면 초기 설정값은 완료입니다.
js폴더와 ts폴더로 나눈 후에 사용한 ts파일들은 컴파일시에 자동으로 웹사이트에서 사용할수 있는 js로 변환됩니다.
설치와 초기셋팅은 이정도입니다. 만약에 간단한 스크립트파일을 검증과 변환만 하고싶다면 링크를 통해서 웹상에서도 가능합니다.
-코딩 예시-
JavaScript와 제일 큰 차이 중 하나는 타입입니다.
첫번째 코드입니다. 위 함수를 사용하는 개발자의 의도는 뭐일까요?
무언가 두개의 인자를 받아서 더하는 용도의 SUM일까요?
코드 상으로는 어떤 타입을 전달해야하는지, 어떤 타입의 반환값을 리턴해야 되는지 알수 없습니다.
두번째 코드를 보면 x라는 인자와 y라는 인자를 가져왔습니다.
자바 스크립트 문법상 어떤문제도 없기 때문에 실행될것입니다. 이건 사전에 타입을 지정하지 않는 자바스크립트의 동적 타이핑에 의한 것입니다.
세번째 타입을 이용한 TypeScript 의 코드입니다.
똑같은 코드에 a와 b에 number라는 타입을 넣은 후에 x와 y라는 문자열인수를 담아서 전달하니
number타입이 아닌 String타입이 들어왔기 때문에 해당 오류가 발생합니다.
이처럼 타입 설정을 하는 이유에는? 안전운전에 비유 할수 있습니다.
사고 방지: 타입은 코드에서 실수나 오류가 발생할 가능성을 줄여주는 "안전 벨트"와 비슷합니다. 예를 들어, 어떤 변수에 숫자 타입이라고 지정하면, 그 변수에는 숫자만 들어갈 수 있기 때문에 문자열이나 다른 데이터 타입이 잘못 들어가는 오류를 막아줍니다.
명확한 길 안내: 타입은 코드를 이해하는 데 도움을 주는 "길 안내 표시"와 같습니다. 타입이 있으면 다른 개발자나 미래의 내가 코드를 볼 때, 변수나 함수의 역할과 의도를 더 쉽게 파악할 수 있습니다.
자동 완성과 오류 감지: 타입을 지정하면 개발 도구에서 자동으로 변수와 함수의 이름을 추천해 주고, 실시간으로 오류를 감지해 줍니다. 이를 통해 코드를 더 빠르고 정확하게 작성할 수 있습니다.
타입을 설정하는 이유는 코드의 안정성과 가독성을 높이고, 개발 속도를 더 빠르고 안전하게 만들어 주기 때문입니다.
그리고 TypeScript는 기본적으로 es6문법도 지원하기 때문에 코드작성에 더 용이합니다.
단점으로는 복찹한 초기 설정과 수많은 타입설정 때문에 생산성이 떨어지는 문제가 있습니다.
장점은 위의 내용들처럼 실행 에러와 버그를 줄이고 코드품질의 향상을 시킬수 있습니다.
작은 프로젝트에서는 번거롭겠지만 대규모 프로젝트나 협업환경에 특히 유용하다고 생각합니다. !
그럼 TypeScript는 여기까지 하고 ES6문법 관련해서는 다음 게시글에 남기도록 하겠습니다.ㅎㅎ
이전에 발표했던 자료를 정리하다 보니 미숙한점이 보이긴 하는데 보시고 이해하는데 문제가 없을거라고 생각합니다.
모두 개발 및 공부 화이팅입니다.!! 더 추가적으로 필요한 내용들이 있다면 수정해놓도록 하겠습니다.
'개발 > JavaScript' 카테고리의 다른 글
| Debounce 와 Throttle (0) | 2021.05.25 |
|---|---|
| 자바스크립트 비동기 통신 (Ajax,axios,async await) (0) | 2021.05.03 |
| input 숫자만 입력가능 (0) | 2020.02.17 |
| DatePicker - 주말(토, 일요일) 선택 막기 (0) | 2020.02.14 |
| 자바스크립트 es6 최신문법 사용하기 (0) | 2020.02.14 |