[웹 프로그래밍] Javascript 기본 문법

자바스크립트는 ;을 무조건 붙여야 한다.

console.log(1234);
// ctrl + alt + n;
console.log('abcd');
console.log('efgh');

html,css는 너무 오래되었다.

자바스크립트는 코드가 좀 잘못되도 실행시켜주는 언어다.

 

1. 변수선언 : RAM 메모리를 사용하는 문법

2. 데이터타입 : RAM을 효율적으로 사용하는 문법

 

	숫자	문자
데이터 타입 X	저장공간 10	저장공간10
데이터 타입 O	저장곤간5	저장공간 12

 

저장공간을 아낄 수 있으므로 데이터 타입이 존재한다.

 

3. 동적타이핑 특징

자동으로 변수 타입을 지정

주로 인터프리터 언어들이 동적타이핑을 가진다.

 

4. 연산자

CPU를 사용하는 문법

산술/비교/논리

 

5. 조건문 

조건에 따라서 다른 코드를 실행

 

6. 반복문

특정 코드를 반복적으로 실행하는 문법

 

7. 함수

중복 코드를 묶어서 코드를 작성 및 실행

 

8. 자바스크립트에는 사실 클래스는 없다. 업데이트되서 추가되었지만, 바닐라 자바스크립트를 쓸 거기 떄문.

그래서 객체를 사용한다. 파이썬의 dict와 비슷하다.

식별자 1개에 데이터 여러개를 저장한다.

 

자바스크립트의 특징

인터프리터, 동적 타이핑, 객체지향

 

컴파일 언어

인터프리터 언어

 

컴퓨터가 동작되는 원리는 기계어로 번역하는 것이다.

C언어 컴파일러, java 컴파일러, 파이썬 컴파일러도 있다.

 

c,java,go rust = 컴파일러 언어

py,js = 인터프리터 언어

 

영어로 되어 있는 책 전체를 한국어 번역서로 만들어서 번역서를 읽는다 = 컴파일러

한줄씩 읽어가면서 번역한다 = 인터프리터

 

컴파일러 언어는 코드를 작성하면, 컴파일 파일을 만든다. 그리고 실행한다.

해당 번역하는 데 시간이 걸린다. 그래서 그 시간이 끝나야 실행 가능하다.

 

그래서 코드를 올리려면 코드를 바꿀 때마다 서비스를 중단해야 한다. 그리고 난이도가 높다. 예외를 허용하지 않는다.

대신에 장점은 빠르다. 번역되어 있는 걸 읽기 때문.

 

파이썬은 기다릴 필요가 없다. 한줄 해석해서 실행하기 때문.

인터프리터 언어는 파일을 만들지 않아도 된다.

 

데이터 분석 -python으로 한다.

대부분 속도가 느린 것으로 쓰는데, numpy가 가능하다.

numpy는 c,c++, 포트란으로 만들어졌다.

 

내부적인 코드는 c,c++로 돌아가기 떄문에 빠르다.

 

WAS를 flask로 개발을 했는데, 여기서 연산량이 높은 코드가 있다고 해보자.

그렇게 실행하면 비효율적이다.

 

그래서 보통의 경우에는 C 언어로 패키지를 만들고, 이걸 python에서 실행하도록 한다.

보통 속도 차이가 100배~200배 차이난다.

 

구현에 대한 적절성

 

논문에서 있는 알고리즘을 서비스로 구현해야 할 때, C언어로 구현하는 게 많다.

python을 C언어로 변환을 부탁하는 프로그램에 부탁하는 방법도 있다.

 

게임회사에서의 c++에 대한 건 네트워크 때문에 그렇다.

분야에 따라서 어떤 패키지 라이브러리를 사용하느냐에 따라서, 뭘 잘하냐에 대해서 다르다.

 

스타트업 같은 경우는 파이썬으로 개발 많이 한다.

전자정부 프레임워크를 개발 할 때는 java의 spring으로 개발하도록 되어 있다.

 

단순한 페이지가 많은 사람들이 접속해서 써야 한다면 nodejs로 쓰는게 좋다.

하지만 시스템이 좀 복잡하고, 금융권 관련된 사이트는 그냥 자바 스프링이 훨씬 낫다.

 

AWS도 메모리 1gb 2개 쓰는거랑, 2gb 짜리 1개 쓰는 거랑 가격이 똑같다. 

 

 

웹 소켓 방식

request가 없더라도 데이터를 먼저 보낼 수 있어야 한다. 대표적인 게 채팅

그래서 WAS와 클라이언트와 연결을 유지한 상태에서 해당 response를 보낸다.

 

노드.js가 이런 방식으로 많이 사용한다.

노드의 단점은 언어 자바스크립트라는 것이다.

네트워크를 빨리 처리하는 거지, 연산량이 줄어드는 건 아니다.

 

굉장히 높은 사양의 컴퓨터 1대가 있다고 하자.

만약에 자바 스프링이 있다면 연산 속도가 높다.

node js는 속도가 낮다.

 

노드의 장점은 용량이 작은 가상화 컴퓨터들을 다 만들고, 그것들을 쌓는다고 보면 된다.

다만 멀티 쓰레드는 안된다.

 

1. 변수 선언

식별자 - 저장공간을 구분하는 문자열

식별자는 언어마다 규칙이 다르다.

 

파이썬은 숫자,대소문자,언더스코어

자바스크립트는 거기에 $도 쓸 수 있고, 가장 앞에 숫자는 쓸 수 없다.

예약어 사용(if, for 등 특정한 의미를 가지는 것)도 안된다.

 

또한 식별자 컨벤션이 있다.

보통은 camleCase를 사용한다., PascalCase(uppercamelcase) 

소문자로 시작하고,튀어나오거나 대문자로 시작하고, 튀어나오거나 

변수나 함수는 snakecase로 써줘야 한다.

 

식별자 1개, 데이터 1개

식별자 n개, 데이터 n개

식별자 n개, 데이터 1개 선언 가능하다.

 

var data1 =10;
var data2=20 , data3 = 30;
var data2=20 ,
    data3 = 30;

var data4 = data5= 40;

console.log(data1,data2,data3,data4,data5);

#식별자 1개에 데이터 n개 = 파이썬에서는 리스트, javascript에서는 array

 

해당 파일을 ctrl+s 눌러서 저장해야 실행헀을 때 log가 찍힌다.

 

2. 데이터 타입

number, string, boolean, function(함수 타입이 따로 있다-코드를 저장하고 있는 데이터 타입), object

 

var data1 = 1; num
var dat2='js'; string
var data3 = true;  소문자를 쓴다.
var data4 = function() { console.log('js');}
var data5 = {key: 'js'}; object

console.log(typeof data1, typeof data2, typeof data3);
console.log(typeof data4, typeof data5);

 

자바스크립트에서 데이터가 없다라고 표현하는 방법

파이썬 같은 경우에는 none, NaN

자바스크립트는 undeifned, null, NaN 3개자기 있다.

 

undefined : 선언은되었으나 데이터 할당 x

null : 선언은 되었으나, '데이터 없음'이 할당. 해당 정보를 알려준다.

NaN : 숫자 형태(number 데이터 타입)이 undefined 되었다고 할 때.

 

NaN은 비교 연산자 ==같은 걸 쓸 시에 무조건 false가 나온다.

 

데이터 타입 변환

파이썬하고 비슷하게 씌워서 하면 된다.

var data1 = '1';
var data2 = 2;
console.log(typeof data1, typeof Number(data1));
console.log(data1 + data2);
console.log(Number(data1) +data2);
console.log(data1 + String(data2));

>12
>3
>12

이게 필요한 이유는 변환하지 않으면 string으로 만들어져서 그렇다.

 

묵시적 형변환

var data1 = '1';
var data2 = 2;
console.log(typeof data1, typeof (data1-0));
console.log(typeof data2, typeof (''+ data2));

묵시적으로 연산자가 들어갔을 때 형변환을 해준다.

 

연산자

산술 : 데이터 + 데이터 = 데이터 :  +,-,*,/, %, **, ++, --

비교 : 데이터 + 데이터 = 논리값 : 조건 1개 : ==, !=, >, <, >=, <=, ===(데이터 타입까지 비교), !==

논리 : 논리값1(조건1)+ 논리값 2(조건2) =논리값 : 조건 2개 이상 : !(not), &&(and), ||(or)

할당 : 변수 <산술>= 데이터 : 누적해서 연산

상황 : true if condition else false(python) : condition ? true : false (javascript)

 

condition일 때 true이고, 아니면 false로 만든다.

 

++는 앞에 쓰는 것과 뒤에 쓰는 게 다르다.

var data1 = 11, data2=4;
console.log(data1 / data2, data1 % data2, data2**3);
//++data1 : +1하고 데이터 대입
var data1 = 5, data2 =7;
data1 = ++data2;
console.log(data1,data2)
//data1++ : 데이터 대입하고 +1

var data1 = 5,data2=7;
data1 = data2++;
console.log(data1,data2)

위는 8,8이 나오지만, 뒤는 7,8이 나온다.

 

ctrl+L = 한줄 선택키

그 후에 ctrl+shift로 전체 줄을 선택한다.

 

비교 연산자

 

다른 연산자는 동일

===와 !==만 차이를 비교한다.

var data1 = 1, data2 = '1';
console.log(data1,data2);
console.log(data1 == data2 , data1===data2);

1 1
true false

==만 쓰면 데이터만 비교한다. 둘다 1이므로 true가 나온다.

그런데 ===면 데이터와 데이터 타입까지 비교한다.

 

그러므로 무조건 ===을 쓰는 걸 추천한다.

 

논리 연산자

|| = F or F = F

&& = T and T = T

console.log(true && false, true || false);
>false true

 

조건 1개 : 비교 연산자

조건 2개 이상 : 논리 연산자

 

var balance = 10000;

var amount = 6000;

예금 잔고가 인출 금액보다 많으면 true => 조건이 1개이다.

많은지 적은지만 비교하면 된다.

var balance = 10000;
var amount = 6000;
console.log(balance >=amount && amount <= 5000);

한마디로 파이썬에서 and 쓰는 거랑 똑같다.

 

삼향연산자

var balance = 10000,
  withdraw = 6000;
var msg = balance >= withdraw ? "인출가능" : "인출불가";
console.log(msg);

앞에 있는 조건이 true이면 인출가능, 아니면 인출불가가 msg에 저장된다.

 

문제 - 실수하기 쉬운 코드

var data1 =0.1, data2 =0.2;
console.log(data1+data2 ===0.3);
console.log(data1+data2);

false
0.30000000000004

결과가 true가 나올거 같다고 생각하지만, false가 나온다.

부동소수점 문제이다.

 

소수점 연산을 처리할 때는 이 부분을 항상 생각해서 처리해야 한다.

이걸 처리하는 방법은 반올림을 하면 된다.

math.round로 하면 된다.

10을 곱하고 나눠주고를 해주면 된다.

console.log(Math.round((data1 + data2)*10)/10);

 

인코딩 / 디코딩

컴퓨터가 이해하는 문자로 바꿔주는 것 - encoding

반대는 decoding

 

encoding decoding 방식은 같아야 한다.

만약 다르면 문자가 깨져서 나온다.

 

UTF-8을 사용한다.

ascii2 방식 - 데이터 베이스에서 리눅스일 때 많이 사용

euckr = ascii2 + 한글

예전에는 euckr

 

가장 많이 쓰는 게 UTF-8 (ascii + 모든 나라 언어)

지금은 무조건 UTF-8을 쓰면 되지만, 전에는 안 그랬다.

ascii2의 문자의 종류가 적어서(256개 문자) - 한 문자에 1byte만 있으면 된다.

 

예전에는 사람의 인건비가 더 싸서 이렇게 썼다.

무조건 적은 인건비가 최고이다.

 

조건문

if, elif, else를 파이썬에서 쓴다.

elif 대신에 else if를 쓴다.

var balance= 10000, amount= 6000;
if(balance<amount){
    console.log('인출불가')
}else if(amount>5000){
console.log('인출불가:최대인출금액초과');

}else{
    console.log('인출가능')
}

 

반복문

while (count > 0) {
  count -= 1;

  console.log("js");
}

#continue = 실행되면 반복문을 정의하는 코드로 올라서 코드 실행
for(var i=0; i<3; i++){
	if(i==2){
    	continue;
    }
    console.log('js',i);
}

for(var i=0; i<5; i++){
	if(i==2){
    	continue;
    }
    console.log('js',i);
    if(i>=3){
        break;
    }
}

c의 문법하고 똑같다.

break도 세미콜론을 붙여주는 걸 잊으면 안된다.

 

문제

로또 번호 출력 문제

1~45까지 랜덤한 숫자 6개

 

중복은 일단 허용해서 출력

다음 코드들을 활용한다.

var count = 6, lotto = '';
console.log(Math.random())
console.log(Math.ceil(4.7))

 

그러면 다음과 같다.

var count = 6, lotto = '';
for(var i=0; i<count; i++){
    var rnum = Math.ceil(Math.random()*44) +1;
    lotto = lotto + rnum + ' ';
    
}
console.log(lotto)

 

함수

중복되는 코드를 묶어서 작성한다.

코드의 유지보수 향상시킨다.

 

함수 선언 > 함수 호출 

함수 선언에서는 코드가 작성되고

함수 호출에서는 코드가 실행된다.

 

로또 번호 출력 알고리즘

로또번호 출력

javascript 문자열 출력

로또번호 출력

 

함수가 없다면 아래와 같이 된다.

var count = 6, lotto = '';
for(var i=0; i<count; i++){
    var rnum = Math.ceil(Math.random()*44) +1;
    lotto = lotto + rnum + ' ';
    
}
console.log(lotto)
console.log('javascript')

var count = 6, lotto = '';
for(var i=0; i<count; i++){
    var rnum = Math.ceil(Math.random()*44) +1;
    lotto = lotto + rnum + ' ';
    
}

 

함수가 없다면 중복으로 계속해서 코드를 만들어야 한다.

전체를 다 바꿔줘야 한다.

 

//함수 선언

fuction showLotto()

function showLotto(){
    var count = 6, lotto = '';
    for(var i=0; i<count; i++){
        var rnum = Math.ceil(Math.random()*44) +1;
        lotto = lotto + rnum + ' ';
        
    }
    console.log(lotto)
        
} //카멜케이스를 쓴다.
showLotto()
console.log('javascript')
showLotto()

 

python에서 그냥 def만 function으로바꿔진 것 뿐이다.

변수선언도 가능하다.

function showLotto(count) {
  var lotto = "";
  for (var i = 0; i < count; i++) {
    var rnum = Math.ceil(Math.random() * 44) + 1;
    lotto = lotto + rnum + " ";
  }
  console.log(lotto);
} //카멜케이스를 쓴다.
showLotto(7);
console.log("javascript");
showLotto(6);

함수의 타입은 fuction이다.

 

console.log(typeof showLotto);
>function

 

함수선언 방식 1: 선언식

function plus(n1,n2){
console.log(n1+n2);
}
plus1(1,2)

 

함수선언 방식 2 : 표현식

var plus2 = function(n1,n2){
  console.log(n1+n2);
}
plus2(2,3)

 

표현식은 함수를 선언하고 사용이 가능하다.

표현식을 쓸 때는 항상 함수를 먼저 쓰고 나서 그 후에 함수를 써야 한다. 즉, 파이썬처럼 plus(2,3)이 위에 있는 건 불가능하다.

 

하지만 선언식은 함수를 호출하고 선언해서 사용가능 하다.

자바스크립트에서는 선언식으로 사용한 코드들을 먼저 내부적으로 실행하기 때문이다.

파이썬과 문법은 거의 비슷한데 할 수 있는 역량이 다르다.

이런 특징을 호이스팅이라고 한다.

 

스코프

 

코드를 작성해서 실행할 때 함수 안과 함수 밖에서 어떻게 실행하느냐에 따라서 다른 메모리 영역에 사용된다.

함수 안 : 지역변수(local)

함수 밖 : 전역변수(global)

 

var data = 10;
function change() {
  data = 20;
}
change();
console.log(data);
>20

var data = 10;
function change() {
  var data = 20;
}
change();
console.log(data);

>10

var을 사용했을 떄는 지역변수로 사용되서, global은 변화하지 않는다.

하지만 var을 안 붙였을 때는 전체 데이터가 달라진다.

 

즉, 함수 안쪽에서는 var을 붙였을 때는 함수 마다 저장공간이 있는데, 해당 메모리 저장공간 안에서 선언되는 것이다.

만약에 두 개를 동시에 실행하면, 호이스팅 특징 때문에 함수들이 먼저 실행되고 나서 global 변수들이 실행된다.

 

그렇기 때문에 순서가 꼬일 수 있으므로 직관적이지 못하므로, 함수 이름을 명확하게 구분짓는게 중요하다.

 

function plus1(n1,n2){
  console.log('plus1',n1+n2);
  return n1+n2;
}

function plus2(n1,n2){
  console.log('plus2',n1+n2);
}

result1= plus1(2,3);
result2= plus2(2,3);
console.log(result1,result2);

plus1 5
plus2 5
5 undefined

당연히 return도 사용가능.

여기서 result2는 undefined로 나온다.

 

익명함수

선언과 동시에 실행하는 함수

자바스크립트 코드를 웹서비스 사용자가 알 수 없도록 하기 위해 사용하는 함수이다.

 

홈페이지에서 f12+esc

콘솔창이 생성된다.

 

이 창에서는 자바스크립트 함수를 실행할 수 있다.

해당 웹사이트의 서버 쪽에서 작성한 자바스크립트 함수를 실행한다.

만약 익명함수를 쓰지 않으면 function을 여기서 사용할 수 있다.

그냥 선언하면 전역 영역에 선언이 되기 떄문이다.

 

그래서 크롤링할 때 이런 식으로 함수를 어떻게 쓰는지 확인해서 쓰는 경우도 있다.

웹페이지를 서비스 하는 입장에서는 사용할 수 없게 하는 게 중요하다.

 

그렇기에 함수를 지역 영역에서 실행하게 만든다.

(function plus2(n1,n2){
  console.log('plus2',n1+n2);
}(2,3) )

 

괄호로 감싸주고, 해당 변수를 넣어줘서 실행한다.

이 함수를 바깥쪽에서 실행하려고 하면 에러가 난다.

 

이 익명함수는 재활용이 불가능하다. 그러나 재사용할 필요가 없다. 홈페이지를 만드는 데 기능들이 다 입혀졌는데 추가로 사용할 필요가 없다.

 

만약에 로그인 기능 함수가 있다고 해보자.

만약에 전역 영역에서 호출이 되면 이 로그인 기능을 바꿔버릴 수 있다.

 

그러면 안되기 때문에 다 익명함수로 작성한다.

 

디폴트 기능

파이썬에서는 def ff (n1=none) 이런 식으로 작성가능하다.

 

var plus = function (n1, n2) {
  console.log(n1,n2);
  return n1+n2
}
result = plus(1)
console.log(result)

1 undefined
NaN

n2가 안들어갔기에 NaN으로 나온다.

 

그런데 n2 = n2 || 10;으로 하면 된다.

var plus = function (n1, n2) {
  console.log(n1,n2);
  n2 = n2 || 10;
  return n1+n2
}
result = plus(1)
console.log(result)

 

객체

먼저 array부터 만든다. 리스트하고 똑같다.

var data = [1,2,3,'A','B'];
console.log(typeof data,data);
// 데이터를 추가
data.push('C')
console.log(data);
console.log(data[3]);

for(var i=0; i< data.length; i++){
  console.log(i,data[i])
}

append와 같이 추가할 때는 push를 쓴다.

for로 출력할 때는 data.length를 쓴다.

 

객체 생성의 2가지 방법

var data = {name: 'andy', plus:function(n1,n2){return n1+n2}};
console.log(typeof data, data)
consolg.log(data.name, data['name']);

>object { name: 'andy', plus: [Function: plus] }
andy andy

한마디로 딕셔너리와 비슷하다.

.name으로도 접근할 수 있고, ['name']으로도 접근할 수 있다.

 

두번째 방법

function Person(name){
  this.name = name;
}
var person = new Person('andy');
console.log(typeof person, person);

this 변수는 파이썬에서 self하고 같은거라고 생각하면 된다.

그래서 이 녀석이 클래스가 된다.

 

객체에서 변수 추가 및 삭제

var data = {};
data.name = "alice";
data["age"] = 23;
console.log(data);

delete data.age; //삭제된다.