전체 글

[javascript] 모듈(module)

Javascript에서 var변수를 선언하거나 함수를 정의하면 global에 등록되어서 window를 통해 곧바로 호출할 수 있습니다. 이게 문제가 될 수 있는건 중복되는 이름으로 변수나 함수가 선언되면 충돌을 일으킬 수 있다는 것입니다. 예를 들어 다음과 같이 a.js와 b.js에 공통적으로 add()라는 함수가 정의된 경우 function add(x, y) { return x + y; }; 중복되는 이름이 존재하기에 오류를 일으키게 됩니다. 이 문제를 해결하려면 각 js파일을 html페이지에서 모듈로 추가해야 합니다. 이렇게 하면 어떤 모듈에서 외부로 노출할 함수를 다음과 같이 export해야만 사용할 수 있게 됩니다. 그래서 a.js파일에 있는 add()함수를 아래와 같이 했다면 export def..

[TypeScript] 일반화 (Generic)

클래스나 함수에서 타입을 미리 결정짓지 않고 그것을 사용할 때 타입을 결정해 사용하는 것을 말합니다. let list = []; const Add = (x: number) => { list.push(x); }; Add(10); console.log(list[0]); 위 예제는 Add함수를 통해 list에 요소를 추가한 뒤 이를 보여주는 함수입니다. 그런데 Add를 보면 number만 받을 수 있습니다. 만약 string이나 기타 다른 형식이 다뤄져야 한다면 그에 맞는 형식의 배열과 변수를 모두 만들어야 한다는 뜻이 되지만 제네릭을 이용해 문제를 해결할 수도 있습니다. let list = []; function Add(x: T) { list.push(x); }; Add(10); Add('abc'); con..

[TypeScript] 객체지향 프로그래밍

※ Javascript에서의 객체지향과 크게 다르지 않습니다. TypeScript만의 객체지향을 말하는것이 아니니 주의해 주세요. 1. 클래스(Class) TypeScript에서 클래스는 아래와 같이 생성합니다. class Car { color: string = 'red'; speed: number = 0; Drive(acc): void { this.speed += acc; console.log('speed : ', this.speed); }; Stop(): void { this.speed = 0; console.log('stop'); }; }; const car = new Car(); console.log(car.color); Car라는 클래스는 color와 speed라는 멤버변수와 Drive(), S..

[TypeScript] 데이터 타입

1. 기본 타입 TypeScript에서 사용 가능한 기본 타입에는 number, string, boolean, undefined, null, unknown, any, void, never, object와 같은 것들이 있습니다. TypeSscript에서 변수를 선언할 때 타입을 지정할 수 있는데 아래 방법으로 변수를 선언하고 값을 할당할 수 있습니다. const mynum: number = 10; console.log(mynum); 물론 타입은 생략될 수 있습니다. 그러면 대입되는 값에 따라 타입이 자동으로 결정됩니다. 이를 타입 추론이라 하는데 함수를 사용할 때 매개변수나 반환되는 타입도 생략하면 매개변수는 any나 반환 형태는 return 되는 값의 타입에 따라 자동으로 결정됩니다. let myValu..

[TypeScript] 개요및 준비

1. 개요 TypeScript는 아주 간단하게만 말하면 Javascript에서 문제가 되었던 동적 타입과 OOP의 문제를 보완한 것이라고 생각하면 됩니다. 동적 타입이 아닌 정적 타입을 사용하고 OOP(Object Oriented Programming) 개념을 도입해 OOP의 프로그래밍 이점을 그대로 가져갈 수 있습니다. 동적 타입의 가장 큰 문제점은 오직 실행단계에서만 오류를 확인할 수 있다는 것입니다. 기존의 javascript는 다음과 같은 처리가 가능합니다. var i = 10; i = 'abc'; 변수에 대입되는 값의 형태에 따라 변수의 타입이 결정되는 방식이기에 여기까지는 아무런 문제 없이 지나갈 수 있습니다. 그런데 var i = 10; i = 'abc'; var j = 10 + i; 위와 ..

[node.js] CORS

CORS는 Cross-origin resource sharing으로 직역하자면 교차 출처 리소스 공유를 의미합니다. 예를 들어 http://cliel.com에서 API를 서비스하는데 다른 도메인(ex:: https://www.daum.com)에서 cliel.com 서비스에 접근하여 특정 API를 호출해 원하는 데이터를 가져가게 되면 그것이 이 CORS인 것입니다. 그런데 사실 위와 같은 동작은 실제로 그대로 적용되지 않습니다. 한쪽에서 다른 쪽으로 API 호출을 시도하면 도메인이 다른 경우 서버가 아닌 웹브라우저에서 보안상 CORS오류를 발생시키기 때문입니다. node.js에서 정확히는 웹에서 이러한 문제를 해결하기 위해서는 API호출을 웹페이지에서 하는 게 아니라 서버에서 호출하도록 만들고 그 결과를 ..

[node.js] socket.io

1. 설치 및 사용 socket.io는 클라이언트 웹브라우저와 스켓 통신을 하는 모듈입니다. WebSocket에서는 통신에 필요한 대부분의 기능을 직접 구현해야 하지만 socket.io는 이미 여러 가지 기능이 만들어져 있으므로 사용하기만 하면 됩니다. 기존 WebSocket을 기반으로 하여 몇 가지 편의성을 추가한 거라고 생각하면 되겠습니다. 특히 개별적인 이벤트를 통한 메세지송수신기능과 특정 클라이언트를 구별하는 id기능을 제공해주므로 활용도가 높은 편입니다. 하지만 각 클라이언트의 구별이 필요 없는 환경이라면 굳이 socket.io를 사용할 이유는 없습니다. socket.io는 이전에 만들어둔 WebSocket을 기반으로 socket.io를 적용해 보고자 합니다. 그러니 해당 포스팅에서 설명된 모든..

[node.js] WebSocket

웹소켓을 사용하면 웹브라우저를 실행 중인 클라이언트와 실시간으로 데이터를 주고받을 수 있습니다. 1. 준비 우선 웹소켓을 사용하는 예제를 작성해 보기 전에 node프로젝트를 준비합니다. 아래와 같이 주 진입점인 app.js를 생성하고 const express = require('express'); const app = express(); app.set('port', 80); app.use((req, res, next) => { next(); }); const indexRouter = require('./default'); app.use('/', indexRouter); app.use(function(err, req, res, next) { console.error(err); res.send('에러가 발생..