Programming 97

WebSocket과 Socket.IO

WebSocket - 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜 - 2011년 IETF에 의해 RFC6455로 표준화 - 웹 IDL의 웹소켓 API는 W3C에 의해 표준화 - 클라이언트가 요청을 해서 응답을 받는 방식이 아닌, 서버가 내용을 클라이언트에게 보내는 표준화된 방식을 제공 - 연결이 유지된 상태에서 메시지들을 오갈 수 있게 허용 -- HTTP 폴링과 같은 반이중방식에 비해 더 낮은 부하를 사용하여, 웹 브라우저와 서버간의 통신 가능 -- 서버와의 실시간 데이터 전송 용이 - 양방향 대화 방식 (클라이언트 서버) - 통신은 TCP 포트 80, 443(TLS 암호화 연결의 경우)를 통해 수행 - 방화벽을 통해 인터넷 연결을 차단하늩 일부 환경에 도움이 됨 - 대부분의 ..

[TypeScript] Type Annotation

Type Annotation TypeScript는 type이 있는 언어 (※ JavaScript는 loosely typed 언어, dynamic 언어 - 타입 지정이 필요 없고, 같은 변수에 여러 타입의 값을 넣을 수 있음) 변수나 함수, 객체 속성의 데이터 타입을 지정 변수명, 함수명, 객체 속성명 뒤에 : type 을 써서 데이터 타입을 지정 TypeScript는 JavaScript의 primitive type(number, string, boolean)을 사용 가능 Type annotation을 사용하여 type 검사를 수행 필수사항 X 사용 시 장점 컴파일러가 type을 확인하는 데에 도움 data type을 처리하는 오류 방지에 도움 협업을 할 때 읽기 쉬운 코드가 됨 유지보수에 장점 예제 //..

[JavaScript] map, for...in, for...of, forEach문

map() - 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 구문) arr.map(callback(currentValue[, index[, array]])[, thisArg]) paramter callback - 새로운 배열의 element를 생성하는 함수 currentValue : 현재 처리할 element index (Optional) : 처리하는 현재 element의 index array (Optional) : map()을 호출한 배열, 원래 배열 thisArg (Optional) - callback을 실행할 때 this로 사용되는 값 return value 배열의 각 element를 callback 수행 후 나온 결과를 순서대로 모든 새로운 배열 예제) ..

[JavaScript] closure (클로저) 란?

클로저(closure) 함수와 함수가 선언된 어휘적 환경의 조합 엥 이게 무슨 말이지;; mdn 도와줘!!! 소스코드로 이해를 해보자. 예제) function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); //myFunc변수에 displayName을 리턴함 //유효범위의 어휘적 환경을 유지 myFunc(); //리턴된 displayName 함수를 실행(name 변수에 접근) - "displayName()"이 실행되기 전에 "makeFunc()"에 의해 "displayName()"이 return되어 "myFunc" 변수에 저장됨 (클로저..

[Angular] Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '' 해결 방법

URL parameter에 특수기호가 들어있으면 router 설정을 제대로 해줬다고 생각이 들어도 다음과 같은 에러가 발생할 수 있다. 나 같은 경우는 ( ) 위 괄호들이 문제를 일으켜 다음과 같은 에러를 뱉고, 페이지가 그려지지 않았다. ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'MSBlaster%2520Worm,%2520Messenger...' Error: Cannot match any routes. URL Segment: 'MSBlaster%2520Worm,%2520Messenger...' at ApplyRedirects.webpackJsonp../node_modules/@angular/route..

Array.prototype.splice() 사용법

Array.prototype.splice() - 배열의 기존 element를 [ 삭제 / 교체 / 추가 ]하여 배열의 내용을 변경 - 제거할 element의 수와 추가할 element의 수가 다른 경우 배열의 길이는 달라짐 문법 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) Parameter start - 배열의 변경을 시작할 인덱스 - 음수인 경우 array.length - n번째 인덱스와 동일 - 설정한 값이 배열의 길이보다 클경우 0으로 설정 deleteCount (옵션) - 배열에서 제거할 element 개수 - 해당 값을 생략하거나 값이 (array.length - start)보다 크면 start 부터의 모든 요소를 제거 - 0이하이면..

Strict mode(엄격 모드), use strict 란?

Strict mode (엄격모드) - ECMAScript 5에서 소개됨 - JavaScript의 제한된 버전을 선택하여 암묵적인 느슨한 모드(Sloppy mode)를 해제하기 위한 방법 특징 - 엄격모드를 지원하지 않는 브라우저(Internet Explorer 10 버전 이하)에서는 엄격 모드의 코드가 다른 방식으로 동작 (그렇기 때문에 엄격 모드에 의존하면 안됨) - 엄격모드의 code와 비엄격모드의 code는 공존 가능 => 엄격 모드를 일부만 선택하는 것이 점진적으로 가능하게 됨 - 전체 스크립트 또는 부분 함수에 적용 가능 - {} 괄호로 묶여진 block 문, context에 적용되지 않음 엄격모드 사용 시 JavaScript symantic의 변화 1. 기존에 조용히 무시되던 에러들이 thro..

반응형