11월 7일 학습 일지

11월 7일

오늘 공부에 투자한 순수한 시간: 4시간

학습한 개념 : 웹 브라우저

<웹 브라우저>

1. 웹 브라우저는 Web Brower로 Web(웹)은 '링크로 연결된 문서 공간'이고 Brower(브라우저)는 '훑어보는 사람'이라는 뜻으로 두 단어를 합쳐 '링크로 연결된 문서 공간을 둘러보게 해주는 사이트'라는 뜻이 된다. 브라우저에도 크게 핵심 4가지가 있는데

1. 웹 브라우저가 앞에서 배운 클라이언트의 가장 기준이 되는 프로그램인데 클라이언트 중에서 HTTP 요청을 실제로 보내는 프로그램이 브라우저. 실제로 프론트엔드가 사용되는 곳이기도 함.

2. 브라우저가 하는일로는

- 입력했던 URL을 분석하여 HTTP로 서버에 요청함

- 요청을 받은 서버는 HTML, CSS, JavaScript를 해석해서 화면에 그리기 시작함

- 실제로 사용이 가능한 클릭이나 입력, 이미지나 영상을 조작하고 처리함

3. 대표적인 브라우저로는 Chrome, Safari, Edge, Fierfox 등이 있음

4. 웹 브라우저는 처음에는 그냥 문서를 보는 도구였지만 이제는 다양한 작업도 함께 할 수 있는 작은 운영체제가 되었음

2. 웹 브라우저도 한 사람이 만든것이 아닌 여러 사람과 회사가 이어받으면서 발전하게 된 프로그램이다.

1990년도 - 팀 버너스리가 만든 WorldWideWeb이 만들어지며 NeXT가 돌아가게 되었음. 문서를 직접 보는것과 편집하는 것이 가능해짐. 이후에는 Nexus로 이름을 바꾸게 됨. 같은 해에는 서버도 함께 만들어지며 실제로 웹이 작동하게 되었음

1991~1992년도 - 간단한 브라우저들이 생겨났는데

- Line Mode Browser(1991년경): CERN의 니콜라 펠로가 만든 글자 전용 브라우저. 그래픽 화면이 없는 컴퓨터로도 웹을 볼 수 있음

- ViolaWWW(1992년): 그래픽 화면을 지원하게 된 초기 브라우저

1993년도 - 미국 일리노이대 NCSA의 마크 앤드리슨과 에릭 비나가 Mosaic를 만들게 되었음. 텍스트와 이미지가 한 화면에 보이게 되고, 윈도우나 맥, 유닉스 모두 돌아가며, 설치도 쉬워서 대중에게 웹을 알리는 계기가 되었음.

1994~2000년도 초 - 상용화와 브라우저 전쟁이 일어남

Netscape Navigator(1994년): 앤드리슨이 Mosaic 개발진들과 함께 세운 회사의 브라우저

Internet Explorer(1995년) 마이크로스프트가 윈도우에 기본으로 넣어서 배포하여 점유율을 빠르게 올림.

두 회사가 독자 기능을 경쟁적으로 추가하면서 호환에 문제가 생기게 되었는데 이를 브라우저 전쟁이라고 함.

2000년대~현재 - 일반인들도 많이 사용하게 되는 대중화에 성공했고 여러 브라우저가 생기게 됨

Firefox(2004년): 넷스케이프 코드에서 이어진 오픈소스 브라우저이며, 웹 표준 준수를 내세움

Safari(2003년): 애플이 만든 브라우저

Chrome(2008년) 구글이 만든 브라우저. 자바스크립트 엔진(자바스크립트 코드를 실행하는 부품)과 안정성을 앞세움.

모바일시대에는 스마트폰용 브라우저가 중심이 됨

왜 만들게 되었나?

1. HTML과 HTTP, URL이 있어도 이들을 읽고 해석하여 화면에 보여주는 프로그램이 없으면 웹을 사용할 수 없기 때문에

2. CERN 연구자들이 서로 다른 컴퓨터에서 문서를 편하게 주고 받기 위해서

3. 일반인들도 명령어 없이 그냥 클릭으로도 쉽게 사용하기 쉽게 하기 위해서

4. 웹이 퍼지고 브라우저가 인터넷의 관문이 되어 상업적인 기회를 노려서

5. 문서보기를 넘어서 다양한 프로그램을 사용하기 위해서

3. 웹이 나오기 이전에 불편함

1. FTP(파일 전송 프로그램)이나 Telnet(원격으로 컴퓨터에 적속해 명령어로 작업을 하는 도구)등 각자 용도마다 프로그램과 사용법을 배워야 했음

2. 대부분은 화면에서 명령어를 직접 작성해야해서 전문가가 아닌 다른 사람이 사용하기에는 어려움이 있었음

3. FTP에서 파일을 받으면 바로 열어보는 것이 불가능하고 따로 다른 프로그램을 사용해서 열어야하는 어려움이 있었음

4. 텍스트가 기본 중심이라 이미지나 서식을 추가하고 함께 확인하는 것에 어려움이 있음

5. 링크를 클릭해서 다른 문서로 바로 이동하는 것이 불가능 했음

4. 웹이 나온 이후에 편리함

1. 하나의 프로그램에서 모든 웹의 정보를 사용할 수 있게 되었음. 전처럼 많은 프로그램을 굳이 익힐 필요성이 없어짐

2. 링크를 클릭하거나 URL에 주소만 넣게 되면 원하는 내용을 빠르게 확인할 수 있어짐

3. 브라우저에 명령을 하면 바로 렌더링(받은 문서를 바로 해석하여 그림)함

4. 텍스트만 있었던 이전과는 달리 이제는 HTML, CSS, JavaScript를 활용하여 텍스트와 이미지, 영상등을 한 화면에서 볼 수 있게 됨

5. 어떤 컴퓨터든 브라우저만 있다면 모두 공통으로 된 브라우저를 사용할 수 있게 도움

5. 웹 브라우저가 나오고 기존의 불편함은 크게 5가지가 해결되었는데

1. 요청부터 나타내기까지 한 프로그램 안에서 모두 해결이 됨

주소해석: URL을 스킴, 호스트, 경로로 분해함

DNS 조회: 도메인 이름을 IP 주소로 바꿈

HTTP 요청과 응답 수신: 서버와 주고 받으면서 통신

렌더링: 화면에 그리기

2. 주소창과 링크를 사용자가 사용하기 더욱 편리하게 수정함

3. 렌더링 엔진으로 문서를 화면으로 더 풍성하게 볼 수 있게 됨

3-1. HTML을 읽어 DOM(문서를 나무 구조로 표현한 것)을 만듦

3-2. CSS를 읽어 각 모양과 위치를 잡음

3-3. 요소의 각 크기와 위치글 계산, 설정함 (레이아웃)

3-4. 실제 화면에 그림 (페인트)

3-5. 이미지나 영상은 URL로 따로 받아서 글 중간에 배치함

4. 자바스크립트 엔진으로 실질적으로 사용이 가능한 동작을 실행시킴

5. 표준 준수와 보안장치를 활용해서 호환성과 안전을 확보함

5-1. 웹 표준으로 여러 기기에서 코드가 비슷하게 움직임

5-2. 샌드박스 (웹 코드를 제한된 공간에 가둬 내 컴퓨터를 건들지 못하게 하는 방식)로 위험한 코드는 격리

5-3. HTTPS와 인증서 확인, 위험 사이트 경고를 사용하여 안전하게 관리

5-4. 캐시(한 번 받은 자료를 저장해서 다시 받지 않는 기능)로 속도 상승

AI 대화 내역 링크: https://claude.ai/share/812f3eb7-d286-42ab-b716-7a88152c9cf0

ClaudeShared via Claude, an AI assistant from Anthropicclaude.ai

오늘 잘한 점: 기존에 이해가 안되던 부분들도 고민하며 이해하려고 하니 이전에 단어들과 맞물려 조금 더 쉽게 이해가 가능하게 되었다.

오늘 부족했던 점: 집중력이 많이 떨어져 하나를 공부하는데도 이해는 되지만 산만하게 학습한 느낌을 받았다.

오늘 총평: 기존에 어렵던 문장들도 천천히 이해하려고 노력하며 학습해와서 그런지 대화중에 크게 어렵다고 느낀 문장이 없었던거 같다. 어렵고 빠르게 학습되지는 않더라도 천천히 학습하면 충분히 이해는 되는것 같다. 하지만 아직 단어가 익숙하지 않아 뜻과 같이 공부해야하는 부분은 더 연습할 필요성이 있다고 느꼈다.

부족한 단어: 하이퍼링크, 링크, HTML, URL, HTTP, ENQUIRE, W3C, FTP, Usenet, Telnet, Archie, Gopher, 하이퍼텍스트, 하이퍼카드, 메멕스(Memex), 모자이크(Mosaic), link rot, 테드 넬슨, HTML Tags, 바이너리 형식, SGML, 검색 엔진, 스크린 리더, 자동 처리 도구, 로이 필딩, 헨릭 프리스틱 닐슨(Henrik Frystyk Nielsen), IETF, 인터넷 통신 방식(TCP/IP), 메서드, 데이터, 도메인, Head-of-Line Blocking, 멀티플렉싱, n-gram 모델, 트랜스포머, 클로드 섀넌, IBM 연구진, 요슈아 벤지오 연구팀, BERT, GPU, API, CGI