[DOM_2]자바스크립트 역사와 기초문법[web]

티스토리 뷰

Web/JAVASCRIPT

[DOM_2]자바스크립트 역사와 기초문법[web]

HAN_PY 2020. 6. 9. 17:14

웹의 역사

기본 웹의 역사를 알아보자.

기본 개념

클라이언트가 서버로 URL로 요청을 보낸다.

그러면 서버는 클라이언트에게 문서한장(HTML, CSS, Javascript)을 보내준다

브라우저가 문서한장을 시각화 시켜 바꿔준다.

SQL은 DB가 알아 듣는 유일한 언어다

Strected Query Language = RDBMS = 관계형 데이터 베이스 메니지먼트 시스템

1995년

네스케이프가 브라우져의 90프로 이상을 차지하고 있었고. 마이크로소프트 사의 explorer은 점유율이 매우 작았다.

1996

네스케이프는 브라우저를 움직이게 해 보고 싶어서 언어를 만들었다.(Mocha => LiveScript => Javascript)

1997

네스케이프는 JavaScript를 인증 받길 원해서 수소문 끝에 ECMA(컴퓨터제조업체연합)을 찾아간다.

그래서 JavaScript Ver.1으로 인증을 받기 직전에, Java를 만든 Sun microsystems이라는 회사에서 이름에 왜 Java가 들어가냐고 태클이 들어옴.(Java와 Javascript는 전혀 관련이 없는 언어다.) 그래서 결국은 ECMAScriptVer.1(ES1)이라는 이름으로 표준화 했다

1998

마이크로소프트에서 Windows 98 만들었다. 이떄 explorer를 셋트로 묶어서 explorer를 무료로 풀었다. 이 당시 브라우져 자체가 유로였기 때문에 무료로 푸는 것은 굉장히 큰 사건이었다. 그래서 이때부터 explorer의 점유율이 폭팔적으로 올라가고, javascript를 대체 할 JScript라는 언어를 만들었다. 이 때부터 1차 브라우저 전쟁이 발발함.

네스케이프의 Javascript(자바스크립트) vs 마이크로소프트의 JScript(제이스크립트)

1차 브라우저 전쟁이 일어나면서 크로스 브라우징 이슈(cross browser issues)가 발생한다. crosscross browser issues는 네스케이프와 마이크로소프트 사가 각각의 다른 언어를 쓰기 때문에 같은 문서를 보여주기 위해서는 2개의 코드를 만들어야 했다. 즉, 호환이 안되니 개발자들이 고생을 했다..(현재의 삼성과 애플 app 이 다른 느낌인듯 하다.)

2000초반

인수합병으로 세력개편이 이루어 졌다.

ORACLE - sun microsystems(java), javjscript

Microsoft -Netscape

Mozilla- Netscape에서 분리

Flash(ActionScript) 등장 - 옛날 야후게임 같은 것들

2005

Google Maps/Google Us 등장_Javascript, XML, AJAX이용

이 당시 지도프로그램을 안깔고 지도를 볼 수있다는 것이 광장히 큰 충격이었다

2007

스티븐 잡스의 iphone공개.

웹은 집에서 컴퓨터로만 하는 것이었지만, 핸드폰으로 할 수 있게되었다.

이때, 스티븐 잡스가 flash를 iphone에서 안쓴다고 해서 JS이용이 폭팔적으로 증가했다.

2008

크롬의 등장. HTML, CSS, JS를 처리하는게 빨랐으며, 표준을 잘 지켰다. V8엔진을 크롭에 탑제하여 JS가 굉장히 빨라졌다. 그러나 JS는 브라우져 밖에서는 아무것도 할 수 없었기 때문에 JS는 언어라고 인정 받지 못했다.

그래서 Ryan Dahl은 JS를 나올 수 있게 환경을 만들면 되지 라는 생각으로 2009년에 Node JS환경을 만들었다.

+ JS에서 print가 없고 console.log인 이유는 브라우져 밖에 못쓰기 때문이다.

JQuery의 등장.

문법에 맞는 library를 작성하면 자동으로 환경에 맞는 Javascript로 바꿔준다. 따라서 JS를 공부 할 필요가 없었고 크로스 브라우징 이슈가 줄어 들었다.

EcmaScript Versions

JS는 기본적으로 표준이 없었다. 즉, 웹마다 달랐다.

1997 ES1

1998 ES2

1999 ES3

ES4는 폐기되어 공개안됨.

2009

ES5등장(node JS 등장 5개월 후)

현재 모든 JS는 이게 기준이다.

2015

ES6(ES2015)를 아주 잘만듬

2016 ES7

2017 ES8

2018 ES9

2019 ES10

ES7~ES10을 모두 ES6+로 묶어서 표현가능

정리하면 , Javascript는 표준의 사움이고 우리가 쓰는건 ES6이다

npm 사이트에 들어가서 검색하면 Javascrit library사 굉장히 많다. 그래서 대부분 계발자들은 비슷한거 찾아서 복사해서 쓴다. 그러니 개발자들은 먼가를 만들 필요가 없고 복사 붙여넣기를 하게되었다.

Vanilla.js 등장

- 세상에서 가장 빠르고 강력한 JS라고 홍보함

- 캠패인의 종류중 하나로 라이브러리 그만 쓰고 순수한 JS만으로도 충분하다.라는 의미.

즉, Vanilla.js는 라이브러리가 있는게 아니라 어떠한 의존도 없는 JS로 브러아져에서 콘솔 켰을 때, 아무것도 없는 상황이 Vanilla JS이다.

콘솔) 브라우져에서 실행되는 모든것은 콘솔에서도 할 수 있다.

크롬의 시크릿 모드 들어가자(ctrl + shift + n)

그리고 개발자 도구를 연 후에(F12) Console을 누르자.

window

객체로 브라우져의 탭을 의미한다. 엄청 많은 함수가 내부에 존재한다. 최상단이라 반드시써야하기 때문에 생략가능하게 만들어 져있다.

window.document - page 전체(문서) (window 생략 가능)

window.document.write('hello world') 라고 써보자 - 문서에 새롭게 쓰겠다는 의미다.

그러면 문서에 hello world라고 적혀진다. 그리고 Elemnets에 들어가서 코드를 보면 아래와 같이 적혀 진걸 알 수 있따.

<html>
	<head></head>
    <body>hello world</body>
</html>

;(세미클론)은 우리가 안찍어도 자동으로 찍어준다.(회사규정에 맞게쓰자)

변수선언

python) 변수명 = 값

JS) keyword + 변수명 = 값

let(block scope를 가짐)

블록 단위로 범위가 지정되기 때문에 블록 안(if)과 밖은 독립적이다. 조건문 안에서 재정의 된다.

재정의 불가

재할당 가능

// 같은 변수를 '같은 함수나 블록 범위 내(.js)'에서 재선언을 하면 SyntaxError가 발생한다.

let a = 1;

a = 1;

가능

const(block scope를 가짐)

항상 초기 값을 넣어줘야 한다.( let은 안넣오도 가능 )

재정의 불가

재할당 불가

const b = 1

b = 'a'

Error

const a = [1, 2, 3]

a = 1

Error

>a.push(4)

<[1, 2, 3, 4] 가능

'재할당이 불가능 하다'는 말은 '값이 바뀌지 않는다와 다른말이다.' 값은 바뀐다.

var(function scope)

재정의 재할당 가능하다

ex)조건문의 안과 밖을 동일한 scope로 보기 때문에 전역 변수처럼 사용이 된다.

따라서 관리해야 할게 많고 hoisting관련 속성도 있어서 ES6 이 후로는 잘 사용을 안한다.

JAVASCRIPT 기초문법

1. 타입과 연산자

타입의 종류는 Primitive타입과 Refference 타입으로 2가지가 있다.

Primitive 타입(Number, string, Boolean. Empty Value(null, undefined))

Number - 정수, 실수, Infinity, -Infinity, Nan (Not a number)(ex)%, '문자'*10)
string - 문자열('문'+'문' ='문문', '문'+1 ='문1' , int도 string으로 바뀐다) , Template Literal(아래 참고)
Boolean - true, false(소문자)
Empty Value - null(개발자가 인위적으로 값 없음을 나타냄), undefined(JS가 자동으로 값이 없을 때 할당)

Template Literal(String)

ES6+ 부터 지원하는 표현방식이다.

1. 백틱(키보드의 ~에 있는부분)을 쓰면 엔터로 줄바꿈이 가능하다.

이전에는 \/를 이용해서 줄바꿈을 해야 했었다. 그러나 지금은 ``을 이용해서 쉽게 줄바꾸미 가능하다

2. 변수넣기 가능(백틱과 ${ } 을 이용한다.)

ex) const a = `안녕 ${ sent }`

과거에는 %s를 이용해서 사용해야 했다. ex) console.log('hi %s', sent)

null(object타입으로 직접 알려준다)과 undefined(시스템이 알려준다.)

>null == undefined

<true

>null === undefined

<false

>typeof null

<"object" <- 초반 개발 시 실수로 넣은거다. 기존 개발 프로그램 때문에 수정은 안하고 있다.

>typeof undefined

<"undefined"

Refference 타입

배열, class, interface, enumeration

2. 연산자

할당연산자- 연산과 동시에 할당

비교연산자

> "A"<"a"

< true

위는 아스키 코드순으로 비교한다. A의 아스키코드는 65이고 a의 아스키 코드인 97을 비교한다.

동등연산자

== : memory에서 같은 객체를 가리키거나, 형변환 시 같은 값이면 같다.

일치연산자

=== : ex) 1 ==='1' 는 false이다. 파이썬의 ==와 같다.

절대 느슨한 일치 연산자를 가능한 사용하지 안도록 한다.

== != 사용금지
=== !== 사용

논리연산자

&& and
|| or
! not
- !true -> false
- !false -> true
0 == false -> true
1 == true -> true
단축평가(true false를 왼쪽부터 확인하면서 출력 유무를 판단한다.)
- 1&&1 ->1 1은 true니까 and는 뒷부분이 출력 된다
- 1&&0 ->0 위와 동일하게 1은 true니까 and는 뒷부분이 출력된다.
- 0&&1 -> 0 0이 false니까 왼쪽 부분이 바로 출력된다.
- 1&&2 -> 2 1이 ture니까 and는 뒷부분이 출력 된다.
- 1 || 2 ->1 or은 하나만 참이여서 참이니까 왼쪽이 출력된다.
- 1 || 0 -> 1
- 0 || 1 ->1

삼항 연산자

python) A if 조건 else B

조건이 참이면 A, false면 B

JS) 조건?A:B

참이면 A, False면 B

ex)

var age = 29; var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19"; console.log(canDrinkAlcohol);

// "True, over 19"

3. 조건문

if (python의 elif가 JS의 else if이다.)

if (조건1)

명령문1

else if (조건2)

명령문2

else if (조건3)

명령문3 ...

else

명령문N

switch 설명

switch (조건){
- case 조건1 :
  - 조건1 만족시 실행할 코드;
  - break;
- case 조건2 :
  - 조건2 만족 시 실행 할 코드;
  - break;
- case 조건3 :
  - 조건3 만족 시 실행 할 코드;
  - break;
- default :
  - 위의 조건이 만족 못할 시 실행;
}

요일 출력하기 if와 switch

let day = 7

// if
if (day == 1) {
	console.log('월요일')
}else if (day === 2){
	console.log('화요일')
else {
	console.log('일요일')
}

<일요일

//switch
switch(day) {
    case 1 : {
        console.log('월요일')
    }
    case 2 : {
    	console.log('화요일')
    }
    default : {
    	console.log('일요일')
    }
}
<일요일


day = 1 // 재지정 후 다시 해보자

switch(day) {
    case 1 : {
    	console.log('월요일')
    }
    case 2 : {
    	console.log('화요일')
    }
    default : {
    	console.log('일요일')
    }
}

>월요일
>화요일
>일요일 
// case 1을 만족하면 믿에 부분은 연달아서 실행 된다.
// 따라서 switch case문은 break가 꼭 필요하다



switch(day) {
    case 1 : {
    	console.log('월요일')
        break
    }
    case 2 : {
    	console.log('화요일')
        break
    }
    default : {
    	console.log('일요일')
        break
    }
}
<월요일

4. 반복문

while, for, for of, for in 를 이용해서 0에서 5까지의 숫자가 출력되도록 작성해보기

//while

let cnt = 0
while (cnt <= 5) {
	console.log( cnt++ ) // 실행 후에 cnt+1한 것을 cnt에 넣으라는 말이다 
}


//for

for (let i=0 ; i < 6 ; i++) {
	console.log(i)
}


//for of

const numbers = [0, 1, 2, 3, 4, 5]
for ( const number of numbers) {
	console.log(number)
}

JavaScript에서의 object 형태는 key와 value가 있는 파이썬의 dictionary와 같다.
object의 경우는 for of로 사용 불가능하고 for in을 써야 한다.
for of 는 배열만 가능하다.

// object
const fruits = {
	'apple' : 2,
    'banana': 10,
    'tomato': 10,
    'watermelon': 2,
}

for (const f of fruites){
	console.log(f)
}
< TypeError

for (const f in fruites){
	console.log(f)
}
>apple
>banana
>tomato
>watermelon
//즉, for in은 object의 key값을 가지고 순환 한다.


//key로 value값을 접근 가능하다.
for (const f in fruites){
	console.log('${f} : ${fruits[f]}')
}

apple : 2
banana: 10
tomato: 10
watermelon: 2

그렇다면 for in 은 object만 가능한가? 그렇지 않다 array도 돌리기 가능하다
array를 넣으면 인덱스가 값에 들어간다.
정리하면 for in 은 object가 들어가면 key가 반복되고 배열이 들어가면 index가 반복한다.

	object	array
for in	key	index
for of	X	value

const a = ['a', 'b', 'c']

for (const c in a){
	console.log(c)
}

<0
<1
<2

0부터 9까지 출력시 3을 뺴고 출력해 보자. continue

for (let num = 0; num < 10; num++){
	if (num ===3){
    	continue
    }
    console.log(num)
}

0
1
2
4
5
6
7
8
9

5. 함수

function은 1급 객체이다.

변수에 저장 할 수 있다.
함수의 리턴값이 될 수 있다.
함수의 인자가 될 수 있다.

선언식과 표현식

//선언식 - 함수의 이름을 쓰는형태
// python - def // JS - function
// 완벽한 형태로 표면
//선언식
function add(num1, num2){
	return num1 + num2
}
add(1, 2)


//표현식1 - 익명함수 = 함수를 변수에 담아서 호출
const sub = function (num1, num2){
	return num1 - num2
}
sub(5, 6)

//표현식2 - 이름이 있는 형태
const sub2 = function mySub(num1, num2){
	return num1 - num2
}
sub2(6, 4) - 할당한 변수 명으로 사용
mySub(6, 4) - 작동하지 않는다.

주로 표현식 2보단 표현식 1인 익명함수로 자주 쓴다.
표현식2를 쓰는 이유는 오류 발생 시 추적에 용의하다.

화살표 함수

항상 익명 함수 이고 생성자로 사용할 수 없다.

총 3단계를 거쳐서 화살표 함수로 바꾼다.

기본

const greeting = function(name){

return 'hello ${name}'

}

1단계 function keyword 삭제하고 화살표로 나타낸다

const greeting = (name) => {

return 'hello ${name}'

}

2단계 매개변수가 하나라면 ( ) 생략

const greeting = name => {

return 'hello ${name}'

}

3단계 바디에 표현식이 1개만 있다면 return과 {}을 생략 할 수 있다.

const greetring = name => `hello ${name}`

매개변수가 2개이거나 디폴트 값이 있으면, 2단계를 건너 뛴다.

만약 매개변수가 2개라면 2단계 넘기고 바로 3단계로 와도 된다.

const greetring = (name1, name2) => `hello ${name1} ${name2}`

디폴트 값이 있는 매계변수가 있는 경우 2단계 적용불가하다. 그래서 2단계 건너 뛴다.

let saytti = (name='팽수') => `Hi $(name)`

화살표 함수에 대한 실습을 진행해 보자

//실습1
let square = function(num){
	return num*2
}

let suare = num => num*2

//실습2
let noArg = function(){
	return '아규먼트가 없어요'
}

let noArg = () => '아규먼트가 없어요'
let noArg = _ => '아규먼트가 없어요' // 두개가 같다


//실습3
let returnObj = function(value){
	return {'key': value}
}

let returnObj = value => ({'key': value}) //괄호를 씌워주면 object로 인식한다


//실습3
const abc = function(num1, num2){
	let a = 다른함수(num1)
    return num1*num2+a
}

이런경우는 3단계가 불가하고 2단계까지만 가능하다.
즉, 실습3처럼 표현식이 2개면 3단계를 적용하면 안된다.

4. 자료구조(Array & Object) - refference 타입

배열

const numbers = [1, 2, 3, 4]

console.log(numbers[0]) 1

console.log(numbers[-1]) undefined(음수 인덱싱은 불가능)

console.log(numbers.length) 4(길이)

console.log(numbers[numbers.length-1]) 4(value)

원본이 변경되는 method

console.log(numbers.reverse()) [4, 3, 2, 1]

console.log(numbers) [4, 3, 2, 1]

console.log(numbers.push('a')) 5

console.log(numbers) [4, 3, 2, 1, 'a']

console.log(numbers.pop()) 'a'

console.log(numbers) [4, 3, 2, 1]

console.log(numbers.shift()) 4

console.log(numbers) [3, 2, 1]

console.log(numbers.unshift(4)) 5

console.log(numbers) [4, 3, 2, 1]

원본이 변경되지 않는 method

console.log(numbers.includes(1)) true

console.log(numbers.includes(0)) false

console.log(numbers.indexOf(1)) 3

console.log(numbers.indexOf(0)) -1 (값없으면 -1이다)

console.log(numbers..join()) '4,3,2,1'

console.log(numbers.join('_')) '4_3_2_1'

console.log(numbers.join('')) 4321

console.log(numbers) [4, 3, 2, 1] (원본유지)

오브젝트(Object)

{'key': value} 형태

즉, JS의 오브젝트는 파이썬의 Dictionary랑 같다.

오브젝트 내의 요소에 접근하려면 점(.)연산자로 가능하고 대괄호인 경우는 따옴표('')안에 키값넣어서 접근가능하다

const pengsu = {

}

console.log(pengsu) {name: '팽수'}

console.log(pengsu.name) 팽수

console.log(pengsu['name']) 팽수

console.log(pengsu[name]) error

// 대괄호로 key 접근시 ' '를 넣어줘야 한다.

const pengsu = {

profile : {

dream: '우주대스타',

age: '11살',

speciality: '요들송',

}

console.log(pengsu.profile) {dream: '우주대스타', age: '11살', speciality: '요들송'}

console.log(pengsu.profile.dream) 우주대스타

+ 키를 적을 때 공백을 포함하고 싶으면 콤마를 해주면 된다.

ex) 'phone number' : '01012341234'

호출은

console.log(pengsu['phone number'])로 호출한다. 이때 마침표는 못쓴다.

Object에서 사용하는 method

오브젝트에서 키 값만 가져오고 싶을 때,

console.log(Object.keys(pengsu)) ["name", "profile"]

오브젝트에서 벨류 값만 가져오고 싶을 때,

console.log(Object.values(pengsu)) ['팽수', {dream: '우주대스타', age: '11살', speciality: '요들송'}]

오브젝트에서 키와 벨류 둘다 가져오고 싶을 떄,

console.log(Object.entries(pengsu))

[

[ 'name', '팽수']

[ 'profile', {dream: '우주대스타', age: '11살', speciality: '요들송'} ]

]

Object literal

위에서 우리는 template literal을 배웠다. 이제 object literal을 배워보자.

ES6+ 부터 사용사능한 오브젝트 리터럴

let news = ['A', 'B']

let comics = ['C', 'D']

위 2개는 object로 묶고 싶다.

일반적 방법

let books = {

news: news,

comics: comics,

}

//오브젝트 리터럴(키와 벨류의 이름이 같은 경우)

let books = {

news,

comics,

}

이렇게만 적어도 위와 동일하다

JSON과 Object의 변환

JSON은 문자열이고 Object는 Object다.

# pengsu를 object로 만들자

const pengsu = {

'phon number': '01012341234',

profile : {

dream: '우주대스타',

age: '11살',

speciality: '요들송',

}

//Object => JSON 변환

let objJson = JSON.stringify(pengsu)

> console.log(objJson)

< {"name":"팽수","phon number":"01012341234","profile":{"dream":"우주대스타","age":"11살","speciality":"요들송"}}

//위의 변환된 objJson을 보면 크게 변한것이 없어 보이지만 type을 보면 string으로 변경 된 걸 할 수 있다.

> console.log(typeof objJson)

< string

정리) 즉,

자바스크립트에서 만든 Object를 JSON(string)으로 만든 후에

JSON을 python으로 던진 후에 python에서는 이걸 dictionary로 만들어서 따로 처리 가능

JSON을 이용하면 어떠한 프로그램이든 변환 시켜서 이용이 가능하다.

//JSON => Object 변환

let jsonObj = JSON.parse(objJson)

> console.log(jsonObj)

[

'phone': '01012341234'

profile: { dream: '우주대스타', age: '11살', speciality: '요들송' }

]

> console.log(typeof jsonObj)

< object

언제쓰나

request로 받은 response가 JSON이라 치자. 이때 JSON을 .연산자로 접근이 불가능하다. 왜냐하면 문자열(string)이기 때문이다. 따라서 우리가 사용하기 쉽게 Object로 바꿔서 사용한다.

ex) console.log(objJson.name) -불가능

console.log(jsonObj.name) 은 가능.

즉, JSON은 형태가 object처럼 보이는 문자열이다

스타일 가이드

ex) python 은 tab(4번 띄움)으로 확정적이다.

Javascript는 확정적이지 않아서 형식이 다양하다.

우리가 프로젝트를 진행한다고 하면 우선 시 되어야 할 것은 convention을 사전에 맞추는거다. 보통은 대기업들이 하는 것들을 따라간다.

구글에 airbnb javascript style guide를 쳐서 깃헙사이트를 들어가자.

즉, airbnb나 google꺼를 쓴다.

변수이름을 python같은 경우는 add_ine_to_number로 짓는다면 javascript는 addOneToNumber로 쓴다. 에러는 안나지만 Convention을 지켜줘야 한다.

Naming Convention 꼭 지키자.

const add_one_to_number (bad)

const addOneToNumber (good)

'Web > JAVASCRIPT' 카테고리의 다른 글

Javascript_forEach 기초 정리 (0)	2020.12.19
Javascript_map 기초 정리 (0)	2020.12.18
상속과 프로토타입 (0)	2020.07.14
[DOM_1] DOM이란 (0)	2020.06.11
[DOM_3]Javascript과 DOM 심화(Event) (0)	2020.05.24

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

AI Platform / Web

티스토리 뷰