Programming/Web
-
[Web] Template Literals with JSON in JavaScriptProgramming/Web 2020. 1. 15. 19:30
Template Literals ES6에서의 template literal로 쉽게 JSON data를 치환하는 방법을 소개하겠습니다. var x = { name: 'John Smith', nickname: 'Johny', }; 위의 x 객체는 name과 nickname, 두 개의 속성을 가지고 있습니다. //String concatenation console.log('Hi, I\'m ' + x.name + '! Call me "' + x.nick_name + '".'); 예시에서 객체의 속성을 text 형식으로 consol.log()에 나타내기 위해서는 (')를 백슬래시로 피해야하고, 작은 따옴표와 큰 따옴표가 섞여있어, 코드가 무엇을 말하려고 하는지 알아보기 어렵습니다. 그러나 똑같은 코드를 실행하지만..
-
[Web] JavaScript - Event BubblingProgramming/Web 2020. 1. 15. 15:38
Event Bubbling 기본적으로 이벤트는 JavaScript에서 버블링됩니다. 이벤트 버블링은 target element에 이벤트가 발생했을 때, target에서 부터 상위의 Element까지 DOM 계층 구조를 순회하면서 이벤트 리스너를 찾아 실행하는 과정입니다. 이 동작은 일반적으로 Event Propagation 또는 Event Delegation이라고도합니다. html 및 body와 같은 루트 레벨 요소에 이벤트 리스너를 추가 할 수도 있습니다. 이벤트는 아래의 순서로 버블링됩니다. (클릭된 Target에서 Target을 감싸고 있는 최상위 Element 까지 ) Target -> Body -> HTML -> Document -> Window Event Capturing 비슷하게 Captur..
-
[Web] 웹 서버 VS 웹 애플리케이션 서버 (WAS)Programming/Web 2020. 1. 14. 13:31
웹은 HTTP라는 프로토콜을 사용하여 클라이언트 - 서버간 데이터 통신을 한다. 클라이언트 측에서 요청을 보내고, 서버 측에서 응답이 되돌아 오는 구조이다. 웹 서버는 이러한 HTTP 요청을 받아들이고 HTML, 이미지 파일, CSS 같은 문서 또는 리소스 데이터를 반환하는 역할을 한다. 대표적인 웹 서버는 IIS, Apache, Nginx, GWS 등이 있다. Apache는 HTTP Daemon 이라고 부르기도 한다. * HTTP Daemon : 웹 서버의 백그라운드에서 실행되어, 들어오는 서버 요청을 대기하는 SW 프로그램 웹 서버 웹 서버는 서비스 SW가 동작하는 컴퓨터를 말한다. 웹 서버의 가장 중요한 기능은 클라이언트가 HTTP에 맞게 요청하는 HTML 문서나 각종 리소스를 전달하는 것이다. 웹..
-
[Web] Client - Server의 TCP/IP 통신Programming/Web 2020. 1. 14. 12:05
OSI 참조모델은 컴퓨터와 컴퓨터 사이의 데이터 전송을 기능별로 7가지의 계층으로 분류한 모델이다. 하위 계층들은 하드웨어로, 상위 계층들은 소프트웨어로 구현된다. TCP/IP 모델은 무엇일까? 우리가 인터넷상에서 범용으로 사용하는 TCP 프로토콜과 IP 프로토콜을 OSI 7계층 형식에 맞추어 더 추상화 시킨 모델이다. TCP/IP 모델을 통해서 클라이언트와 서버가 통신하는 과정을 살펴보자. 1. 애플리케이션 계층 (Client) 사용자가 웹 브라우저(클라이언트)에 도메인(naver.com)을 입력하면 클라이언트는 DNS 서버를 통해서 IP 주소(127.0.0.1)를 알 수 있다. 클라이언트는 HTTP 메시지를 작성하여 전송 계층으로 전달한다. 2. 전송 계층 (Client) HTTP 메시지를 패킷으로 ..
-
[Web] 토막글Programming/Web 2020. 1. 13. 16:19
W3C(World Wide Web Consortium) W3를 위한 표준을 개발하고 장려하기 위한 조직 팀 버너스 리 웹의 아버지, 팀 버너스 리는 하이퍼텍스트 기반 문서를 생산하고 공유할 수 있는 규약과 도구를 발명하였고, 중앙에서 누구에게 소유되거나 관리되지 안고 움직이는 철학을 제시했다. 또한 웹에 대한 특허를 포함한 소유권을 주장하지 않고 모두가 자유롭게 사용할 수 있도록 공개하였다. 그를 인터넷의 발명자, 인터넷의 아버지라고 칭하는 이유는 여기에 있다. 서킷(Circuit) 통신 한 팀이 이동을 할 때 같은 차를 타고 목적지 까지 이동하는 것과 같다. 처음부터 끝까지 같은 경로를 이용하는 것이다. 이 통신방식은 양 쪽이 일대일로 연결되어 연결이 된 상태에서는 해당 회선을 완전히 점유한다. 이와 ..
-
[Web] NodeList vs ArrayProgramming/Web 2020. 1. 12. 22:06
NodeList와 Array 차이점 1. NodeList와 Array의 가장 큰 차이점은 NodeList는 JavaScript API가 아닌 browser가 제공하는 API라는 것이다. DOM을 조작하기 위해 자주 사용하는 querySelectorAll()이나 getElementByTagName() 메서드는 JavaScript 메서드가 아닌 browser 메서드였다.. (그러나 JavaScript에서도 사용 가능하다. 이는 다른 스크립트 언어에서도 사용하다는 의미 !) 그리고 또 다른 의미에서도 Array와의 차이점이 있다. 2. childNodes의 NodeList는 라이브 컬렉션(동적 리스트)으로서 DOM의 변경사항을 실시간으로 반영한다. 즉, 요소를 제거하거나 DOM에 추가하면 목록이 자동으로 업데..
-