11.26.(금)

초록귤·2021년 11월 26일
0

멋사1기

목록 보기
13/19

웹의 역사

어떻게 하면 적의 핵공격에도 군 통신망을 유지할 수 있을까?
당시 통신 방식 = 중앙집중적 회선교환방식
이를 대체하기 위해 통신 장치를 여러곳으로 분산하기 시작한 것이 바로 인터넷
이전에 전화를 걸면 전화 교환원 존재(스위치로 연결)
여러 개의 허브를 만들어서 하나가 망가져도 다른 경로로 통신가능하도록. =인터넷
인터넷 = 네트워크와 네트워크를 연결하는 통신 인프라
웹 = 인터넷을 통해 문서를 주고받는 시스템

inter-network 에서 시작

여러 통신망을 하나로 연결한다는 의미
(도로와 항만 같은 인프라 시설이라 보면 된다. )
군인 - 아르파넷
팀 버너스리 (유럽 입자물리연구자)
강입자가속기 = 입자충돌 에서 관측기에서 쏟아지는 정보가 엄청 많았다. 이러한 정보를 모으고, 정리하는sw를 만듬. 떨어져있는 세계 연구소들과 통신
www(world wide web)

3개 발명+ 기관 설립

1.html(hyper text markup language) 문서
2.http(hyper text transfer protocol) 통신프로토콜로 주고받을 수 있는 것
3.url(uniform resource locator) 해당 주소에 기계로 접근
W3C(World Wide Web Consortium(1994)

핵무기가 터지면 일시적으로 태양이 지구 지표면에 생기는 느낌..
지구에 있는 공기를 다 태워버리면 어떡하지.?
강입자가속기 걱정되었던 것=블랙홀 (입자와 입자 충돌 = 빅뱅 실험)

웹 시장 패권 1,2,3차 브라우저 전쟁

1차 네스케이프 네비게이터 vs IE(Internet Explorer) =IE
ms가 장악 - window 95 (무료)로 제공 ( 네스케이프 유료 그 당시 49달러 판매 )
1990년대 아날로그.
최고의 너드가 되자.
앨 고어 > 인터넷 규칙을 만들고, 인터넷이 대중화되는데 기여
빌게이츠= 인터넷을 사회주의라고 생각함. but 네스케이프 성공사례를 보고 시장에 뛰어듬.

IE도 11부터 appcodename:mozila, appname :netscape로 바꿨다. (나머지 인터넷은 처음부터.)
넷스케이프 개발자들이 mozila , firefox 만듬
점점 IE입지 좁아지다가,
2016년 IE 6.2% // Chrome 69%

브라우저 점유율 확인 사이트

전기 원래 집의 조명을 키기 위해 설치.
제프 베조스 - 전기를 다른 용도로 사용하세요.
2003년 웹 버블이 끝났을 때, gold rush - web기술은 아직 미성숙하고, 앞으로 많은 가능성이 있다
= 제프 베조스 왈

웹 어셈블리 =웹에서 돌아가는 바이너리 코드.
웹에서 python, java돌아가게. 웹브라우저에서 돔에 들어가서 움직일수록 주는건 javascript밖에 없다.
자바스크립트 잘하면 인터랙티브 시각화도 끝내주게 할 수 있다. d3.js

인터넷 시스템 = 수많은 서버와 클라이언트로 구성

server : 인터넷 서비스를 제공하는 프로그램이나 컴퓨터를 의미
웹 시스템에서는 웹 사이트의 정보를 담고 있는 프로그램이나 컴퓨터를 웹 서버라고 부른다.
client : 서버가 제공하는 인터넷 서비스를 이용하는
웹 서버(web server): 사용자가 요청하는 웹 페이지나 프로그램을 실행하여 해당 파일이나 결과를 사용자에게 제공하는 역할. 사용자가 요청하면 언제나 웹 서비스를 제공해 줘야 하므로, 웹 서버는 항상 실행되어 있어야 한다.
웹 브라우저(web browser) : 웹 서버에서 웹 페이지를 가져오거나 웹 서버로 정보를 보낼 때 사용하는 프로그램. 사용자가 웹 페이지를 요청하면 웹 서버에 저장되어 있는 웹 페이지 정보를 불러와서 사용자의 화면에 출력 ( IE, 구글 크롬, 파이어폭스,...)

프로토콜(protocol) 컴퓨터끼리 정보를 주고받기 위한 일종의 규칙이나 약속을 의미 =네트워크 통신 규약

컴퓨터끼리 정보를 교환할 때 데이터의 형식이나 통신 순서 등을 미리 일치시켜야만 통신이 가능.

추가
청창시(청년창업사관)
배민 신춘문예

도커 백엔드 개발자 - 서버구축 배포

컴퓨터 : 자동연산-문제해결

최초 컴퓨터- 콜로서스 (앨런 튜링) > 에니악 (포탄의 탄도 위치 계산)=시뮬레이션

프로그래밍? : 어떠한 문제 해결을 위한 언어

프로그램 실행 과정

  1. 컴파일러가 프로그램 컴파일하여 cpu가 이해할 수 있는 기계어로 만듬
  2. 프로그램을 램에 보내서 프로세스 상태로 만듬 (ram : 주기억 장치)
  3. cpu가 해셕하고 실행
    컴파일 과정을 거친 파일 (.exe)=실행파일
    컴파일 언어 소스코드 >컴파일러 (컴파일)>기계어 >(실행) cpu/메모리 (기계어) -c++,java
    스크립트 언어 소스코드> 인터프리터 > (바로 번역 및 실행) cpu/메모리 오류를 실행해봐야안다(민트로 미리 검사가능) -python , javascript
    스크립트언어 = js 따로 실행파일 없고, 실시간 브라우저에서 실행된다.

Computational thinking

예/아니오 1. 분기처리 & 2. 반복
ex) 길을 건넌다 - 왼발을 앞으로 한발자국 간다. 그 다음 오른쩍
이러한 하나하나 작업 순서 정하는 것
딥러닝 - 학습시켜서 알아서 할 수 있도록 가능
java-jvm 가상환경에서 작동 , 객체지향 철학 본격적으로 도입한 언어

javascript 표준명칭:ECMA스크립트

ECMAscript ->Javascript발전이 느려지자 개발자들이 자체적으로 개발하여 compile2JavaScript계열의 언어가 등장 ( typescript, coffeescript)
객체(object)기반의 스크립트 언어
HTML로 웹의 내용 작성 | CSS로 웹 디자인 | JS로 웹의 동작가능
JS는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
넷스케이프사에서 브랜든 아이크 주도하에 개발.

babel 프로그램 ( js를 브라우저에서 지원되도록 cross browing하는 코드로 바꿔줌 )

특징

  1. 객체 기반의 스크립트 언어
  2. 동적이며, 타입 명시 필요없는 인터프리터 언어
  3. 객체 지향형 / 함수형 프로그래밍 모두 표현 가능
  • 웹브라우저를 조작하여 기능 구현할 수 있는 유일한 언어
  • Ajax(a: 비동기) 의 등장과 더불어 폭발적 성장
  • 자바스크립트 엔진(웹킷,,등) :
    자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있다.[1] 여러 목적으로 자바스크립트 엔진을 사용하지만, 대체적으로 웹 브라우저에서 사용된다.[2][3] (위키)
    서버쪽에서 html파일을 보내는게 아니라. 클라이언트가 원하는 데이터만 바꿔줌 client side randering (통째로 안바꿔주고, 필요한 부분만 바꿔준다.) =브라우저 성능이 획기적 증가, 더 많은, 복잡한 application만듬.
    js가 웹 브라우저 벗어나고 있다.
    v8엔진으로 node.js => js로 어떠한 환경에서도 동작할 수 있도록 함

1)BOM(browser of m ) & dom (html에 접근할 수 있는 api의 집합 )
브라우저, html문서 접근 및 조작 가능
2)이벤트 핸들링(사용자의 반응 캐치) css3 focus, active, hover 사용자와 상호작용 가능 .
ex) select box로 이벤트 핸들링
3) ajax & json 서버와 통신하여 데이터를 주고받자
javas of anotation 자바스크립트의 object와 같다.?

document : 문서 시작점
getElementById('demoOne')
어떤 값을 어떤 공간에 집어넣을 때 그 행위를 = "할당"이라고 표현한다.

var 변수의 키워드
window => 브라우저에게 요청
프로그램이란?
프로그램은 컴퓨터가 실행할 수 있는 명령(instruction)으로 이루어짐
컴퓨터 프로그래밍에서 컴퓨터가 실행할 수 있는 명령들을 실행문(statement)이라고 합니다.

자바스크립트 문법

실행문은 세미콜론(;)으로 구분
var x=10;
자바스크립느 변수나, 함수의 이름, 예약어 등을 작성하거나 사용할 때는 대소문자를 정확히 구분해서 사용해야함.
literal(리터럴) = 직접 표현되는 값 그 자체를 의미
자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있다.

innerHTML로 넣는거나 document.write으로 쓰는거나 문서에 글을 쓰는건 똑같은데, 활용될 때 어떤 차이
요소에 접근해야 innerHTML로 직접 변경- document.getElementById('title').innerHTML= "";
=>innerHTML 은 HTML을 넣는거고 innerText는 플레인 텍스트를 넣는 것입니다.

hello

넣어보시면 알 수 있음

식별자 작성방식

  1. Camel Case 방식 v (js관행적 많이 사용)
    Camel Case 방식이란 식별자가 여러 단어로 이루어질 경우, 첫 번쨰 단어는 모두 소문자로 작성하고, 그 다음 단어부터는 첫 문자만 대문자로 작성.
  2. Underscore Case 방식
    식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어_로 연결하는 방식
  • 스크립트 언어 body 맨 밑에 둔 이유 .
    무조건은 아닌데 DOM 렌더링 끝나고 Script 호출해야해서 보통 바디 닫는 태그 앞에 둡니다 (js엔진)
    head > 맨 밑에 script 넣는 방법도 있다.

빠르게 js 적용해보고 싶다면?

about.black 들어가서 콘솔> js 코드 입력하기.

키워드 (Keyworld)

자바스크립트 몇몇 단어들을 특별한 용도로 사용하기 위해 미리 예약. 예약된 키워드들은 프로그램 내에서 식별자로 사용할 수 없다.
var 어떤 데이터 타입이라도 다 넣을 수 있다.

주석 (comment)

코드 내에 삽입된 일종의 설명문.
작성자나 다른 개발자가 나중에 코드를 수정할 때 참고 o, 웹 페이지 개발 시 디버깅에도 사용
이러한 주석은 자바스크립트 코드의 어느 부분에라도 작성 가능, 웹 브라우저 동작에 전혀 영향 미치지 않는다.
한 줄 주석: //주석문
두 줄 주석: / 주석문 /

여러 줄 주석 내부에 또 다른 여러 줄 주석을 삽입할 수는 없다.
여러 줄 주석 내부에 한 줄 주석은 삽입 가능

자바스크립트 출력

여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있다.

1. window.alert() 메소드 (모든 window객체는 생략가능)

가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert()메소드를 이용하는 것
window.alert() 메소드는 브라우저와는 별도의 대화상자를 띄워 사용자에게 데이터 전달

<script> 
	function alertbox() {
    alert(" 확인!");
    }
</script>
2. HTML DOM 요소를 이용한 innerHTML프로퍼티

실제 js코드에서 출력을 위해 가장 많이 사용: html DOM요소를 이용한 innerHTML프로퍼티를 이용하는 방법 > 우선 document 객체의 getElementByID나 getElementsByTagName()등의 메소드를 사용하여 html요소 등을 손쉽게 사용가능.
우선 document객체의 getElementByID()나 getElementsByTagName()등의 메소드를 사용하여 html요소를 선택 - 그리고 innerHTML프로퍼티를 이용하면 선택된 요소 내용(content) 속성(attribute)값 등을 손쉽게 변경 가능

<script> 
	var str = document.getElementByID("text")
    str.innerHTML= "안늉"
</script>
3. document.write()

웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력
따라서 document.write()메소드는 대부분 테스트나 디버깅을 위해 사용
하지만 웹페이지 모든 내용이 로딩된 후 document.write()메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 된다.
따라서 document.write()메소드를 테스트이외의 용도로 사용할 때 주의해야함*

<button onclick="document.write(4*5)">버튼을 눌러보세요!</button>
4. console.log() 메소드

웹 브라우저의 콘솔을 통해 데이터를 출력
디버깅하는데 도움 준다.

<script>

    console.log(2 * 5);

</script>

-배열은 크기도 선언해야 한다. & 자료형태는 안써도 된다.
-변수에 함수 선언 가능 ( 다른 언어와 차이점 var myVal= function(){}
-Html dom요소를 이용한

변수명

특수문자, 숫자로 시작 x
유니코드(utf-8) 문자 사용가능 ( 한국어 가능! & 거의 무제한 언어 사용가능 ) 아스키코드(숫자,영어,특수문자)
스크립트가 써지고있는 공간 = 전역공간 ( 어디서든 접근할 수 있는 공간 )
전역공간에 있으면..
html DOM
window > document > 1.forms[] 2.anchors[] 3. images[]
1.forms > buttons / select items / textareas / checkboxes / radio buttons / textboxes

보통 let 사용.
const 변수명 -> 변수 내용 바꿀 수 없다!!
변수명 한글로 쓰면 좋은이유
parseInt(num/3) =3


nan = not a number

기본타입 :

원시타입(primitive type)
1.숫자(num)
2.문자열(string) ='aa'(숫자와 문자열 더해지면, 숫자를 문자열로 자동변환하여 두 문자열을 연결하는 연산 수행)
3.불리언(boolean)
4.심볼(symbol) : ECMAScript6부터 제공 - 심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있다.
5.undefined (해당 변수의 자료형이 정해지지않음을 나타냄)
6.typeop연산자 -피연산자 타입반환하는 .
typeof null; //object 값

replace(/,/g,'') ,를 제거


parseFloat('r13px,10) ;

<script>
      let number= parseFloat('r13.3px.10')  
      #자기가 인식가능한 숫자만 받아들임 (a)

벡틱 ' ' 문자열
'abc#{$변수명}' 사용가능....

== ? === ?

숫자를 숫자 리터럴과 비교 ==
두 변수의 형식이 동일하지 않으면, 값 뿐만 아니라 두 변수 유형 확인 ===
BigInt() 2^53-1보다 큰 정수를 나타내는 방법을 제공하는 jsp 내장 객체

parse+ (문장을 문법적으로 분석, 프로그램에서는 주로 다른 언어로 작성된 문서를 디코딩한다는 의미로 해석)

잘 모르겠던 부분.

','를 ''replace할때 뒤에 넣는값 복습하기.
replace(/,/g,'') ,를 제거

profile
초록색 귤이 노랑색으로 익어가듯, 실력이 익어가기 위해 노력하는 개발자 lahee입니다. 프론트엔드 개발자를 목표로 성장하고 있습니다.

0개의 댓글