Ch 1.2 네트워크 가장 자리

종단 시스템은 웹브라우저 프로그램 웹서버프로그램 전자 메일 클라이언트 프로그램 또는 전자메일 서버 프로그램 같은 애플리케이션을 수행하므로 호스트 라고도 불린다.

• 종단 시스템들은 데스크톱 컴퓨터, 서버, 모바일 컴퓨터 등을 포함한다.
• 호스트는 클라이언트와 서버로도 구분된다.

1.2.1 접속 네트워크

​ 접속네트워크는 종단시스템을 그 종단시스템으로부터 다른 먼 거리의 종단시스템까지의 경로상에 있는 첫번째 라우터에 연결되는 네트워크 경로

가정접속 : DSL, 케이블, FTTH, 다이얼-업 그리고 위성

• DSL(digital sub-scriber line) : 각 고객의 DSL 모뎀은 텔코의 지역 중앙국에 위치한 DSLAM(digital subscriber line access multiplexer) 과 교환하기 위해 기존 전화 회선을 이용한다.
  • DSL 모뎀은 디지털 데이터를 받아서 전화서를 통해, 지역 중앙국(CO)로 전송하기 위해 고주파신호로 변환한다.
  • DSL은 다른 주파수 대역으로 인코드 되어, 3개의 분리된 링크인 것처럼 보이게한다. 그래서 하나의 전화회선과 인터넷 연결이 동시에 DSL 링크를 고유할수 있게된다.
  • DSL은 고객쪽에 스플리터가 있어, 데이터와 전화신호를 분리하고, 데이터신호를 DSL 모뎀으로 전송한다.
• 케이블 인터넷 접속 : 케이블 TV회사의 기존 케이블 TV 기반구조를 이용한, 인터넷 서비스이다.
  • 광케이블은 헤드엔드를 이웃-레벨 정션에 연ㄴ결하며, 여기 광 노드에서 각 집에 도착할때까지는 전통적인 동축케이블을 사용한다.
  • 케이블 헤드엔드의 CMTS(cable modem termination sysyem)은 DSL의 DSLAM와 유사한 기능을 한다.
  • 케이블 인터넷 접속은 공유 방송매체이므로, 모든 패킷은 모든 링크의 다운스트림 채널을 통해 모든 가정에 전달되며, 업스트림 또한, 모든패킷이 업스트림 채널을 통해 헤드엔드로 간다.
  • 그러므로,각 사용자가 비디오파일을 동시에 수신하고 있다면, 실제 수신율은 다운스트림 전송율보다 상당히 낮아진다.
  • 그래서 분산 다중 접속 프로토콜로 전송을 조정하고, 충동을 피하기 위한 노력이 필요하다.
• FTTH(Fiber to the Home) : CO(지역 중앙국)으로 부터, 집까지 광 성유 경로를 제공한다.
  • CO(중앙국)에서 하나의 광섬유로 와서, 고객이 있는곳에서 분리가 되어, 제공이된다.
  • 위와 같은 기술을 스플리팅으로 하며, AON(active optical network)과 PON(passive optical network)이 대표적이다.

기업접속 : 이더넷과 와이파이

• 이더넷은 기관에서 이더넷 스위치를 통해, 연결하고 기관 라우터를 통해 기관 IPS로 제공된다.
• 와이파이는 유선으로 연결된 AP의 수십미터 반경에서 무선으로 클라이언트와 연결이 된다.

1.2.2 물리 매체

• 물리매체는 전자파나 광펄스를 전파하여 비트를 전송하는 매체를 의미한다.
  • 유도매체와 비유도매체가 있다.
    • 유도매체 : 광섬유케이블 꼬임쌍선, 동축케이블 (견고한 매체를 따라 파형을 유도)
    • 비유도 매체 : 무선 lan 혹은 디지털 위성채널(대기와 야외공간으로 파형을 전파)
• 꼬임 쌍선
  • 가장 싸고 가장 많이이용하는 전송매체
  • 전화망에서 자주 사용된다.
  • 2개의 절연동선이 각각 약 1mm의 굵기로 규칙적인 나선형태로 배열된다.
  • 꼬임 쌍선의 데이터 전송률은 10Mbps 에서 10Gbps에 이른다.
  • 데이터 전송률은 전송선의 두께와 송신기와 수신기 사이의 거리에 따라 다르며, 짧은 수백m의 거리에서는 광섬유에 비견될 정도로 10Gbps의 속도를 낼수 도 있다.
• 동축 케이블
  • 꼬임쌍선 처럼 동축케이블은 2개의 구리선으로 되어있으나, 두 구리선이 평해하지 않고 동심원 형태를 이루고 있다.
  • 일반적으로 꼬임 쌍선보다 더 높은 데이터 전송률을 얻을 수 있다.
  • TV시스템에 흔히 사용된다.
  • 동축케이블은 유도 공유매체로 사용할 수 있다. 여러 종단시스템은 케이블에 직접 연결할 수 있고, 모든 종단시스템은 다른 종단시스템이 전송하는 모든것을 수신한다.
• 광섬유
  • 비트를 나타내는 빛의 파동을 전하는 가늘고 유연한 매체이다.
  • 단일 광성유는 10~100기가의 전송률을 가지며, 100KM까지느 신호 감쇠현상이 적고, 전자기성 간섭에 영향을 받지 않으며, 도청하기 어렵다.
  • 인터넷의 백본과 해저케이블에 자주 쓰인다.
  • 그러나 송,수신기, 스위치의 광장비가 고가이므로, 랜이나 가정처럼 근거리 전송에는 이용하기 어렵다.
• 지상 라디오 채널
  • 라디오 채널은 전자기 스팩트럼으로 신호를 전달한다.
  • 물리선로를 설치할 필요가 없고, 벽을 관통할수 있으며, 이동 사용자에게 연결성을 제공하고 먼거리 까지 신호를 전달할수 있다.
  • 주변환경에 영향과 전달되는 거리에 많은 영향을 받아, PATH LOSS(경로 손실)과 shadow fading(경로상의 손실), 다중경로 페이딩, 간섭을 받을 수 있다.
• 위성 라디오 채널
  • 정지위성과 저궤도 위성을 통해 통신을 하는 시스템
    • 정지 위성은 보통 DSL접속 또는 케이블 기반 인터넷접속을 할수 없는 지역에서 이용된다.
    • 정지위성은 긴 신호 전파 지연을 일으키는 단점이 있다.
    • 저궤도위성은 지구 위 한곳에 고정되지 않고, 지상국뿐만 아니라, 자기들끼리도 통신이 가능하다. 많은 저궤도 통신시스템이 개발 중에 있다.

컴퓨터 네트워킹 하향식 접근

Chapter 1 컴퓨터 네트워크와 인터넷

1.1 인터넷이란 무엇인가?

1. 인터넷의 구성요소를 기술하는 방법 ( 인터넷을 구성하는 기본적인 하드웨워와 소프트웨어 요소를 기술)
2. 분산 애플리케이션에 서비스를 제공하는 네트워킹 인프라 관점에서 인터넷을 기술하는 것

1.1.1 구성요소로 본 인터넷

• 인터넷에 연결되는 모든 장치는 호스트 혹은 종단 시스템(end system) 이라 부른다.

• 종단시스템은 통신 링크(Communication Link)와 패킷 스위치(packet switch)의 네트워크로 연결된다.

• 통신링크 : 동충 케이블, 구리선 광 케이블, 라디오 스펙트럼 등을 포함한 다양한 물리매체

  • 각각의 링크들은 다양한 전송률을 이용하여, 데이터를 전송한다.

• 한 종단시스템에서 다른 종단 시스템으로 보낼 데이터를 가지고 있을때, 그 데이터를 세그먼트로 나누고, 각 세그먼트에 헤더를 붙인다.

• 이렇게 만들어진 정보 패키지를 패킷(packet)이라고 부른다.

• 패킷을 목적지 종단 시스템으로 보내지고, 목적지에서 재 조립이 된다.

• 패킷을 전달해주는 패킷 교환기는 라우터 와 링크 계층 스위치가 있다.

  • 라우터 : 네트워크 코어에서 사용
  • 링크 계층 스위치 : 액세스 네트워크에서 사용

• 종단 시스템은 *ISP(Internet Service Provider) *를 통해 인터넷에 접속한다.

  • ISP은 다양한 네트워크들이 있고, ISP 네트워크는 따로 관리되고, IP 프로토콜을 수행하며, 네이밍, 주소배정 방식을 따른다.

• 인터넷의 구성요소들은 인터넷에서 정보 송수신을 제어하는 프로토콜을 수행하며, TCP, IP가 가장 유명한 프로토콜이다.

  • IP 프로토콜 : 라우터와 종단시스템 사이에서 송수신되는 패킷 포맷

1.1.2 서비스 측면에서 본 인터넷

애플리케이션에 서비스를 제공하는 인프라 구조로 인터넷을 기술한 방법

• 서로 데이터를 교환하는 많은 종단 시스템을 포함하고 있는 애플리케이션을 분산 애플리케이션 이라고 부른다
  • 인터넷 애플리케이션들은 종단시스템에서만 수행된다. 즉, 패킷교환기에서는 수행이 되지 않는다.
  • 패킷교환기들은 종단시스템 간의 데이터 교환을 쉽게 해주지만, 이 애플리케이션이 무엇을 하는지 관심이 없다.
• 소켓 인터페이스 : 인터넷에 접속된 종단시스템에서 한 종단시스템에서 다른 종단시스템에서 수행되는 특정 목적지 프로그램에게 데이터를 전달하도록 요구사항을 명시되어있는 것
  • 예를 들면, 우편 서비스를 이용을 할때, 봉투에 우편을 붙이고, 봉투에 편지를 넣은뒤, 그 봉투를 우체통에 넣는 이 과정을 우편 서비스 인터페이스라고 한다.
  • 즉, 송신프로그램이 데이터를 목적지 프로그램에 전달할수 있도록 따라야하는 과정이 소켓 인터페이스이다.

1.1.3 프로토콜이란 무엇인가?

​ 프로토콜은 둘 이상의 통신 개체 간에 교환되는 메시지 포맷과 순서 뿐 아니라, 메시지의 송수신과 다른 이벤트에 따른 행동들을 정의한다.

ex ) 혼잡제어(congestion - contral) 프로토콜 : 종단 시스템에서 송수신자 간의 전송되는 패킷률을 조절한다.

​ 라우터에서의 프로토콜 : 송신지에서 목적지까지 패킷의 경로를 설정한다.

3일차

1. 비교 연산자

1.1 비교 연산자

• 비교 연산자는 불린형을 반환한다.

• 문자열을 비교할때, 유니코드 순으로 비교를 하고, 뒤쪽의 문자열 일수록 크다고 생각한다.

• 각 위치별로 비교를 하고, 한쪽이 크면 큰 곳의 값을 반환하고, 종료한다.

• 만약 비교가 종료되었는데도, 동일하고 한쪽 문자열의 길이가 더 길다면, 긴 문자열이 더 크다고 결론 낸다.

  alert('B'>'C') //false
  alert('BEE'>'BE') //true

• 만약 다른형을 가진 값끼리 비교를 했을 때에는, 이 값들을 숫자형으로 변환 뒤 비교를 한다.

  alert('2'>1) //true
  alert('0'==0) // true
  alert(true == 0) //false

• 문자열 '0'은 Boolean으로 판단시 false가 나오지만, 비교연산자로 0과 비교시 true를 반환한다.

  • 그 이유는 위의 설명과 같이 문자열을 숫자형으로 바꿔서 비교했기 때문이다.

1.2 일치 연산자

• 비교연산자 중 비교 연산자는 0과 false를 구분하지 못하므로, 좀더 엄격하게 비교를 할때에는 일치 연산자 를 사용하여, 값을 비교한다.
• 일치연산자나 불일치연산자(!==)를 사용하면, 형변환 없이 값을 비교할 수 있으므로, 좀 더 엄격하게 비교할때 사용이 된다.

1.3 null과 undefined

• null과 undefined를 일치연산자를 하면, 자료형이 달라서 false를 반환하지만, 동등연산자인 ==를 하면 true를 반환한다.

alert(null == undefined)  // true
alert(null === undefined )//false

• 그러나, 비교연산자를 이용해 null은 0으로 변환, undefined는 NaN으로 변환된다.
• null과 undefined는 동등연산자 ==일때는 형변환을 하지 않고, 비교연산자인 >= ,>일때는 형변환을 한다.

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

• undefined와 null은 동등연산자에서 null이나 undefined가 아니면 false를 반환한다.

2. if와 '?'를 사용한 조건 처리

2.1 if문

• if문은 괄호안의 조건을 평가해, 그 결과가 true라면 코드 블록을 실행한다.
• if문은 괄호안의 조건을 불린값을 변환한다.
  • 0,"",null,undefined,NaN 값은 false로 변환, 그 외의 값은 true로 반환한다.
• if문의 코드블록은 단 한줄이더라도 {}중괄호롤 감싸는걸 추천한다.

2.2 else 문

• else문은 if문 안의 조건이 false일 때 실행된다.

2.3 else if 로 복수 조건 처리하기

• 다수의 조건을 처리할 때, if문 뒤에 else if문을 더 붙여 조건을 판단한다.

2.4 조건부 연산자 ?

• 조건부 연산자는 if문을 좀 더 간결하게 표현가능하다.

  let result = condition ? value1 ? value2
  // condition이 참이면, value1을 반환, 거짓이면 value2를 반환

2.5 다중 ?

let result = (condition1) ? value1 : 
(condition2) ? value2 : 
(condition3) ? value3 :
value4;

• 위의 예시의 같은 경우 codition1이 참이면 value1, 거짓이면 두번째 condition2로 간다.
• condition2가 참이면 value2를 거짓이면 condition3로 간다.
• condition3이 참이면 value3 거짓이면 value4를 반환한다.

if (condition1) {
    result = value1
} else if (condition2){
    result = value2
} else if (condition3) {
    result = value3
} else{
    result = value4
}

• 위의 다중 ?은 다음과 같이 나타낼수 있다.

Appendix

• 조건부 연산자 ?를 남용하지 말고, 조건에 따라 다른 반환값을 할당해야할때만 쓰는 것을 추천한다.

3. 논리 연산자

• 논리연산자에는 `||`(OR),`&&`(AND),`!`(NOT)이 있다.

• `OR`와 `AND`는 파이썬과 같은 단축평가를 한다.

• `OR`연산자는 가장 첫번째 `truthly`인 피연산자를 반환하고, 만약 전부 `false`일시에는 마지막 피연산자를 반환한다.

alert(""||0||5) //5
alert(""||5||0) //5

• `AND`연산자는 `OR`과 반대로 첫번쨰 `falsy`인 피연산자를 찾는다. 첫번쨰 `falsy`인 피연산자를 반환하고, 만약 전부 `true`일 시에는 마지막 피연산자를 반환한다.

alert(5&&0&&3) // 0
alert(5&&4&&2) //2

• `AND` 연산자가 `OR` 연산자보다 우선순위가 높다.

• `Not`연산자는 느낌표인 `!`을 쓰는데, 먼저 피연산자를 불린형으로 변환후 이에 반대되는 값을 반환해준다.

• 위와 같은 특징을 이용하면, `!!` 와 같이 `Not`연산자를 두개 연속으로 쓸시에는 `Boolean` 함수를 쓴것과 동일한 효과를 나타낸다.

• `Not`은 논리연산자 중 가장 높은 우선순위에 있다.

4. null 병합 연산자

• 병합연산자인 ``??``를 사용하면, 짧은 문법으로 그 값이 **확정되어있는** 변수를 찾을수 있다.

  x = a ?? b
  x = (a !== null && a!== undefined) ? a : b;

• 위의 두 로직이 같다고 할 수 있다.

• `??`와 `||`(OR)와 비슷하다고 생각할 수 있지만, `||`는 첫번쨰 `truthy` 값을 반환하는데 반해 `??`은 **정의된** 값을 반환하는게 다르다.

alert(0 || 100) // 100
alert(0 ?? 100) // 0

• `OR`연산자는 숫자 0 은 `false`이므로, 100을 반환해주고, `??`은 연산자는 0이라는 정의되므로, 0을 반환해준다.

• `??`연산자는 `||`와 `&&`연산자와 동시에 사용하는것을 금지한다! 함께 사용시 문법에러가 발생한다.

3일차 소감

• 잘 모르던 null 병합연산자와, `?`을 이용한 다중 조건 처리

• 일치 연산자에서 `null`과 `undefined`의 동작방식에 대해 잘 알 수 있었다.

출처 : 모던 자바스크립트 튜토리얼

지금까지 자바스크립트를 수박 겉핥기 식으로 배우고 기본적인 Array, Object 메소드들만 외우고, 사용했었는데

Vue를 이용했을때에는, 컴포넌트, 메소드, 상태관리에 대한걸 vue, vuex 등이 전부 관리해주어서, 자바스크립트에 대한

심화적인 공부를 안했는데, 카카오커머스 2차 과제를 준비하면서 컴포넌트 및 상태관리를 구현하다보니

자바스크립트에 대한, 심화적인 공부가 필요하다는 걸 느꼈다.

그래서 Vanliia Javascript에 대해 처음부터 다시 공부해보는 시간을 가질려고 한다.

이렇게 글이라도 안쓰면, 언제까지고 안할것 같아서 일단 저지르고 본다.

일단 자바스크립트 공부는  developer.mozilla.org/ko/docs/Web/JavaScript와 ko.javascript.info/ 를 공부하면서 

그걸 나름대로 정리해서 올리겠다. 공부한걸 정리한 포스팅이 주를 이룰것 같고,

자세한 설명은 위 두사이트를 찾아가는걸 추천하겠다.