전체 글172

• 

  [Network] 프로토콜 스택이란 무엇인가? 네트워크에 대한 설명을 할 때, 빠지지 않는 것이 있다면 'OSI(Open System Interconnection) 7계층 참조 모델'과 'TCP/IP Protocol'입니다. 둘 다 계층형 구조로 네트워크를 설명한다는 공통점이 있지만, TCP/IP 프로토콜의 계층은 OSI 모델의 계층과 정확하게 일치하지 않습니다. OSI 표준 모델은 장비 개발과 통신 자체를 어떻게 표준으로 잡을지 사용되는 반면, 실질적인 통신을 설명할 땐 TCP/IP 모델을 주로 사용하곤 합니다. 그 중 오늘은 프로토콜 스택에 대해서 알아보겠습니다. 프로토콜 스택이란 데이터 통신에 활용되는 프로토콜의 구조에 관한 개념으로, 계층화된 구조(스택 구조)로 모여 있는 프로토콜의 집합을 의미합니다. 프토토콜 슈.. CS 2020. 11. 17.

• 

  (TIR+3) ② OS에 HTTP 메시지를 송신하기 위해 웹 서버의 IP 주소를 DNS 서버에 조회한다 지난 시간에는 URL에 관하여 알아보았다. 이번 시간에는 브라우저가 URL을 해독하는 방법에 관하여 알아보도록 하자. ⅰ. 브라우저는 웹 서버에 보내는 메시지를 작성하기 위해 URL을 해독한다. ⅱ. 브라우저는 OS에 HTTP 메시지를 송신하기 위해 웹 서버의 IP 주소를 DNS 서버에 조회한다. ⅲ. 브라우저는 OS의 프로토콜 스택에 메시지 송신을 의뢰하며, ⅳ. OS는 데이터의 송/수신 동작을 실행함으로써, 브라우저에게 수신한 정보를 전달한다. 그리고 URL을 통해 원하는 웹 사이트의 정보를 열람할 수 있는 까닭은 다음과 같다고 이야기했다. 웹 클라이언트인 웹 브라우저는 웹 서버로부터 정보(html, css, javascript 파일들)를 받아와, 화면에 해당 정보들을 표시해준다. 이 때 사용되는 네.. CS/Network 2020. 11. 16.

• 

  [Fintech] 핀테크와 테크핀이란 무엇인가? 앞으로 블로그에서 핀테크와 관련된 기술들을 일주일에 하나씩 정리하는 시간을 갖을 것이다. 과거에 내가 공부하였던 '경제학'과 현재 공부하고 있는 'IT' 기술들을 접목시킬 수 있는 분야가 핀테크이기 때문이다. 핀테크란 Finanance와 Technology의 합성어이다. 핀테크는 기존의 금융회사에서 제공하던 송금, 계좌개설, 대출 등의 금융서비스들을 IT 기술을 통해 스마트폰 하나로도 이용할 수 있도록 사용자에게 서비스를 제공한다. 비대면 계좌 개설 서비스를 예로 들어보자. 이는 과거에는 직원과 직접 만나서 해결하여야 할 문제였다. 하지만 보안기술의 발전으로 가능하게 됐다. 테크핀은 핀테크와는 조금 다른 맥락에서 나온 단어이다. 이는 기술 중심의 기업에서 기술을 중심으로 금융 서비스를 제공하는 것에 조금.. 취ㆍ창업ㆍ투자ㆍ칼럼/핀테크 2020. 11. 15.

• 

  [JavaScript] Scroll Event에 자주 쓰이는 변수/메소드 정리 .offsetTop( ) : 해당 HTML 요소의 Y좌표 위치 반환 .scrollY : 현재 스크롤의 Y좌표 위치 반환 .scrollTo( X좌표, Y좌표 ) : 파라미터로 받아온 X, Y 좌표로 스크롤을 이동시킴 Language/JS(Node.js) 2020. 11. 13.

• 

  [CSS3] Animated Sidebar 만들기 이 효과 역시도, :checked를 활용하면 간단하게 만들 수 있다. 기본정보 1. Animation과 연관된 속성으로 transition과 tranform이 있다. 2. Transform은 화면 상에서의 위치, 크기, 회전각도 등을 조절한다. 각각 translate(X, Y), scale, rotate를 사용함으로써 가능하다. 그 외에도 matrix, matrix 3d, perspective, perspective-origin, transform-origin, transform-style를 사용할 수 있다. 3. Transform이 변화를 주는 요소였다면, Transition은 변화가 일어나는 속도, 변화시킬 요소, 움직이는 방법을 결정할 수 있다. 1) :checked 이전 사이드바로 활용할 요소를 .. Web/CSS 2020. 11. 12.

• 

  [JavaScript] 객체란 무엇인가? 객체란 무엇인가? 자바스크립트에서 객체는 여러모로 쓸모가 많다. JSON 파일에서 전송되는 데이터도 객체이고, DOM 조작에 활용되는 document와 BOM 조작과 관련된 전역객체인 Windows 역시 객체이다. 또한 객체지향 프로그래밍으로 소프트웨어를 설계할 때에도 활용되는 것이 객체이다. 객체의 의의 객체란 현실의 사물을 프로그래밍적으로 표현하기 위하여, 활용되는 수단이다. 예를 들어, 나(이준호)라는 사람을 객체로 표현한다면 다음과 같이 표현할 수 있을 것이다. juno라는 객체를 만들고 그 안에 각각 firstname(변수), lastname(변수), body(객체), hobby(배열), eat(함수), boxing(함수), cooking(함수)를 넣었다. 즉, 나라는 객체 안에 사람이 할 수 .. Language/JS(Node.js) 2020. 11. 12.

• 

  [CSS] 버튼 클릭으로 메뉴 화면 보이기/감추기 서론 대상독자 HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자 본론 구현방법 먼저, 정답은 아주 간단합니다! CSS 가상선택자 :checked 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 input의 type을 checkbox을 생성하고 유동적으로 화면에 보여줄 HTML 태그에 대해, 기본 속성으로 display : none을, :checked 상태에서 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!! 또 display: none 처리된 Input 태그를 클릭하기 위해 label 태그를 추가해주고 속성으로 for에 input에 대한 name을 추가하면 됩니다. 그럼 label 태그를 클릭할 때마다, 보여주고 싶은 영역이 사라졌다 .. Web/CSS 2020. 11. 11.

• 

  [Network] 인터넷과 음성통화 그리고 웹 우리는 일상 속에서 인터넷과 웹을 거의 구분하지 않고 생활하는 것 같다. 웹서핑을 할 때, 흔히 "인터넷을 한다"고 이야기하는 걸 보면 말이다. 오늘 그 차이에 대해서 구분짓고 넘어가보자. 인터넷과 음성통화 먼저 인터넷을 알기 위해서는 네트워크에 대하여 알아야한다. 네트워크란 흔히 컴퓨터 네트워크를 말하며, 이는 여러 컴퓨터가 각각 클라이언트와 서버로써 서로 연결되어 구성된 망을 말한다. 인터넷은 이러한 컴퓨터 네트워크가 전 세계적인 규모로 수없이 많이 모여서 이루어진 일종의 컴퓨터 네트워크 시스템이다. 즉, 인터넷이란 수많은 클라이언트 컴퓨터와 서버 컴퓨터, 그리고 이들로 구성된 네트워크들의 집합체이다. 네트워크의 원리는 전화와 같은 무선통신의 원리를 따져보면, 간단하다. 음성통화에서의 통신 방식 발신.. CS/기타 2020. 11. 11.

• 

  [HTML] HTML 요소들 정리하기 : 구획, 메타데이터, 멀티미디어 등 이미 HTML5에 대해 여러 차례 다룬 바 있지만, 전체적인 관점에서 조망할 기회는 없었기에 이번 글을 통해서 정리하고자 한다. 오늘은 현재 HTML5를 구성하는 요소들을 전부 살펴보며, 알지 못했던 부분들이 있으면 채우고 알고 있던 부분들은 더욱 자세하게 알기 위하여 글을 작성하겠다. 먼저 HTML(Hyper Text Markup Language)이란 웹 사이트의 기본 정보에 속하는 마크업 언어이다. Hyper Text란 간단히 말하여, 링크와 같이 다른 사이트를 참조할 수 있는 형식의 문자를 말한다. 웹에서 수많은 정보들이 연관되고 참조되는 모습을 우리는 쉽게 상상할 수 있으리라. 또한 마크업 언어란 와 같이, 여는 태그와 닫는 태그로 이루어진 것들을 말하며, 아래와 같이 태그 안에 들어가는 정보와 .. Web/HTML 2020. 11. 11.

• 

  [Computer Science] 하드웨어의 한계, JavaScript에서의 부동소수점 컴퓨터는 저장공간에 한계가 있기 때문에 특정 값보다 큰 숫자나 작은 숫자는 표현할 수 없다. 예를 들어, float는 32비트를 사용하는데 double은 64비트를 사용한다. 32비트를 사용하는 float의 경우에는 2^31 - 1(대략 20억)까지 저장할 수 있으며, 64비트를 사용하는 doblue의 경우에는 2^61-1까지 저장할 수 있다. 결국 컴퓨터가 저장할 수 있는 정보는 유한한다. 반대로 소숫점의 경우를 생각해보자. float x = 1 , float y = 10으로 두고 x / y를 나누면 소숫점 27번째 자리까지만 표현할 수 있고, 그 이상은 0으로 치환시켜 보여준다. 이는 컴퓨터는 계산할 수 있는 값들 중 1/10에 가장 가까운 값을 저장한 것이다. 왜냐하면 유한한 정보를 사용해서는 무한.. CS/기타 2020. 11. 10.

• 

  [WEB] Adobe Flash Player와 HTML5 & WebGL 플래시 플레이어는 1996년에 처음으로 출시되었다. 처음에는 FutureWave Software라는 회사에서 애니메이션을 만들기 위한 소프트웨어(벡터 애니메이션을 표현할 수 있도록 지원한 제품)였다. 그러나 96년 MacroMedia라는 회사에서 FutureWave사를 인수하면서, 브라우저 상에서 동작할 수 있도록 플러그인(웹 브라우저의 일부로서 쉽게 설치되고 사용될 수 있는 프로그램을 말한다. 넷스케이프 브라우저를 통해 사운드나 동영상을 재생하거나, 기타 다른 기능들을 수행해주는 추가 프로그램들을 다운로드하여 설치하고 또 정의할 수 있도록 한 것이 그 시초이다) 형태로 바뀌었고, 이는 곧 웹 디자인 영역에서 활발하게 쓰이기 시작했다. MacroMedia사에서 ECMA스크립트 기반의 액션스크립트 (AS).. Web/HTML 2020. 11. 10.

• 

  [HTML] Doctype(Document Type)과 개방형 웹 플랫폼 HTML5 HTML은 버젼마다 제공하는 태그들이 다른데, 각 버젼에 따른 Doctype을 선언해줌으로써 HTML의 버젼을 알려준다. Doc의 Document를 HTML이라고 보아도 무방할 것이다. 그렇다면 그 종류에는 무엇이 있는가? 가장 최근 버젼인 HTML5의 선언 방법은 다음과 같다. (그 외 HTML 4.01 등 다양한 버젼을 선언하는 방법이 있지만, 검색을 통해 알 수 있는 부분이므로 다루지 않겠다) 또한 이 외에도 HTML5(발표일 2014년 10월 28일)에서 추가된 태그들을 살펴봄으로써 웹이 어떠한 측면에서 개선을 위해 노력했는지도 살펴볼 수 있다. Sementics 1) 섹션 구분 태그 기존에는 div태그로 내용들을 나누어 주었다. 그러나 컴퓨터에게 아무런 의미가 없는 태그에 불과하다. 해당 영역이.. Web/HTML 2020. 11. 9.