타입스크립트 문법





변수(Variable)


타입스크립트는 자바스크립트에서 형을 명시적으로 작성해 주어야하기 때문에 아래와 같이 변수선언을 하게된다.


1
2
3
4
5
6
7
var isDone : boolean = false
var age : number = 42;
var myName : string = "Anders";
 
var notSure : any = true;
notSure = 23;
notSure = "may be a string";
cs



null과 undefined의 차이는 다음과 같다. 

null은 비어있는 값을 표시하는 것이며, undefined는 명시되어있지 않은 것이라고 할수 있다.


1
2
3
4
5
6
7
// print null
var emptyVariable = null;
console.log(emptyVariable);
 
// print undefined
var newVariable;
console.log(newVariable)
cs





콜렉션(Collection)


여러개의 값을 하나의 변수에 저장할 때 사용한다. 즉 배열을 생성할떄 아래와 같이 사용하게 된다.


1
2
3
// list
var list : number[] = [1,2,3];
var list : Array<number> = [1,2,3];
cs





함수(function)


어떤일들을 해야할지 명세해놓고 가져다 사용한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 인자가 없을 때 
function sayHello(){
  alert('Hello');
}
sayHello();
 
 
// 인자가 있을 때 1
function sayMyName(name:string){
  alert('name :' + name);
  console.log('function sayMyName is called');
}
sayMyName('a student studying typescript');
 
// 인자가 있을 때 2
function addTwoNumber(a:number, b: number){
  return a+b;
}
addTwoNumber(2,3);
alert(addTwoNumber(2,3));
cs





조건문(condition)


if에 해당하는 키워드이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// example1
var homeworkDone : boolean = true;
if(homeworkDone===true){
  alert('then you can play from now');
}
 
// example2
var age: number = 15
 
if(age>20){
  console.log('You are an adult')
}else{
  console.log('You are not an adult');
}
 
cs





반복문


여러번의 코드가 반복될떄 반복문을 통해 단순하고 직관적인 코드를 사용할 수 있음.


1. for

1
2
3
4
5
6
7
8
9
10
11
// example1
for(var i = 0; i<10; i++){
  console.log(i);
}
 
// example2(collection)
var myArray : string[] = ["A","B","C"];
 
for(var i =0; i<myArray.length; i++){
  console.log("index:"+i+"->"+myArray[i]);
}
cs



2. while


1
2
3
4
5
6
7
// example1
var i = 10;
 
while(i>0){
  console.log(i);
  i--;
}
cs





오브젝트(Object)


OOP에서의 개념과는 조금 다르다. 오히려 자바스크립트의 map이나 파이썬의 dict와 비슷하다.

조금 더 자세하게 말하자면 구조화된 변수라고 할수 있다.


1
2
3
4
5
6
var emptyObject = {}
var personObject = {
  firstName : "John",
  lastName : "Smith"
}
personObject["salary"= 14000;
cs



오브젝트의 값을 체크하기 위해서는 for-in 문을 사용한다.


1
2
3
4
5
6
7
8
9
10
11
12
var emptyObject = {}
var personObject = {
  firstName : "John",
  lastName : "Smith"
}
personObject["salary"= 14000;
 
for(var member in personObject){
  if(personObject.hasOwnProperty(member)){
    console.log("the member" + member + "of personObject is" + personObject[member]);
  }
}
cs





인터페이스


인터페이스란 오브젝트에 대한 타입이다. 

여러개의 함수와 여러개의 변수가 구조적으로 어떻게 결합해야하는지, 

함수가 구조적으로 어떻게 만들어져야하는지를 설정한다.



1. 첫번째로, 오브젝트에 대한 구조를 명세할때 인터페이스를 사용한다. 예는 다음과 같다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 인터페이스
interface Person{
  name: string;
  age?:number  // optional
 
  move():void;
}
 
// 인터페이스 implements
var person1 :Person= {
  name:"john",
  move:() => {}
}
 
var person2 :Person= {
  name:"john",
  age:42,
  move:() => {}
}
 
// 에러! 사용할수 없음, move 함수가 없고, age가 잘못된 변수형임
var person3 :Person= {
  name:"john",
  age:true
}
cs



2. 함수에 구조에 대한 명세를 하는 예제이다


1
2
3
4
5
6
7
8
9
interface SearchFunc{
  (source:string, substring:string) : boolean;
}
 
var mySearch : SearchFunc{
  mySearch =  function(src:string, sub:string){
    return src.search(sub) != -1;
  }
}
cs





클래스(Class)


실제 세계의 물체를 표현함, 객체라고 말할 수 있음.

 따라서 정보(변수)와 행동(함수)으로 이루어진다.

인터페이스와 혼동할 수 있지만 차이점은 constructor와 함수 내부의 내용을 꼭 써야한다는 점이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Point{
  x: number;
 
  constructor(x: number, public y :number = 0){
    this.x = x;
  }
 
  dist() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }
 
  static origin = new Point(00);
}
 
var point1 = new Point(1020);
var point2 = new Point(25);
cs


저작자 표시
신고

'프로그래밍 > 기타' 카테고리의 다른 글

[Typescript] 타입스크립트 문법  (0) 2017.08.27
[Typescript] 타입스크립트 개발환경 세팅  (0) 2017.08.27

타입스크립트




타입 스크립트는 언어(language)이다. 

superset이라고 해서 자바 스크립트의 기본적 문법과 모두 호환이 되고 그 위에 타입 스크립트만의 문법이 적용된다.

타입스크립트는 컴파일 언어(Traditional Complie Language)이다. 그러나 전통적 컴파일 언어와는 다르다. 

엄밀하게 말하자면 컴파일 언어와는 조금 다르다. 

좀 더 정확하게 말하자면 트랜스파일러의 느낌이 강하며, 예를 들어 Babel등이 이에 속한다. 

트랜스파일이 적용되면 다른 언어로 변환된다. 

미리 helper 함수가 구현되었기 때문에 타입스크립트를 컴파일하여 자바스크립트로 코드로 변환하면 코드가 길어진다. 

이것이 단점이지만, 보완하기위한 노력이 계속되고 있다.


C와 같은 컴파일 언어는 타입체크, 최적화, 링킹, 바이너리 생성 등의 일을 한다. 

타입스크립트도 컴파일 하는 시점의 특정 업무가 실행되는데, 가장 중요한 요점은 타입 체크이다. 

그래서 이름도 타입스크립트이다.


타입 스크립트를 이해하기전에 언어의 특성에 따른 구분을 알아보자

프로그래밍 언어는 정적 타입과 동적 타입이 있는데, 

정적 타입은 타입을 못박아놓고 시작하는 C와 같은 계열이며, 

동적 타입은 타입 자체가 변형되는 자바스크립트와 같은 계열이다. 

동적 타입의 단점은, 타입의 변환이 자동으로 이루어지기 때문에 디버깅이 어렵다는 것이며, 

이러한 단점을 보완하기 위해 타입 스크립트가 개발된 면이 있다.


타입스크립트는 리액트와 함께 사용하는 경우가 많다.

리액트를 타입 스크립트로 사용하면 초기 설정이 조금 복잡하고 짜증나지만, 

모듈 사용에나 다른 작업 과정에서 이점이 상당히 많다.


컴파일러는 nodeJS의 npm 모듈을 사용하거나, visual studio의 내장 기능을 사용한다. 

될수 있으면 nodeJS의 npm 모듈을 사용하자.





컴파일러 설치


1
2
3
4
5
6
7
8
9
10
npm i typescript -g
 
// package.json의 transpile을 다음과 같이 설정해준다
"scripts": {
    "transpile":"tsc",
    "test""echo \"Error: no test specified\" && exit 1"
},
 
// 사용법은 다음과 같다. tsc 이후 파일명을 입력하면 js파일로 변환이 된다.
tsc source.ts
cs





에디터 설치


vs code나 intelliJ, web storm을 사용한다. 

vs code는 타입스크립트로 만들어진 IDE이므로 강력한 지원이 된다. 

vs code는 타입스크립트의 새 버전이 나오면 해당 코드를 넣어서 새 버전을 릴리즈하면서 성장하고 있다. 

intelliJ도 같은 방식으로 타입스크립트가 내장되어있다.

개인적으로 vs code 사용을 선호한다.





tsc 설정 파일 생성


1
2
3
4
5
6
7
8
9
// 아래의 명령어 입력하면 tsconfig.json 파일이 생성된다.
// tsc 컴파일러의 초기 세팅을 하겠다는 뜻이된다.
tsc --init
 
// tsc --init을 입력했다면 앞으로 밑의 코드만 입력하면 된다.
tsc
 
// tsc에서는 왓치 모드를 사용할 수 있다. 변경되면 감지해서 새로 컴파일을 시켜주는 모드이다.
tsc -w
cs


초기에 config 파일을 만들면 3줄이 딸랑있다. 

target은 어떤 문법으로 변환할 것인지를 명시하는 키워드이다. 

예를 들어 es6나 es5등으로 변환이 가능하다. 

결과물이 어떤 module이 되는지 지정하는 키워드이다. 

초기에는 commonjs가 명시되어있다. strict는 타입 체크에 대한 설정이다.





내부 컴파일러


1
2
npm i typescript tslint
tslint --init
cs





tsConfig의 프로퍼티


  • json.schemastore.org/tsconfig 참조
  • compileOnSave, extends, complieOptions, files, include, exclude

  • compileOnSave : 파일을 저장하면 자동으로 저장하는 옵션(true/false)

  • extends : 설정을 확장함

  • complieOptions : 제일 많은 옵션 설정 프로퍼티

  • file : 상대 혹은 절대 경로의 리스트 배열, exclude 보다 강력함

  • include : exclude 보다 약함, *를 사용하면 .ts/.tsx/.d.ts만 include(allowJS)

  • exclude : 설정안하면 4가지(node modlues, bower componets, jspm pacages, )를 default를 제외한다.




저작자 표시
신고

'프로그래밍 > 기타' 카테고리의 다른 글

[Typescript] 타입스크립트 문법  (0) 2017.08.27
[Typescript] 타입스크립트 개발환경 세팅  (0) 2017.08.27

쿠키(Cookie)





Http는 stateless라는 특성을 가지고 있다.

즉, 상태가 유지 되지 않는다는 것인데, 우리가 흔히 사용하는 서비스에서 로그인 기능은

사용자의 상태를 저장하며, 이에 따라 표시하는 웹 페이지의 컨텐츠가 다르다.


그렇다면 상태를 보존하기 위해서 특정 기법을 사용한다는 것인데,

그 중 하나가 쿠키이다.


쿠키란, 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해

인터넷 사용자의 컴퓨터에 설치 되는 작은 기록 정보 파일을 일컫는다.

'쿠키'라는 이름의 어원은 동화인 '헨젤과 그레텔'에서 파생된 것이다.

이 동화에서는 지나온 길을 찾기 위해 주인공들이 쿠키 조각을 떨어뜨린다.

이처럼 쿠키를 통해 이전 상태를 파악할수 있도록 하는것이다.


다만 쿠키의 단점이라면, 보안상으로 상당히/굉장히/너무나 취약하다는 것이다.

이유는 사용자의 정보가 담긴 데이터를 서버와 클라이언트에서 주고 받기때문에

중간에 해커가 이 정보를 탈취하기라도 하면 큰일이기 때문이다.


따라서 실제로는 세션을 많이 사용하지만 우선 쿠키에 대한 예제 부터 살펴보도록하자.





카운터 예제


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express');
var app = express();
 
// 쿠키 기능을 위한 미들 웨어, npm  install로 설치 해야함.
var cookieParser = require('cookie-parser')
 
app.use(cookieParser());
 
// count 라는 쿠키를 저장하고 있다가 count경로로 접근할 때마다 1씩 증가
app.get('/count',function(req, res){
    // 쿠키가 없다면 초기화 있다면 쿠키값을 받아옴
    if(req.cookies.count){
        var count = parseInt(req.cookies.count);
    }else{
        var count = 0;
    }
    
    res.cookie('count',count+1);
    res.send('count: ' + req.cookies.count);
})
 
app.listen('3000'function(){
    console.log('server start on port 3000');
});
cs


예제를 통해 살펴보도록하자.

위의 코드는 쿠키값을 1씩 증가시키며 화면에 출력하는 예제이다.


우선 node js에서는 cookie-parser라는 미들웨어로 쿠키 확인한다.

app.use로 import 된 cookie-parser를 사용한다고 지정해 준다.


해당 미들웨어에서 쿠키는 res내부 cookie라는 메소드로 지정할 수 있다.

첫번째 인자로 쿠키의 이름을 받고 두번째로 값을 받는다.

또한 쿠키의 값은 req.cookies 객체 내부의 값으로 전달된다.

사용자는 이를 호출하여 사용이 가능하다.


따라서 우선 if 문으로 req.cookie.count 값이 있는지 판별한다.

만약 쿠키 값이 있으면 count 변수에 쿠키 값을 넣고, 없으면 0을 넣는다.


그리고 현재의 쿠키값을, 이전의 쿠키값+1로 수정하고,

브라우저에 현재 쿠키값을 전달한다.


이를 실행하면 새로고침 할 때 마다 표시되는 값이 1씩 증가함을 볼 수 있다.



참고 : 생활코딩, 서버사이드 node js

저작자 표시
신고

+ Recent posts

티스토리 툴바