브라우저라는 것은 운영체제
랜더링이란 화면에다가 무엇을 뿌리는 것이다. 이렇게 하려면 데이터가 정리되어있어야한다.
랜더링 엔진은 통신으로부터 요청한 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8kb단위로 전송된다.
랜더링에서 문자열로 받고 그걸 해석하는데 그것을 돔트리를 구축한다고 한다****
Document Object Model 트리이다.
이제 돔트리를 구축(보여줘야할 애들과 안보여줄 애들)하고 CSS와 결합해서 보여줄 애들만 출력하는데 이를 랜더트리를 구축하는 것이라고 한다. *
Web과 app은 사실 목적이 다르다.
web은 정보를 뿌리는 것이 목적이라서 강조되는 것이 anchor(닻)이다.
이제 브라우저가 발전하다보니 CSS가 등장하게 되는데 브라우저는 이걸 처리를 못하니까 코드를 만나게 되면 css 코드를 스타일링 엔진에게 넘겨준다. 이것을 DOM대륙에서 스타일링 대륙으로 간다고 한다. 즉 어려운 작업이라는 뜻이다. window.document(이 두가지는 브라우저에서 추가적으로 제공되는 api)를 API라고 하는데 즉 컴퓨터와 컴퓨터 프로그램사이의 연결이다.
html 문자를 해석하는 과정 html문서라고 함
초창기 브라우저는 정보를 보는데 주로 논문을 봤다. 논문은 문자열로 되어있기 때문에 거기에 마킹을 하기 시작했다. 그것이 마크업 랭귀지의 시작
정보는 구조가 있고 모여있다.
데이터와 데이터를 구분하는 것을 토큰이라고 부름(,의 개념?)
window. document. (이 두가지는 브라우저에서 추가적으로 제공되는 api)를 API라고 한다. 컴퓨터와 컴퓨터 사이의 연결이다. 요즘에는 통신이 들어간다. (자동완성의 기초, 구글 맵 등)
window는 브라우저의 창을 제어하는 역학 ex)팝업창
document는 지금 문서의 내용을 커스터마이징하는 역할
HTML5에서 요즘은 브라우저 내에서 오디오 비디오가 지원되기 시작했다. 또한 채팅 지오로케이션(위치 허용), real time comunication
web sql 의 마크는 데이터 베이스를 말한다.
JS의 브라우저 내에서의 작동을 알 필요가 있다.
web1.0, 2.0 이렇게 존재하는데 Web2.0이 되면 데이터를 받아와서 바로바로 뿌려준다.
웹 ->앱으로 보낼 때 HTML파일을 보내줄 수 없으니 json이 등장하게 된다.
이제 그러니까 HTMl파일을 밀어주면 안돼서 XML을 밀어주는 방법을 고안 또는 Json을 생각하게 된다. 이는 JS의 읽어들이는 방법이다.
브라우저 입장에서는 직접데이터를 처리해줘야하는데 이를 해주는 언어는 JS다.
API를 잘 다루기 위해서는 DB의 전문가가 되어야함 이런 걸 잘 다루는 사람을 백엔드 전문가라고 부름
안드로이드의 문제는 파편화
프로젝트 할 때 둘다 할 수 있는 게 중요하다.
브라우저에서 js 로 하는일
DOM->HTML태크 ->메모리상
메모리를 차지하고 있으면 다 객체다
DOM처리 => CRUD
이벤트 처리 => 클릭/드래그
window 제어하는 역할을 많이 하게 됨
호이스팅 문이 먼저 처리되고 그 후 실행 한번 읽고 두번 읽음
즉 한번 읽어놓으니까 함수는 선언되어있음
이 함수는 어디에 붙어있는가?
window에 붙어서 남아 있음
자스로 DOM핸들링을 많이하다. 그래서 이미 DOM구조가 있는 상태로 자스가 핸들링 하는 것이 좋기 때문이다. 이와같은 경우
비동기 처리때문에 콜백함수를 자주 사용한다. 비동기 처리란 무엇인가? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음코드를 먼저 실행하는 자바 스크립트의 특성을 말한다. 대표적인 예시는 제이쿼리의 Ajax이다.
Ajax란 무언인가? 사전적 정의는 Asynchrous JavaScript And XML의 줄임말로서 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술을 의미한다.
Ajax 이해에 필요한 사전지식 : 서버// 왜냐하면 Ajax는 서버랑 비동기적 통신하는 것이기 때문이다. 그러면 서버란 무엇인가? 유저가 데이터를 요구하면 데이터를 보내주는 프로그램 그러나 유저가 데이터를 요청할 때 원하는 데이터의 url을 통해서 get요청을 해야함.get요청을 하는 방법이 3가지가 있는데 첫번째 url을 통해서, 두번째 버튼으로 GET요청, <form action ="comic.naver.com"method = "get">이런식의 방법을 사용하는데 이럴경우 전부 브라우저가 새로고침된다. 이러한 두 번째 방법이 싫을 경우 Ajax로 get 요청을 보낸다. Ajax는 새로고침없이 서버에게 Get요청하는 쪼그마한 js코드(약간 함수같음) 장점: 새로고침이 없으니까 부드럽게 사용이 가능하다.
그러면 실제로 Ajax로 get 요청을 어떻게 쓰는가? fetch 라는 기본함수 안에 url을 집어넣고 그리고 .then 을 사용함
Ajax를 사용하더라도 마음에 들지 않을 수 있음 그럴 때 사용하는 방식이 제이쿼리를 사용한 외부 라이브러리 방식이다. 그 안에 $.ajax() 가 존재한다. react나 vue에서는 axios를 설치해서 많이 사용한다.
