9주차- Front_end2

핵심 키워드

• 정적 / 동적 웹페이지

  • 정적 웹페이지는 서버에 저장되어 있는 HTML+CSS파일 대로 보여주는 것이다.

  • 동적 웹페이지는 상황에 따라 서버에 저장되어있는 HTML에 데이터를 추가 / 가공을 해서 보여주는 방법이다.

  • 정적 웹페이지는 추가적인 통신&계산이 필요없기 때문에 속도가 빠르고 서버에 부담이 적은 반면, 추가/수정/삭제 등 내용 변경이 필요할 때 HTML자체를 수정해야 하기 때문에 번거롭다는 단점이 있다.

  • 동적 웹페이지는 한 페이지에서 상황 / 시간 / 사용자 요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에 검색 엔진 최적화가 어렵다.

    동적 웹 페이지란?

• HTML DOM 문서객체모델, DOM은 HTML,XML,문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM은 구조화된 노드와 property와 method를 갖고있는 objects로 문서를 표현한다. 이들은 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
  
• 웹 브라우저 렌더링
  • 렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서들을 브라우저가 화면에 그려주는 동작을 말한다. 각 브라우저는 렌더링을 하기 위해 각각의 렌더링 엔진을 가지고 있으며 브라우저마다 종류가 다를 수 있다.
  • 다음은 브라우저의 기본 구성이다.
  • 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분
  • 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작 제어
  • 렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
  • 통신: HTTP요청과 같은 네트워크 호출에 사용됨
  • JS 엔진: 자바스크립트 코드를 해석하고 실행
  • UI 백엔드: 기본적인 위젯(콤보 박스 등)을 그림
  • 자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스
  • 렌더링엔진 : 렌더링 엔진은 위에서 설명한 것처럼 요청받은 내용을 브라우저 화면에 표시해주는 역할을한다. 브라우저마다 사용하는 렌더링 엔진이 각가 다르기 때문에, 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않고 엔진마다 읽을 수 있는 코드의 버전도 다르기 때문에 크로스 브라우징 이슈가 발생하곤 한다.
• Ajax Ajax는 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 이때 서버와는 다음과 같은 데이터를 주고받을 수 있습니다. -JSON -XML -HTML -TEXT FILE 등
  
• 동기 / 비동기
  

- 동기방식(Synchronous)

요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다.

어떤 일을 처리할 동안 다른 프로그램은 정지한다.

실제 cpu가 느려지는 것은 아니지만 시스템의 전체적인 효율이 저하된다고 할 수 있다.

- 비동기방식(Asynchronous)

요청을 보낸 후 응답과는 상관없이 다음방식이 동작하는 방식이다. 결과가 주어지는데 시간이 걸리더라도 그 시간동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다. 

비동기식은 비동기식 처리를 요청할 때 할일이 끝난 후 처리결과를 알려주는 콜백이라는 함수를 함께 알려준다.