2021-11-12(금) 5일차

https://startbootstrap.com/template/simple-sidebar

웹 프로그래밍이 어떻게 동작하는가

https://d2.naver.com/helloworld/59361

브라우저 안에는 3개의 엔진이 있다

• 사용자 인터페이스 : 주소창, 버튼 등

• 브라우저 엔진

• 렌더링 엔진

브라우저에 데이터로 전송이 됨
전송된 데이터를 브라우저가 처리를 해서 보여주는 거
브라우저에 따라서 성능의 차이가 날 수 있고, 해석의 차이가 있을 수 있음
물론 표준이 있기는 한데

브라우저가 제일 먼저 받아오는 게 html 코드
html 코드 안에 html, css, js 기타 등등 들어가 있음

브라우저 안에 통신이라는 파트가 있을 수 밖에 없음

데이터가 문자열

이거를 어떻게 처리해야 되는지 고민

문자열을 해석을 해야 됨

html 문자열을 해석하는 과정 = html 문서

메모리상에 만들어야 됨
메모리상에 h1 이라는 애를 만든다

웹의 시작
지하 서고 논문 검색

초창기 브라우저 : 정보를 조회하고 읽는 기능 밖에 없었음

모자이크 브라우저

검색하는 내용이 지하에 있는 논문이었음
document
논문은 문자열 형태
문자열에 특정한 마킹을 함
마킹을 이렇게 이렇게 합시다 = Markup Language
구분을 해주는 게 마킹

어디가 책의 제목이고 어디가 출판사인지 알 수 없음
줄바꿈
데이터와 데이터를 구분하는 걸 토큰이라고 한다.
줄바꿈이 토큰
데이터가 늘어나면 토큰이 늘어날 수 밖에 없음
토큰의 개수가 많아지면 토큰을 만들어 내는 데 한계가 발생

정보를 표현할 때 구분하기 쉽게 <tag>

<book>
<title> 웹 프로그래밍 기초 </title>
<author> 김작가 </author>
</book>

마크업 언어의 특징
정보에 마킹을 해서 구조화된 정보를 표현하는 방법

스펙을 정해놓은 게 html

HTML4
HTML5

문자열 데이터 = 문서

브라우저 엔진
렌더링 엔진
렌더링

웹킷 엔진

v8 엔진

크롬 브라우저에서 자바스크립트를 실행하는 부분만 따로 뜯어내서 애플리케이션 형태로 만들어낸 게 node

자바스크립트 해석기 (자바스크립트 엔진)

사파리와 크롬은 웹킷 엔진을 사용한다.

문서의 내용은 보통 8KB 단위로 전송된다.
8KB : 8000 ~ 9000자

브라우저가 받는 건 document다.
document는 문자
document 구조 해석 : DOM 트리를 구축한다
DOM(Document Object Model)

HTML문서(문자열)
보니까 구조가 있음
처리를 하려면 메모리상으로 끌어올려야 됨
자바도 클래스 파일을 메모리상으로 올려야 되는 거랑 똑같은 거

Document Object Model(DOM)
메모리를 차지하면 다 객체로 본다.
태그 하나하나가 메모리에 전부 다 만들어진다.
우리는 문자열을 만든 거지만 실제로는 트리 구조로 만들어진다
DOM은 문자로 되어 있는 데이터를 메모리상에 만들어 놓은 거
화면에 뿌려주려면 스타일을 적용해서 뿌려줘야 되는데
stylesheet
보여줄 애만 추려놓음 (렌더 트리 구축)
화면에 출력할 애들만
CSS(Cascading Style Sheets)
브라우저 : 싱글스레드 모델
멀티 코어
싱글 코어
속도가 중요
한 번에 한 가지 작업밖에 못 하는 거
멀티스레드

위에서부터 쭉 내려가면서 해석

내려가다가 style을 만남
style 태그를 만나면 브라우저가 잠깐 멈춤
style 태그 안에 있는 건 자기가 처리를 못 함
브라우저는 스타일링 엔진에게 넘김
스타일링 엔진이 이걸로 렌더 트리 구축

script 태그

데이터는 3가지로 구성되어 있다
1. 순수한 데이터
2. 스타일링
3. 동적

script 태그를 만나면

멀티스레드였으면 화면 뿌리고 css 처리하고
script
alert 나오면 동작 멈춤
싱글스레드라는 증거임

document를 처리하는 애는
이거 못하니까 이만큼만 뜯어내서
자바스크립트 엔진한테 넘기는 거

DOM이랑 자바스크립트랑 연동하게 되면 느려진다

자바스크립트 2번 읽는다
처음에는 문을 읽고
그다음에는 실행

console.log() () 있으면 문 아니고 실행임
alert 브라우저에서 제공하는 애

window.alert("AAA")

브라우저가 2개의 API 추가로 제공
window
document

API(Application Programming Interface)
연결이다.
window나 document 같은 애들을 API라고 한다
내가 만든 게 아니라 남이 만든 거
이미 만들어진 거
내가 만들수도 있음

window
document
­+ 통신

window : 창 제어
브라우저 창
창을 제어하는 역할
버튼 누르면
팝업창
앞으로 가기
뒤로 가기
주소창 내용 바꾸기

document :
문서의 내용물을 커스터마이징
어떤 내용은 보여주고 어떤 내용은 감추고
버튼을 클릭하면 어떻게 하고
색깔이 바뀌면 어떻게 처리하고

통신 :
컴퓨터 성능이 좋아져서
브라우저가
2000년대 HTML5
오디오, 비디오

뮤직 플레이어

채팅
알람

Real Time Communication

플랫폼기업
기차역
역이 있어야 기차를 탈 수 있음
사람들이 뭔가 하고 싶은데

서비스 : 상대방이 원하는 기능을 제공하는 것

모든 사람들이 사용해서
이제 뭔가를 하려면 여기 얹어서 해야 되는 상황

기차역에서 기차를 타야만 하는 상황

플랫폼화 됐다고 표현함

가게를 열었다고 치면
배달 플랫폼 없이 가게 운영 불가능함

당근마켓

유튜브

html5
너에게 다른 프로그램은 필요없어
우리는 플랫폼이야
우리는 너가 원하는 거 다 할 수 있어
브라우저가 하나의 플랫폼이 된 거
자바스크립트를 두 번 공부
처음에는 어떤 언어인지
두번째는 브라우저에서 이런 걸 하고 싶으면 자바스크립트로 어떻게 해야 되는지
자바스크립트가 브라우저에서 어떻게 동작하는지 알아야 됨

2교시 시작

web2.0

리렌더링
리페인트

새로운 조각을 가져와서 끼워
타일 : 각각의 이미지 하나하나

프론트엔드 개발자

서버 사이드 프로그래밍
JSP
ASP
PHP

서버에서 결과를 만들어서 브라우저에 보냄

서버 사이드 렌더링

서버에서 html 코드를 다 만들어주는 거

브라우저 입장에서는 모름
파일 그대로 보내는 건지
커스터마이징해서 보내는 건지
브라우저는 그런 거 모르겠고 html document만 오면 됨
서버 사이드 프로그램이 그런 걸 하는 거

JSP(Java Server Pages)
자바 서버 페이지는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다.

맨 윗줄 코드
서버에서 이 데이터를 만들어서
브라우저에 "이거는 html처럼 만든 거야. html로 보여주면 돼"

서버 사이드 프로그래밍을 한다는 건

결과 데이터를 만들어서 보내준다

그게 자바 웹 프로그래밍이 하는 일

웹 서버 사이드 프로그래밍

JSP
1999년 썬 마이크로시스템즈에 의해 배포되었으며

모바일

앱

서버 입장에서는 골치 아파짐

옛날에는 무조건 브라우저만 맞춰주면 됐었음
이제는 브라우저가 다양해짐
모바일에서 돌아가는 크롬은 다름
기능이 안 되는 게 많음
더 큰 문제는 앱
앱으로 쇼핑도 하고 다 할 수 있음
그러려면 데이터가 필요함
데이터를 서버에서 가져옴
데이터를 보내줄 수가 없음
순수한 데이터만 보내주면 앱에서는 앱으로 보여주고 웹에서는 웹으로 보여주
서버의 입장이 바뀜
순수한 데이터만 보내줘야

어제 한 건 반응형
앱에 HTML 데이터를 보내면 안 된다는 거
그래서 웹이 선택한 방법이 json 포맷

마크업 랭귀지 = 순수한 데이터를 의미
모든 언어에 상관 없이 가장 범용적은 데이터는 문자열
문자열인데 구조가 필요
태그라는 걸 이용해서

순수한 데이터 포맷으로 생각한게 XML

<book>
<title> 웹 프로그래밍 기초 </title>
<author> 김작가 </author>
</book>

자바스크립트
객체
키 값
브레이스로 구조 표현
브레이스 안에 배열 넣을 수 있음

JSON

자바스크립트에서 객체
표기법

브라우저는 직접 데이터를 가공하고 직접 처리하는 상황이 됨

그 처리를 위해서 지금까지 자바스크립트를 써옴

자바스크립트의 중요도가 확 뛸 수 밖에 없었음

애플리케이션스러워지고 싶어

자바스크립트가 그걸 하기 적합하지 않아

드디어 자바스크립트도 라이브러리들이 나오기 시작

Angular, React, Vue, ...

앱 시장을 장악하고 싶어

웹으로 다 만들어놨는데 앱으로 못 보니까 억울

웹에 앱을 위에 얹는다?

앱을 개발하려면 새로 개발해야 되니까

앱 화면 위에 웹 화면을 씌우는 기술

앱에 브라우저를 보여주는 애를 넣어놓고 그 안에다 웹페이지를 띄운 거

하이브리드앱

Cordova
웹 페이지를 씌워서 띄울 수 있음

리액트 네이티브
iOS Android 동시에 개발 가능

Flutter
Dart.js 언어 사용
자바스크립트랑 파이썬 결합한 느낌

순수하게 앱을 개발하기 보다는
웹 개발자들이 앱을 개발할 수 있는 개발도구들

프론트엔드 개발자
자바스크립트
웹이나 앱쪽을 개발하는 사람
더 많은 기능과 더 많은 로직들을 가져가는 거

서버사이드

데이터를 주고 받는 서버

API 서버

공간 데이터 API

카카오 API

DB 중요

아키텍처

클라우드 AWS

프론트엔드
남들과 다른 점이 있어야 되니까
국비 90% 이상이 자바
전부 다 스프링 가지고
거기서 남들보다 낫다는 걸 증명하려면
프론트 관련 기술 1, 2개 더 할 줄 아는 게
프론트도 만들 수 있고
백도 만들 수 있어야 됨
리액트 개발해보기

3교시 시작

자바스크립트의 위치

브라우저에서

HTML은 데이터

태그 하나하나가 객체라고 생각하면 됨

메모리를 차지하면 다 객체

div라는 클래스가 있다

브라우저에서 하는 자바스크립트로 하는 일

DOM 처리 → CRUD

더보기

DOM 데이터 핸들링

이벤트 처리

html은 동작이 없음

이벤트 처리를 해서 클릭, 드래그

창을 제어하는 역할

HTML5 기능을 이용

http://musiccanbefun.edankwan.com/

스크립트 태그 3가지 방법

브라우저는 html문서를 읽으면서 DOM을 만나는데
스크립트를 만나면 멈춤
자바스크립트 엔진한테 넘겨줌
DOM엔진을 서울에 있다고 생각하고
자바스크립트 엔진은 부산에 있다고 생각
스크립트 태그를 만나면 잘라서 부산한테 줌
부산에서 처리가 다 끝날 때까지 기다림
실행까지 다 끝낸 다음에
다음 거를 실행하려고 함
서울에서 부산까지 왔는데 오자마자 또 부산에 가야 되는 꼴
최악의 코드
script 태그마다 따로따로 처리된다는 말
가능하면 스크립트가 여러 번 안 나오게

호이스팅
문이 먼저 처리되면서 마치 위쪽에 선언된 거 같은

function은 statement(구문)

doA 라는 변수가 하나 만들어져 있는 상태
doA가 가리키고 있는 건 코드 블럭

doA()를 위에 써도 실행이 된다

함수의 선언문

함수의 선언문(statment)이 먼저 실행이 된다

이거는 실행 안 됨

쪼개는 것도 신경 써서 쪼개야 됨

이렇게 하는 건 됨

메모리가 다 정리가 됐다면 실행이 안 되는 게 맞음

근데 실행이 됨

그렇다는 얘기는 위에 있는 스크립트에서 선언했던 doA()가 메모리 상에 남아있었기 때문에

scope

얘를 어떻게 보관했길래 doA()가 실행이 된 걸까

window 라는 애한테 붙음

창 단위로 window라는 메모리가 할당 됨
페이지 하나당 윈도우가 하나 생기는 거

브라우저 입장에서

그래서 브라우저에서 윈도우라는 기본 단위를 사용한다

지금 현재 보고 있는 페이지에서 다른 페이지로 이동하면
화면도 지우지만 메모리도 지운다
그 단위를 윈도우라는 범위로 잡은 거

context 라고 한다

이 공간 자체를 context 라고 한다

이 페이지용 공간이 생긴다

그 공간이 윈도우

다른 페이지로 이동
이 공간을 지워버림

doA라는 함수를 만들어놨는데 내가 이동한 네이버에도 doA라는 함수가 있으면
어떤 doA를 실행할지 모르기 때문에 페이지를 이동하면 지워버리는 게 맞음

DOM
이 창 하나에 윈도우 라는 공간을 하나 만든다
공간을 이용해서 function 이라고 써있는 애가 붙음

window 메모리가 가지고 있는 애들

window.alert
window 생략이 가능

function 같은 걸 선언하면 Window에 달라붙는다

전체는 윈도우
document도 윈도우에 달라붙음

Window.document.
이렇게 안 하고
document.
생략 가능

어제 돼지저금통

function 말고 변수 선언해보자

console.log(zperson)

안 나옴

변수와 함수는 다르게 처리된다는 말

window에 붙여야만 나올 수 있는 건가

바뀐 게 없다고 판단하면 안 보냄

zperson도 윈도우에 달라붙었다는 거

html은 반영됐는데 자바스크립트는 반영 안 됨

script 태그 안에 함수나 변수를 선언함
window에 가서 달라붙는다
함수는 직접 달라붙는다
변수는 전역에 달라붙는다

var를 쓰면 window에 달라붙는다

가능하면 var를 안 쓰는 게 좋음

가능하면 let이나 const만 쓰기

const나 let 쓰면 window에 안 달라붙음

변수를 쓸 때는 let이나 const를 써라

let이나 const를 써도 다른 script에서 쓸 때 문제 없음
var는 좀 위험하다
함수는 좀 다름
함수가 선언되면 window에 달라붙는다.
script 태그는 가능하면 2개로 나눠쓰는 것보다 1개로 합쳐쓰는 게 좋다
script 태그는 밑에 선언하는 게 좋다
script 태그 만나면 DOM 처리하다가 멈추고 script 태그 동작이 다 끝나야 돌아옴
내용이 많으면 브라우저 화면이 늦게 뿌려지게 됨
첫 번째 목적은 화면을 조금이라도 빠르게 보여주기 위해서
두 번째
자바스크립트로 DOM 핸들링
안에 쓰여 있는 값 읽어오는 거
도서관 청구기호
HTML도 데이터
document.get

밑에 있을 때는 동작했는데

위로 올리니까 동작 안 됨

document.get

DOM을 읽는 거

지금 현재 DOM이 아직 nick까지 못 갔음
DOM 내에는 nick이라는 id를 가진 놈이 없음

메모리상에 nick 이라는 애가 만들어진 후여서 됨

자바스크립트 가지고 DOM 핸들링 많이 한다

그럼 스크립트가 실행되기 전에 DOM 구조가 다 끝난 다음에 실행되는 게 좋음

그래서 자바스크립트가 맨 마지막에 들어가는 거

이벤트

DOM 처리가 다 끝나면 로직(함수)을 수행하세요

https://developer.mozilla.org/ko/docs/Web/API/Window/DOMContentLoaded_event

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

DOM 처리가 끝나면 처리해주세요

DOM 위에 있어도

script 태그가 위에 있을 때는 DOM 처리가 다 끝나면 이거 해

콜백 함수 : 어떤 함수를 실행할 때 파라미터로 전달하는 함수

"버튼을 클릭하면"에서 죽어라 볼 거임