오늘의 꿀팁
💡 프로젝트할 때 OPEN API 활용하기 ex. 카카오맵
📌 웹의 역사
최초의 컴퓨터: 군사적 목적을 위해 사용되었다.
애니악 - 탄도 계산
클로서스 - 암호 해독, 군사기밀 때문에 나중에 알려졌다.
인터넷의 탄생
최초의 2진수 프로그램 내장 컴퓨터 에드박
온도가 엄청 뜨거웠다.
-> 사용자가 직접 컴퓨터 옆에서 작업하기가 어려웠다.
어쩔 수 없이 외부에서 원격으로 연결하여 컴퓨터를 사용해야했고, 여러 사용자가 동시에 한 컴퓨터를 사용해야했다.
Time-sharing(시분할 시스템)의 등장
시분할 시스템
: 컴퓨터를 여러 사용자들이 시간적으로 분할하여 사용할 수 있도록 하는 시스템
: 예를 들어 사람 1이 명령어를 입력하는 동안 CPU가 쉬는게 아니라 사람 2가 이미 입력한 명령어를 처리해두는 방법
: 시간 순서대로 처리한다.
시분할 시스템을 이용하면 각 사용자가 자신만의 컴퓨터를 이용하는 듯한 착각을 주지만 사실 하나의 컴퓨터를 이용하게 한다는 장점이 있다.
여러 사람들이 하나의 컴퓨터의 프로세싱 파워를 나눠 사용하는 시초가 되었다.
오늘날 여러 사람들이 하나의 서버에 접속하여 웹서비스를 이용하거나, 자바스크립트 같은 싱글 쓰레드 언어가 동작하는 방식과 비슷하다.
스푸트니크 쇼크
옛 소련이 1957년 10월 4일에 스푸트니크 위성 발사에 성공한 사건
역사상 최초로 인간이 만든 인공물이 우주로 날아간 것으로 이는 전 세계에, 특히 소련에 비해 과학과 경제력으로 압도적 우위에 있다고 생각했던 미국에 엄청난 충격을 줬다.
이 사건 이후로 미국 정부에서는 소련과의 기술 경쟁에서 밀리지 않기 위해 1958년 ARPA - Advanced Research Projects Agency를 창설했다.
인터넷 시대 이전에는 대량의 정보를 사람이 직접 비행기나 배, 기차를 통해 운송했다. ARPA는 컴퓨터와 컴퓨터를 네트워크로 연결하는 작업에 착수하여 사람보다 기계로 훨씬 빠르게 정보를 전달하길 희망했고 그 결과로 탄생한 것이 최초의 인터넷 ARPANET이다.
쿠바 미사일 위기
미국의 정찰기가 쿠바에 건설되던 소련의 중거리 탄도 미사일 기지를 발견한 사건
미 국방부는 시뮬레이션을 통해 소련의 핵미사일 공격에 당할 경우 당시에 사용하던 유무선 통신 시스템에 심각한 장애가 발생할 것이라 판단했다.
이를 대비하기 위해 국가 전역으로 통신 네트워크를 분산하여 배치했고, 분산되어 있는 통신 장치를 서로 연결해 네트워크들을 연결하는 네트워크 즉, 거대 네트워크를 구성하기 시작했다.
이렇게 설치되기 시작한 인프라는 점점 규모가 커저 1970년대에 이르러서는 인터넷 기술이 군대뿐만 아니라 일반에 공개되어 널리 퍼져나가게 되었다.
인터넷
: "네트워크와 네트워크 사이", 웹과 웹을 연결
웹의 탄생
팀 버너스 리
CERN(Conseil Européen pour la Recherche Nucléaire)에서는 수많은 정보들이 호환성 따윈 없는 서로 다른 컴퓨터들과 네트워크 시스템 위에서 떠돌고 있었고, 팀은 서로 다른 운영체제, 파일 포맷, 하드웨어 구성 등의 난관을 극복할 수 있는, 정보를 공유하는 단일한 시스템의 필요성을 절감했다.
1980년 10월 팀은 대량의 정보에 쉽게 접근하게 하는 프로그램을 설계했고, 여기에 어렸을적 즐겨봤던 백과사전의 이름을 딴 인콰이어(Enquire)라는 이름을 붙였다. 그리고 1989년 3월 인콰이어를 토대로 만든 World Wide Web 시스템을 제안했고, 그 개선안을 1990년 5월에 제안, 최종안을 1990년 11월에 CERN에 제안했다.
그리고 1990년 말 NeXT 컴퓨터를 이용하여 최초의 브라우저(World Wide Web)와 웹서버를 만들었다.
최초의 웹사이트
http://info.cern.ch/
처음 웹은 NeXT 운영체제 위에서만 작동했었지만 크로스플랫폼을 지원하기 위해 The line-mode browser가 처음 등장하게 되었다.
웹의 핵심 3요소
팀은 웹을 구현하기 위해 세 가지 핵심적인 기술을 개발했다.
- html (Hyper Text Markup Language)
- http (Hyper Text Transfer Protocol)
- url (Uniform Resource Locator)
즉 웹은
HTML 파일을 만들어 서버에 저장하고
저장된 자원에 url을 부여한 뒤
http 통신으로 파일을 주고 받는 하나의 시스템이다.
닷컴 버블과 브라우저 전쟁
닷컴 버블의 시대(1995년 ~ 2001년)
1990년대 후반 세계 경제가 가장 주목한 부문은 인터넷
컴퓨터를 통해 뉴스와 영화, 책을 보고 대화소통이 가능했던 꿈의 통신망이 대중화되자 수많은 기업들이 인터넷 사업에 뛰어들었고, IT 기업들의 주가는 인터넷 사업을 한다고 광고만 해도 끝을 모르고 치솟았다.
비싼 통신 요금과 과장 광고로 부풀려져있던 인터넷 서비스에 수많은 사람들이 등을 돌리게 되었고 그와 동시에 주가가 폭락했다. 과도기적인 인터넷 기술에 너무 많은 것을 이루기 위해 노력하다보니 결국 많은 IT 회사들의 도전은 물거품이 되었다.
브라우저 전쟁
닷컴 버블에 브라우저들의 성장도 한몫 했을지도..
1차 브라우저 전쟁
🌐 칙칙한 웹 세상에 등장한 모자이크(Mosaic) 브라우저
모자이크 이전의 브라우저가 텍스트만 출력할 수 있었다면 이미지를 출력할 수 있는 최초의 웹브라우저가 1993년에 탄생했다.
미국 일리노이 대학교의 연구생 신분이었던 마크 엔드리슨을 중심으로 개발되었으며 이때 모자이크와 함께 탄생한 태그가 바로 <img>이다.
브라우저 벤더사의 요구에 의해 HTML 태그가 탄생한 최초의 사례이자, (W3C->)WHATWG의 경우처럼 웹 기술의 주도권이 민간 단체에서 기업으로 넘어가는 미래를 엿볼 수 있다.
* 모자이크 이전에 브라우저에서 이미지를 볼 수 없었던 것은 아니다.(링크를 클릭해 새 창에서 볼 수 있었음)
🌐 모자이크 킬러, 넷스케이프 내비게이터
모자이크의 개발자였던 마크 엔드리슨이 만든 모자이크의 정신적인 후속작
(모자이크의 라이선스는 일리노이가 가지고 있었음)
1994년에 탄생한 내비게이터는 빠르고 사용자 친화적인 UI와 전례 없는 보안 강화를 통해 웹으로 안전한 전자 상거래를 가능하게 했다.
이에 폭발적인 호응을 얻어 한때 90%에 육박하는 사용률을 달성하기도 했다.
🌐 넷스케이프 내비게이터의 배 다른 동생, 인터넷 익스플로러
1995년 8월, Netscape Navigator가 주식시장에 상장되고 샴페인을 터트린지 며칠 지나지 않아 배 다른 동생 Internet Explorer 1.0이 발표되었다.
배 다른 동생인 이유는 IE와 Netscape Navigator은 동일한 뼈대를 기반으로 만들어졌기 때문이다.(일리노이 대학이 스파이글라스(Spyglass)라는 회사에 모자이크 라이선스를 매각했고 Microsoft가 Spyglass로부터 브라우저 소프트웨어 라이선스를 사들였음)
Netscape Navigator를 무너뜨리기 위한 브라우저를 만들기 위해 Netscape Navigator의 기본 설계를 이용한 것이다.
인터넷 익스플로러가 넷스케이프를 이긴 세 가지 이유
- 꾸준한 성능 개발 및 업데이트
1996년 IE3 - 브라우저 최초로 CSS를 지원
1999년 IE5 - 브라우저 최초로 Ajax를 지원 - Windows OS에 기본 탑재
- 무료
2차 브라우저 전쟁
1차 브라우저 전쟁 이후 IE의 압도적인 점유율로 인한 횡포(Jscript, Flash 등등)가 있었다.
넷스케이프의 마크 엔드리슨은 넷스케이프를 매각하기 직전, Netscape Navigator 4.0의 코드를 오픈소스화 하여 전 세계에 배포하는 결단을 내렸다.
덕분에 소스코드를 전 세계 프로그래머 커뮤니티가 계속 작업하고 개선할 수 있게 되었다. 이후 모질라 재단이 만들어져 Netscape Navigator를 대신하는 새로운 브라우저인 모질라 브라우저를 만들었고, 모질라 브라우저에서 파생되어 나온 경량의 브라우저가 바로 🌐 모질라 Firefox다.
모질라 Firefox는 최초로 웹표준을 준수하는 브라우저로 개발되었고 후에 등장하는 🌐 Safari나 🌐 Chrome에 많은 영향을 끼쳤다.
IE가 웹표준을 지키지 않은 결과이지 않을까..
⚛️ React
프론트엔드 개발을 위한 '라이브러리'
필요한 만큼만 가져다 사용할 수 있다.
주로 컴포넌트를 만든다.
리액트 코드나 jsx로 DOM을 만들거나 인터랙션할 수 있게 한다.
💡 라이브러리
집을 짓는다고 가정할 때 "삽, 곡괭이, 시멘트트럭, 사람" 등을 사용할 수 있다.
-> 목적이 있고 목적을 이루는데 있어서 도움이 되는 도구들
편리하고 빠르게 사용하여 완성할 수 있다.
내가 스스로 모든 걸 다 해야 한다.
사이사이 첨가하는 조미료
React
💡 프레임워크
집을 짓는다고 가정할 때 "건설사"한테 어떤 집을 만들고 싶은지 얘기하면 "건설사가 가지고 있는 방법"으로 짓는다.
반드시 이렇게 만들어야 한다.
결과물을 만들 때 훨씬 빠르다.
ANGULAR
💡 컴포넌트
웹페이지의 UI를 구성하는 가장 작은 단위
💡 SPA
HTML은 거의 배제하고 자바스크립트로 HTML을 그린다.
장점
다른 링크를 클릭해도 화면 안의 데이터가 빠르게 바뀐다. 굉장히 빠르게 페이지가 전환된다.
화면 전체가 한 번에 바뀌면 화면이 번쩍하고 새로운 html을 화면 전체에 로딩해서 로딩 속도가 느릴 수밖에 없지만 SPA는 하나의 HTML에서 다른 HTML을 다운받을 필요 없고 화면을 리로딩하지 않는다.
단점
초기 로딩 속도가 느리다.
맨처음 브라우저에서 로딩할 때 HTML을 거의 다 자바스크립트로 로딩하기 때문에 HTML만 있는 파일을 브라우저에 로딩하는 것보다 HTML을 자바스크립트로 만들어서 로딩하는 것은 처음에는 느리다. 라이브러리를 다운받는 것도 처음 시간에 포함된다.
💻 SPA 만들기(Vanilla JS)
https://github.com/yoonmallang22/React/tree/main/practice/spa
