URL

- Protocol : 웹브라우저와 웹서버가 서로 데이터를 주고받기 위해 만든 통신 규칙. http로 통신함을 알려준다.
- Host(domain) : 인터넷에 접속되어있는 각각의 컴퓨터. 특정한 인터넷에 연결되어있는 컴퓨터를 가리키는 주소를 알려준다.
- Port : 한 대의 컴퓨터 안에 여러개의 서버가 있을 수 있다. 클라이언트가 접속했을 때 어떤 서버와 통신해야 할지 알려주는 식별자다. 사진에서는 3000번 포트에 연결한다. 만약 포트가 80이라면 포트번호를 입력하지 않아도 된다. 웹 서버는 전세계가 80번 포트를 사용한다고 약속했기 때문에 우리가 http를 통해 접속했을 때는 웹서버를 통해 접속함이 확실하기 때문에 포트번호를 생략할 수 있다.
- Path : 컴퓨터 안에 있는 어떤 디렉토리의 어떤 파일인지 알려준다.
- Query String : qeury string의 값을 변경하면 웹서버에게 데이터를 전달할 수 있다. 예를들면, '내가 읽고싶은 정보는 html이고 12페이지다' 이런식으로. ? 로 시작해야하고, 값과 값은 &로 값의 이름과 값은 =로 구분한다.
서버 제작 코드 분석
var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function(request,response){ var _url = request.url; var queryData = url.parse(_url, true).query; var title = queryData.page; if(_url === `/`) { title = 'Welcome'; } if(_url === '/favicon.ico'){ return response.writeHead(404); } var template = `<!doctype html> <html> <head> <title>WEB1 - ${title}</title> <meta charset="utf-8"> </head> <body> <h1><a href="/">WEB</a></h1> <ol> <li><a href="/?page=HTML">HTML</a></li> <li><a href="/?page=CSS">CSS</a></li> <li><a href="/?page=JavaScript">JavaScript</a></li> </ol> <h2>${title}</h2> <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. <img src="coding.jpg" width="100%"> </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. </p> </body> </html> `; response.writeHead(200); response.end(template); }); app.listen(3000);
- require('module') : string의 이름을 가진 모듈을 불러옴
- request.url : URL의 query string을 string 형태로 반환함. 단, 항상 /로 시작함.
- url.parse(request.url, true).query : parsedUrlQuery라는 타입으로 반환함. 정확히 어떤 타입인지는 모르겠으나 query string의 값을 key와 value로 구분했을 때, key라는 지역변수를 가지고 있는걸로 보임. 때문에 뒤에 .key를 통해 value를 반환할 수 있음.
- if (_url ===
/) : request.url이 항상 /로 시작함을 이용해서, request.url이 비었을 경우에 실행할 경우를 검사함 - response.end(info) : info를 화면에 출력시키는듯함.
- fs.readFileSync(__dirname + _url) : 파일을 불러와 읽어서 response.end에 넣으면 출력시킬 수 있음.