2018-01-04 TIL(WPS pre-school Day3)

04 Jan 2018 • TIL

Pre-school Day 3

웹 기초지식 poiemaweb.com

자바스크립트

자바스크립트는 interactive한 웹피이지 작성을 가능하게 한다.

1. 간단한 예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello World</title>
  <style>
    button { color: red; }
  </style>
</head>
<body>
  <h1 id="heading"></h1>
  <button id="my-btn">click me!</button>

  <script>
    var heading = document.getElementById('heading');
    var myButton = document.getElementById('my-btn');

    myButton.addEventListener('click', function () {
      heading.innerHTML = 'Hello World!';
    });
  </script>
</body>
</html>

2. 외부의 Javascript 실행하기

HTML을 웹페이지의 내용과 구조를 담당함. 자바스크립트의 역할은 정적인 HTML을 동적으로 변경하는데 따라서 분리된 파일로 작성하는 것이 바람직함.

3. 브라우저 동작 원리

인터넷과 웹

인터넷 : 기기간 연결 기술

웹 : 인터넷 연결 후 사용하는 기술중 하나

웹 구성 요소 : URL, HTTP, HTML

웹 브라우저 : 웹 서버와 웹 주요 구성 요소를 기반으로 양방향 통신하는 소프트웨어 ex) Chrome, Safari, Opera 등

웹 클라이언트 : 보통 웹 브라우저, 웹서버에서 html을 전송하면 이를 받아서 브라우저에 보여줌

웹 서버 : 보통 http 서버, http 통신을 하기 위해 설치된 소프트웨어 ex) Microsoft’s IIS, Apache server, Nginx

URL

URI (Uniform Resource Identifier) 특정자원을 지칭하는 고유명사

형식 scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]

가운데 많이 쓰이는 인터넷주소 URL(Uniform Resource Locator)

1) 프로토콜과 2) 호스트 주소, 3) 경로로 구성

scheme에 http를 적는다. 예: http://www.naver.com

  • 도메인 네임 - 흔히 말하는 인터넷주소
  • 영어로 된 도메인네임은 사람이, 컴퓨터는 숫자로 된 ip 주소 DNS에서 도메인네임을 ip주소로 변환
  • 도메인에 전송되는 명령어 역할을 하는 params에서 설명

로컬 html 파일보기

주소창에 ‘로컬파일 주소’를 형식에 맞추어 입력

file://host/path/to/html

로컬에 저장된 파일을 읽어오는 URI를 구성한다. ‘localhost’는 자신의 컴퓨터 명칭 ‘hostname’이다. 그 IP주소는 127.0.0.1 로컬파일을 부를 경우 ‘localhost’는 생략가능

file://localhost/home/jsl/Code/src/mypage1.html 
file:///home/jsl/Code/src/mypage1.html

HTTP

HTTP (HpyerText Transfer Protocol)는 웹프로토콜, 서로 데이터를 주고 받는 약속 request(s)로 요청하고, response(s)를 반환

웹클라이언트에서 웹페이지를 여는 경우

  1. 자신의 컴퓨터에서(클라이언트) 웹브라우저를 열어서 주소창에 웹주소를 입력하고,
  2. 네트워크를 통해 서버에 요청(Requests)하고, 웹페이지를 반환(Responses) 받고,
  3. 반환된 페이지 html을 스타일에 따라 브라우저에 표현한다. 이를 렌더링 (rendering) -> html은 그대로 읽기가 불편하기 때문에, 웹브라우저를 사용하여 html을 보기 좋게 표현

HTTP Request

  • URL이란 자원이 있는 고유한 위치에 (ex. www.naver.com)
  • HTTP method(GET, POST, PATCH, DELETE)로 (ex. GET www.naver.com)
  • Query String, Form data로 서버에 정보를 전달한다.

HTTP Response

응답 종류 - Status code

  • 1xx (조건부 응답)
  • 2xx (성공)
  • 3xx (리다이렉션 완료)
  • 4xx (요청 오류)
  • 5xx (서버 오류) 응답 내용의 정보 - Header
  • 응답하는 데이터의 사이즈 혹은 종류등을 알려줌 응답 내용 - 주 내용
  • HTML, XML, JSON, img 등등..

HTML

  • HyperText Markup Language
  • 태그로 표식을 명시하여 의미 부여
  • 현재는 HTML5를 주로 사용
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>PreSchool</title>
	</head>
	<body>
		<h1>첫 번째 HTML</h1>
			<p>4번 째 수업시간</p>
			<p>벌써 다음이 마지막수업이네요...</p>
	</body>
</html>

CSS

Cascading Style Sheets (CSS)는 documents가 사용자에게 어떻게 보여질가를 기술하는 언어

JavaScript

자바스크립트(JavaScript)는 웹을 위한 인터프리터 언어이자 스크립트 언어

자바스크립트를 주로 클라이언트 측 자바스크립트라고 하는데, 이는 스크립트가 웹 서버가 아닌 클라이언트 컴퓨터에 설치된 브라우저에서 실행된다는 의미

웹 프로그램

특정 경로에 있는 파일을 제공(serving)하는 데 그치지 않고, 블로그처럼 상황에 따라 동적으로 변하는 컨텐츠를 제공할 필요성이 생김!

그 결과 웹에서 그러한 처리를 전담하는 전용 프로그램 등장

image

Django

image

RESTful API

REpresentational State Transfer API의 약자로 웹 서비스뿐만 아니라 여러 컴포넌트들로 구성되어 있는 각 서비슫르을 묶을 때 많이 사용되는 개념이다.

먼저 API의 뜻을 알아보면,

API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)

응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

REST는 ‘웹서비스’를 제공하는 아키텍처로 크게 리소스, 메서드, 메세지로 이루어져 있다.

REST Architecture 6가지 원칙

  1. Uniform (통일된 인터페이스) 리소스에 관계없이 동일한 API 메소드를 갖는다.

  2. Stateless (무상태성) Context를 저장하지 않고 독립적으로 처리된다. 세션 정보를 서버에 유지하지 않는다

  3. Cacheable (캐시 가능) HTTP 프로토콜을 사용하기 때문에 기존 웹 인프라를 그대로 사용가능하다. 같은 URI에 대한 요청이 여러번 있을 때, 클라이언트의 HTTP 캐시에서 미리 가져온 정보를 반환한다

  4. Self-descriptiveness (자체 표현 구조) 별도의 주석이나 문서가 없어도 REST API가 원하는 바를 쉽게 이해할 수 있어야한다.

  5. Client-Server 구조 서버는 클라이언트의 excution context를 알고 있을 필요가 없이 독립적인 REST API에 대한 서비스만 제공한다. 따라서 클라이언트와 서버간의 역할 분담이 명확하게 분리된다.

  6. Layered System REST API는 multi-layer로 구성될 수 있다. 클라이언트는 대상 서버에 직접 붙었는지 중간에 존재하는 서버와 통신하는지 알 수 없다. 중간에 존재하는 서버를 이용하여 Security 관리, Encrypt, load balancing 등을 수행할 수 있어 확장성 및 보안 향상이 가능하다.

  7. Code on demand (Optional) REST API는 서버에서 수행 스크립트를 받아서 클라이언트 사이드 수행을 할 수도 있다.

출처 : 이즈군의 IT

JSON

  • JSON (JavaScript Object Notation)은 Javascript에서 사용하는 표기
  • Python의 dictionary형식과 같음

Postman

  • API를 빠르고 쉽게 개발하고, 개발된 API를 테스트할 수 있고, 팀원들간 공유를 할 수 있게 해주는 플랫폼

Roadmap

Web Developer Roadmap 2017

Comments

Related Posts