<div id="readability-page-1" class="page"><article><header><small>Created: 2021, 03 22 &gt;<a href="https://github.com/shdkej/shdkej.github.io/blame/master/content/Web.md">Updated: 2021, 04 14</a></small></header><nav><strong>Table of Contents</strong><div><ul>
<li>
<p><a href="/web/#web">Web</a></p>
<ul>
<li>
<ul>
<li><a href="/web/#%EC%9B%B9%EC%9C%BC%EB%A1%9C-%ED%95%A0-%EC%88%98-%EC%97%86%EB%8A%94-%EA%B2%83">웹으로 할 수 없는 것</a></li>
<li><a href="/web/#web-should-support-this">web should support this</a></li>
<li><a href="/web/#%EC%83%88%EB%A1%9C-%EA%B3%A0%EC%B9%A8-%EC%8B%9C%EC%97%90-%EC%96%B4%EB%96%A4-%EB%8F%99%EC%9E%91%EC%9D%84-%ED%95%98%EA%B2%8C-%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C">새로 고침 시에 어떤 동작을 하게 해야 할까</a></li>
<li><a href="/web/#mobile-view-web-view">mobile view, web view</a></li>
<li><a href="/web/#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">브라우저</a></li>
<li><a href="/web/#%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%97%94%EC%A7%84">렌더링 엔진</a></li>
<li><a href="/web/#browser">browser</a></li>
<li><a href="/web/#html5-article-%ED%83%9C%EA%B7%B8%EB%8A%94-%EB%8F%85%EC%9E%90%EC%A0%81%EC%9D%B8-%EB%82%B4%EC%9A%A9%EC%9D%84-%EB%8B%B4%EA%B3%A0-%EC%9E%88%EC%9D%84-%EB%95%8C-%EC%82%AC%EC%9A%A9%ED%95%9C%EB%8B%A4%EA%B3%A0-%ED%95%9C%EB%8B%A4">html5 article 태그는 독자적인 내용을 담고 있을 때 사용한다고 한다</a></li>
</ul>
</li>
</ul>
</li>
</ul></div></nav><p>---</p><section><h2 id="web"><a href="#web" aria-label="web permalink"></a>Web</h2>
<ul>
<li>통신 시스템의 데이터 보관 및 전송 필요성 대두</li>
<li>하이퍼링크 구현 (문서간 이동)</li>
<li>웹 구현 (문서 뿐 아니라 더 많은 데이터 이동)</li>
<li>플래시, 액티브엑스 대두 (웹의 기능 외의 것들 구현하는 플러그인)</li>
<li>무거움과 보안 문제 대두</li>
<li>자바스크립트 대두</li>
</ul>
<p>액티브엑스는 C++로 만들어졌고
플래시는 액션스크립트로 만들어졌다고 한다
그 후 위에 둘은 없어지고 자바스크립트로 그것들의 구현을 대체하게 되었다.
그리고 지금 웹 어셈블리라는 프로그래밍 언어 활용이 가능한 방식이 대두되고 있다.
웹 어셈블리는 대세가 될 수 있을까? 대세가 되지 않더라도 역할을 구축할 수 있을까?</p>
<h4 id="웹으로-할-수-없는-것"><a href="#%EC%9B%B9%EC%9C%BC%EB%A1%9C-%ED%95%A0-%EC%88%98-%EC%97%86%EB%8A%94-%EA%B2%83" aria-label="웹으로 할 수 없는 것 permalink"></a>웹으로 할 수 없는 것</h4>
<p>백그라운드에서 실시간 데이터 입력받아 적용하기
예) 집에 들어오면 바깥 조명 확인해서 불켜주는 것</p>
<ul>
<li>PWA(progressive web app) makes it possible.</li>
</ul>
<h4 id="web-should-support-this"><a href="#web-should-support-this" aria-label="web should support this permalink"></a>web should support this</h4>
<ul>
<li>dark mode</li>
<li>accessibility</li>
<li>i18n</li>
<li>link to new tab</li>
<li>session manage</li>
<li>history back button (undo button)</li>
<li>'컨텐츠로 건너뛰기'를 만들어서 접근성을 높여야 한다
</li></ul></section><section>

<h4 id="새로-고침-시에-어떤-동작을-하게-해야-할까"><a href="#%EC%83%88%EB%A1%9C-%EA%B3%A0%EC%B9%A8-%EC%8B%9C%EC%97%90-%EC%96%B4%EB%96%A4-%EB%8F%99%EC%9E%91%EC%9D%84-%ED%95%98%EA%B2%8C-%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C" aria-label="새로 고침 시에 어떤 동작을 하게 해야 할까 permalink"></a>새로 고침 시에 어떤 동작을 하게 해야 할까</h4>
<p>뭔가를 추가하는 동작을 한다면 새로 고침 시에 그 동작을 다시 하게 하면 안된다</p>
<p>뒤로가기를 할때는 작업하던 상황이 그대로 유지되야 한다</p>
<h4 id="mobile-view-web-view"><a href="#mobile-view-web-view" aria-label="mobile view web view permalink"></a>mobile view, web view</h4>
<p>노트북에서 반쪽으로 브라우저를 띄우면 보기 불편한 웹페이지들이 많다
모바일 친화적인 곳은 보여지는 것이 웹보다 적은 경우도 있고
웹 친화적인 곳은 모바일 사이즈를 고려하지 않아 짤려 보여서 좌우로 계속 스크롤
해야하는 경우가 생긴다.</p>
<h4 id="브라우저"><a href="#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80" aria-label="브라우저 permalink"></a>브라우저</h4>
<ul>
<li>사용자 인터페이스(ui)</li>
<li>브라우저 엔진(chrome v8)</li>
<li>렌더링 엔진(webkit, gecko, blink)</li>
<li>네트워킹, 자바스크립트 해석기, 데이터 저장소</li>
</ul>
<h4 id="렌더링-엔진"><a href="#%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%97%94%EC%A7%84" aria-label="렌더링 엔진 permalink"></a>렌더링 엔진</h4>
<p>통상 8KB 조각 단위로 렌더링 수행
HTML 파싱 - 렌더 트리 구성 - 트리 배치 - 트리 그리기</p>
<h4 id="browser"><a href="#browser" aria-label="browser permalink"></a>browser</h4>
<p>웹브라우저 엔진은 js용 쓰레드가 1개만 도는데 대신 web api라는게 따로 구현되어 있고 비동기작업을 처리하고 태스크큐에 보내 다시 js 쓰레드로 보내는 방식으로 비동기를 구현했다</p>
<p>Web api는 쓰레드를 여러개 쓴다. File, timer, ajax 등을 컨트롤한다.
Js thread
Web api - task queue - js thread?</p>
<h4 id="html5-article-태그는-독자적인-내용을-담고-있을-때-사용한다고-한다"><a href="#html5-article-%ED%83%9C%EA%B7%B8%EB%8A%94-%EB%8F%85%EC%9E%90%EC%A0%81%EC%9D%B8-%EB%82%B4%EC%9A%A9%EC%9D%84-%EB%8B%B4%EA%B3%A0-%EC%9E%88%EC%9D%84-%EB%95%8C-%EC%82%AC%EC%9A%A9%ED%95%9C%EB%8B%A4%EA%B3%A0-%ED%95%9C%EB%8B%A4" aria-label="html5 article 태그는 독자적인 내용을 담고 있을 때 사용한다고 한다 permalink"></a>html5 article 태그는 독자적인 내용을 담고 있을 때 사용한다고 한다</h4>
<p>다른 곳에서 참조할 때 article 안에 있는 내용을 가져다 써도 그 내용만으로도 말이
되는 내용이 들어간다는 것이다
예를 들어 애플 읽기모드로 들어가면 article 안에 있는 내용만 읽어들여 읽기에
집중하게 해준다.</p>
<p>이와 비슷하게 section이라는 태그가 있는데 이는 영역을 구분할 때 쓰면 좋다. 예를
들어 목차 영역 만드는 곳에 써서 접근성(스크린 모드) 사용 시 본문에만 집중하게
안내해줄 수 있다.
비슷한 것들로
aside, nav, header, footer 등이 있다
이를 semantic(의미론적인) 태그라고 한다</p></section><hr></article></div>

shdkej

Web
통신 시스템의 데이터 보관 및 전송 필요성 대두
하이퍼링크 구현 (문서간 이동)
웹 구현 (문서 뿐 아니라 더 많은 데이터 이동)
플래시, 액티브엑스 대두 (웹의 기능 외의 것들 구현하는 플러그인)
무거움과 보안 문제 대두
자바스크립트 대두
액티브엑스는 C++로 만들어졌고
플래시는 액션스크립트로 만들어졌다고 한다
그 후 위에 둘은 없어지고 자바스크립트로 그것들의 구현을 대체하게 되었다.
그리고 지금 웹 어셈블리라는 프로그래밍 언어 활용이 가능한 방식이 대두되고 있다.
웹 어셈블리는 대세가 될 수 있을까? 대세가 되지 않더라도 역할을 구축할 수 있을까?
웹으로 할 수 없는 것
백그라운드에서 실시간 데이터 입력받아 적용하기
예) 집에 들어오면 바깥 조명 확인해서 불켜주는 것
PWA(progressive web app) makes it possible.
web should support this
dark mode
accessibility
i18n
link to new tab
session manage
history back button (undo button)
'컨텐츠로 건너뛰기'를 만들어서 접근성을 높여야 한다
[[Design]]
새로 고침 시에 어떤 동작을 하게 해야 할까
뭔가를 추가하는 동작을 한다면 새로 고침 시에 그 동작을 다시 하게 하면 안된다
뒤로가기를 할때는 작업하던 상황이 그대로 유지되야 한다
mobile view, web view
노트북에서 반쪽으로 브라우저를 띄우면 보기 불편한 웹페이지들이 많다
모바일 친화적인 곳은 보여지는 것이 웹보다 적은 경우도 있고
웹 친화적인 곳은 모바일 사이즈를 고려하지 않아 짤려 보여서 좌우로 계속 스크롤
해야하는 경우가 생긴다.
브라우저
사용자 인터페이스(ui)
브라우저 엔진(chrome v8)
렌더링 엔진(webkit, gecko, blink)
네트워킹, 자바스크립트 해석기, 데이터 저장소
렌더링 엔진
통상 8KB 조각 단위로 렌더링 수행
HTML 파싱 - 렌더 트리 구성 - 트리 배치 - 트리 그리기
browser
웹브라우저 엔진은 js용 쓰레드가 1개만 도는데 대신 web api라는게 따로 구현되어 있고 비동기작업을 처리하고 태스크큐에 보내 다시 js 쓰레드로 보내는 방식으로 비동기를 구현했다
Web api는 쓰레드를 여러개 쓴다. File, timer, ajax 등을 컨트롤한다.
Js thread
Web api - task queue - js thread?
html5 article 태그는 독자적인 내용을 담고 있을 때 사용한다고 한다
다른 곳에서 참조할 때 article 안에 있는 내용을 가져다 써도 그 내용만으로도 말이
되는 내용이 들어간다는 것이다
예를 들어 애플 읽기모드로 들어가면 article 안에 있는 내용만 읽어들여 읽기에
집중하게 해준다.
이와 비슷하게 section이라는 태그가 있는데 이는 영역을 구분할 때 쓰면 좋다. 예를
들어 목차 영역 만드는 곳에 써서 접근성(스크린 모드) 사용 시 본문에만 집중하게
안내해줄 수 있다.
비슷한 것들로
aside, nav, header, footer 등이 있다
이를 semantic(의미론적인) 태그라고 한다

WEB

댓글