웹 브라우저와 웹 서버deftkang.tistory.com 같은 URL을 입력하면 왜 해당 화면이 뜰까 그 이유는 복잡한 과정을 거친다. 이 과정을 단순화 하면 아래 그림과 같이 정리할 수 있다. ※ URL을 잘 모르시다면 https://deftkang.tistory.com/103 가서 공부 웹 브라우저에 URL을 입력하면 웹 서버라 불리는 프로그램이 웹 브라우저에 웹 페이지를 제공한다. 위 그림에서 4번이 웹 서버가 웹 브라우저에 웹 페이지를 제공하는 단계이다. 웹 브라우저가 웹서버에 웹 페이지를 달라고 하는것 : 요청(request)요청한 웹 페이지를 웹 브라우저에 제공하는 것 : 응답(response) 웹 브라우저와 웹 서버는 다른 컴퓨터에 위치한다. 예를들어, 집의 PC에서 웹 브라우저에 www...
웹 어플리케이션의 개요 웹 애플리케이션 정의 웹 어플리케이션이란 인터넷을 기반으로 구성된 웹상에서 웹 브라우저를 이용한 클라이언트와 HTML(정적 웹 컴포넌트), JSP/Servlet(동적 웹 컴포넌트) 같은 자원을 가진 웹 서버 간에 동적으로 요청/응답 처리하는 프로세싱을 의미한다. 정적인 특징과 동적인 특징 초창기 웹은 정적인 특징을 갖는 HTML만으로 서비스가 가능했으나 다양한 사용자들의 요구를 만족시키기에 매우 부족하였다. HTML의 정적인 특징이란, 이미 만들어진 HTML 문서는 요청 시점과 장소에 무관하게 항상 고정된 웹 페이지로 처리된다는 것이다. 예를 들어, 현재 시간을 구하는 요청이 발생되었을 때 HTML로 만든 경우에는 항상 동일한 시간을 결과 값으로 처리한다. 다. 정적인 특징은 항상..
HTML 클라이언트로부터 요청을 받고 나면, 서버는 브라우저에게 컨텐츠 타입이 무엇인지 알려준다. 브라우저는 이 내용에 기초하여 이를 어떻게 화면에 출력할지 준비한다. 서버가 내려 보내는 것은 HTML이라는 명령문으로, 이는 브라우저가 화면에 컨텐츠를 어떻게 출력할지에 대한 명령(instruction)으로 이루어져 있다. 모든 웹 브라우저는 HTML을 이해한다. 하지만 오래된 브라우저들은 최신 HTML을 못 읽을 수도 있다. HTTP 웹 상에서 일어나는 클라이언트와 서버간 대화는 거의 대부분 HTTP 프로토콜로 이루어진다. HTTP 프로토콜은 요처과 응답으로 이루어진 아주 단순한 구조이다. 클라이언트가 HTTP 요청을 보내면, 서버는 HTTP 응답으로 대꾸한다. 웹 서버 HTTP로 상대와 대화한다. 클라..
웹 서버란? 웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말한다. 웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것이다. 즉 웹 서버는 클라이언트로부터 요청을 받아, 요청한 것을 넘겨주는 일을 한다. 만약 요청한 것이 서버에 없다면 또는 있다고 해도 주소가 틀려 다른 곳에 있어 서버가 찾지 못한다면 "404 Not Found" 메시지가 뜬다. 이 메시지의 의미는 "요청한 자료를 서버에서 찾을 수 없습니다" 이다. 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있다. 정적인 데이터는 HTML, 그림, 소리, 파..
HTTP (Hypertext Transfer Protocol)란? 팀 버너스리(Tim Berners-Lee)와 그가 속한 팀은 CERN에서 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기술과 HTTP를 발명하였습니다. 문서화된 최초의 HTTP버전은 HTTP v0.9(1991년)입니다. HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(protocol)입니다. HTTP는 계속 발전하여 HTTP/2까지 버전이 등장한 상태입니다. HTTP 작동방식 HTTP는 서버/클라이언트 모델을 따릅니다. 장점 - 불특정 다수를 대상으로 하는 서비스에는 적합하다. - 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리..
네트워크의 기본 TCP/IP HTTP를 이해하기 위해서는 TCP/IP 프로토콜에 대해 어느 정도 알고 있어야 한다. 인터넷을 포함하여 일반적으로 사용하고 있는 네트워크는 TCP/IP라는 프로토콜에서 움직이고 있다. HTTP는 그 중 하나이다. 컴퓨터와 네트워크 기기가 상호간에 통신하기 위해서는 서로 같은 방법으로 통신하지 않으면 안된다. 그래서 서로 다른 하드웨어와 운영체제을 가지고 서로 통신을 하기 위해서는 모든 요소에 규칙이 필요하게 되고 이러한 규칙을 프로토콜이라고 부른다. 프로토콜에는 여러 가지가 있는데 케이블 규격, IP 주소 지정방법, 떨어진 상대를 찾기 위한 방법과 그 곳에 도달하는 순서, 그리고 웹을 표시하기 위한 순서 등이 있다. 이렇게 인터넷과 관련된 프로토콜들을 모은 것을 TCP/IP..
웹은 HTTP로 나타낸다. 웹 브라우저 주소 입력란에 URL을 입력했을 때 웹 페이지가 보이는 이유는 어딘가에서 응답이 돌아오기 떄문에 웹 페이지가 표시되는 것이다. 웹 브라우저는 주소 입력란에 지정된 URL에 의지해서 웹 서버로부터 리소스라고 불리는 파일 등의 정보를 얻고 있는 것이다. 이 때 서버에 의뢰를 하는 웹 브라우저 등을 클라이언트(Client)라고 부른다. 이렇게 클라이언트에서 서버까지 일련의 흐름을 결정하고 있는 것은 웹에서 HTTP(HyperText Transfer Protocol)이라 불리는 프로토콜 이다.프로토콜이라는 의미는 "약속"이다. 즉, 웹은 HTTP라는 약속을 사용한 통신으로 이루어져 있다. 웹의 역사 최초의 웹은 팀 버너스리 박사가 멀리 떨어져 있는 동료 연구자와 지식을 공..
콜백(Callback Function)함수란?자바스크립트 함수 표현식에서 익명 함수의 대표적인 용도가 바로 콜백함수 이다. 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다. 또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다. 콜백(Callback Function)함수 단계별로 이해하기 1단계 함수도 데이터 타입의 일종이기 때문에 값처럼 주고 받을 수 있다. function func() { console.log("func 호출됨");}var f1 = func;var f2 = f1;func(); f1();f2();cs 2단계 함수..
자바스크립트 함수 생성 방식 자바스크립트에서 함수를 생성하는 방법은 3가지가 있다. 이들 방식은 모두 같은 함수를 생성하지만, 각각의 방식에 따라 함수 동작이 미묘하게 차이가 난다.함수 선언문(Function statement)함수 표현식(Function expression)Function() 생성자 함수 함수 선언문함수 선언문은 선언적 함수라고 한다. 함수의 이름이 존재하고 컴파일 시점에 함수 정보를 등록한다.(함수의 호이스팅) 그래서 함수를 선언하기 이전에 사용이 가능하다. 함수가 별도의 return문을 사용하지 않는 경우 디폴트로 undefined가 반환된다. console.log(add(2, 3)); // 출력값 5 // add() 함수 선언문function add(x, y) { return x ..
undefined undefined의 경우, 변수는 존재하지만 값을 저장하지 않아서 타입을 모를 경우이다. 직접 값을 비교할 수 있다. var msg1;if (msg1 == undefined) console.log("변수 존재하지만 값이 없다.."); var msg2 = 20; msg2 = undefined; // 존재하는 변수를 undefined로 만들 수 있다.cs null null은 특정 객체를 가리키지 않음을 지정할 때 null을 사용한다. null또한 직접 값을 비교할 수 있다. var msg3 = null;if (msg3 == null) console.log("msg3은 null 상태임");console.log(typeof(null)); // typeof 연산자를 null에 사용하면 objec..
호이스팅(Hoisting) 호이스팅은 말 그대로 끌어 올린 다는 것이다. 자바스크립트 에서 끌어 올리는 것은 변수 '선언'과 함수 '선언' 을 끌어올리는 것이다.함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(Instantiation)과 초기화(Initialization)의 작업이 분리돼서 진행되기 때문이다. console.log(a());console.log(b());console.log(c()); function a() { return 'a';} var b = function bb() { return 'bb';} var c = function() { return 'c';}cs 위에 보이는 코드에서 a() 부터 실행 오류가 떠야 하지만 a는 출력이 된다. 왜냐하면 호이스팅에 의해서 실제 자바 ..
vue-router란?vue-router에서 router 라는 것은 일반적으로 화면이 전환될 때 전환되는 행위를 router라고 한다. 최근 개발되는 웹애플리케이션은 SPA 구조이다. SPASPA(Single Page Application) 는 여러 화면을 하나의 페이지 안에서 제공하면서도 화면을 별도로 로딩하지 않는다. 즉 해당화면에 대한 정보를 미리 갖고 있다가 해당 화면으로 넘어갈 때 서버에 요청하는 것이 아니라 클라이언트 내부적으로 라우터를 이용하여 서버에서 어떤 데이터를 받아 오지 않고도 화면을 바로 매끄럽게 전환 해주는 것이다. 화면마다 고유의 식별자를 기반으로 화면을 렌더링해야 하고, 고유 식별자로 사용하기에 가장 적절한 정보가 바로 URI(Uniform Resource Identifier)..