Server 10주차 워크북

1. 학습 목표 🎯

1. Ajax를 이용해 웹페이지에서 서버와 비동기 통신하는 방법 대해 알아본다.
2. Bootstrap, OPEN API 등을 활용해서 자신의 웹페이지를 만들어본다.

2. 10주차 수업 후기 ✏

📌 10주차 ****수업을 듣고 느낀 점과 각자의 과제 진행 상황을 서로 이야기해주세요!

이곳에 강의 내용을 정리해도 좋습니다 👍

3. 실습 💻

• [ ] 버튼 onClick 예제
• [ ] 버튼 클릭 이벤트 핸들러
• [ ] jQuery Ajax

4. 개념 키워드 🔑

📌 이번 주차 세미나에서 중요하게 다룬 키워드들입니다. 키워드에 대해 조사해본 후 해당 키워드에 토글 안에 자유롭게 정리해주세요!

• HTML
• HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어이다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있다.
• CSS
• CSS 는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다
• JavaScript
• JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다. 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽을 볼 수 있다면 JavaScript가 관여하고 있을 거라고 생각해도 좋다
• HTML / CSS / JavaScript의 관계
  • HTML은 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어이다. 예를 들어 페이지의 어디가 문단이고, 헤딩이고, 데이터 표와 외부 이미지/비디오인지 정의한다.
  • CSS는 HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어이다. 배경색을 추가하고, 글꼴을 바꾸고, 콘텐츠를 신문처럼 다열 레이아웃으로 배치할 수 있다.
  • JavaScript는 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립팅 언어이다.
• 정적 / 동적 웹페이지
  • 정적 웹 페이지
    • 서버(웹 서버, Web Server)에 미리 저장된 파일(HTML 파일, 이미지, JavaScript 파일 등)이 그대로 전달되는 웹 페이지
    • 서버는 사용자가 요청(Request)에 해당하는 저장된 웹 페이지를 보냄
    • 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 됨
  • 동적 웹 페이지
    • 서버(웹 서버, Web Server)에 있는 데이터들을 스크립트에 의해 가공처리한 후 생성되어 전달되는 웹 페이지
    • 서버는 사용자의 요청(Request)을 해석하여 데이터를 가공한 후 생성되는 웹 페이지를 보냄
    • 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨
• HTML DOMHTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의합니다.
• 모든 HTML 요소는 HTML DOM를 통해 접근할 수 있습니다.
• 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다.
• 웹 브라우저 렌더링
  1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
  2. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
  3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
  4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
  5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite
• AJAX브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
• 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.
• JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다
• 동기 / 비동기
  • 동기 : 동기는 말 그대로 동시에 일어난다는 뜻이다. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다.
  • 동기방식 장점과 단점
  • 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있다.
  
  • 비동기 : 비동기는 동시에 일어나지 않는다를 의미한다. 요청과 결과가 동시에 일어나지 않을거라는 약속이다.
  • 비동기 방식 장점과 단점
  • 비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있습니다.
• 
• SPA (Single Page Application)