[JavaScript]JS for Springboot[자바스크립트 정리]

목차

- node.js

- OS

- 이벤트 리스너

- Queue와 thread

- non-blocking

- 문법

- 내장 객체

- fetch 함수

---

1. 문법

 

2. 내장 객체

 

window,

history, location, document

 

3. fetch api ( PUT, DELETE )

- 스레드

- 비동기

- 이벤트 루프

- 콜백

- 이벤트 리스너

---

Node.js

 

node.js는 자바스크립트 런타임 환경입니다.

 

*

Tips

jvm -> 자바

웹 브라우저 -> 자바스크립트

node.js -> 브라우저 없이 자바스크립트 사용 가능

*

 

본격적으로 JavaScript문법을 익히기 전에

Node.js를 설치합니다.

 

https://nodejs.org/ko/

Node.js

 

LTS 선택

 

 

Next

 

*

Tips

자바스크립트로 서버를 만들 수 있습니다

 

**

모든 언어는 서버를 만들 수 있음 -> 소켓

소켓은 운영체제가 가짐, 운영체제가 동시에 들고 있음 소켓,

언어가 그걸 빌려 씀

 

빌려 쓰는 것을 시스템 콜백이라고 함

어떤 언어든 서버를 만들 수 있다.

**

 

html에 

자바스크립트 -> 스크립트(기생)

 

node.js 넘어오면서 독자적으로 실행이 가능함

*

 

 

 

*

PM이 되었을 때 시니어의 역할을 견디려면 개념을 잡아야 한다.

*

 

 

---

선수지식

 

JavaScript를 이해하기 위해서 다음과 같은 선수지식이 있으면 이해에 도움이 됩니다.

 

OS

운영체제

 

이벤트 리스너

 

 

Queue와 thread

 

 

non-blocking

 

non-blocking을 이해해야 async와 await에 대해서 이해할 수 있습니다.

 

---

JavaScript 문법

 

Visul Studio Code로 실습환경을 구성합니다.

 

 

git bash로 실행해봅시다.

 

 

 

실행이 안되네요?

 

환경변수 설정을 하거나

다시 툴을 껐다 켜봅시다.

 

 

 

 

이제 실행이 됩니다.

 

 

자바스크립트는 실행 시에 오류가 발생합니다.

브라우저에서 확인이 가능합니다.

 

 

인터프리터 언어의 경우에 타입 추론이 됩니다.

 

타입 추론은 값이 들어오고 나서 오류가 발생하기 때문에

오류는 미연에 방지하기 어렵습니다.

 

 

파이썬도 타입 추론이기 때문에

인터프리터 언어입니다.

 

 

*

javascript에서 타입을 설정해두지 않기 때문에

이 문제를 해결하기 위해 ms에서 typescript를 만들었음 

*

 

 

let -> 타입 변수

 

숫자 1이 들어온다면

4바이트로 메모리를 잡아놓습니다.

(int 형태로 메모리를 잡아 두는 것)

 

 

(자바는 컴파일 시에 메모리 공간을 미리 확보해 놓습니다)

 

c, java의 경우 인터프리터 언어가 아니기 때문에

실행 시에 모든 오류를 실행 전에 방지할 수 있습니다.

 

위와 같이 JavaScript는

타입 설정에서 강제성이 없습니다

 

 

배열은 연속된 공간이 있어야 합니다

 

반면

어레이 리스트(컬렉션)는 연속된 공간이 없어도 됩니다.

 

배열은 풀 스캔 속도가 빠릅니다.

 

단점은 미리 연속된 공간을 알아야 해서

컴파일 시에 메모리 할당이 결정되어버리며

(JS에서)

 

오래 걸리기 때문에 배열은 JS에서 쓰이지 않습니다.

 

그래서 대부분 컬렉션만 쓰이게 됩니다.

 

 

 

json

 

모든 서버가 통신을 js로 자주 하기 때문에

그래서 데이터를 json으로 보냅니다.

 

Json형태는

JavaScript Object 형태와 비슷하게 생겼으며

그에 따라서 이름도 비슷하게 만들어졌습니다.

 

let과 변수 할당

 

``

백 틱은 되게 많이 쓰니 기억해둡시다

(백 틱 값 안에 Script 변수를 넣을 수 있습니다)

 

 

 

 

 

 

자바는 클래스만 메모리에 올릴 수 있습니다.

그렇기 때문에 어쩔 수 없이, 클래스 안에 메서드를 만들어 놓습니다.

(메서드를 사용하려면 클래스 안에 만들어 놓고 그 클래스를 불러와야 함)

 

 

메모리 공간에 스택을 만들어놔야 합니다,

(여기서 스택은 메서드 내부 공간)

 

메서드는 스택에 쌓이지 않고 실행되면 메모리에 뜨게 된다.

 

자바에서는 클래스를 만들어야 합니다, 

그래야 메서드를 호출할 수 있기 때문입니다.

 

그 이유는 클래스를 띄어야지 메모리에 올릴 수 있기 때문입니다.

(자바에서 1급 객체는 오직 Class 밖에 없다)

 

*

1급 객체

1. 메모리에 로드되는 것

2. 최상위에 적어야 한다

*

 

반면 자바스크립트는 모두 객체화가 가능합니다!

function에 모든 것들을 모아 둘 수 있습니다.

 

*

function은 1급 객체

최상위에 존재함

*

 

function이 매개변수안에 들어간다(객체)

 

자바에서는 함수를 만들어서 전달해야 합니다. 

그렇게 하려면 클래스를 만들어서 클래스 안에 함수를 만들어야 합니다.

 

이렇게 하면 번거롭기 때문에,

인터페이스에다가 만듭니다.

어차피 클래스는 껍데기로 쓰이기 때문에

(함수만 호출할 시에)

 

메모리에 뜰 수 있으면 메서드로 매개변수를 전달 가능합니다.

 

 

 

 

자바스크립트는 전달하는 매개변수를 메서드로 줄 수 있습니다.

행위의 결정권을 함수에 넘겨줄 수 있습니다.

(가능한 이유는 1급 객체이기 때문)

 

반면 자바는 그렇지 않습니다.

 

.map(); 자세히 보기 -> any, 모두다 들어올 수 있다

 

 

yield 변수

유튜브를 볼 때, 영상을 시청할 때

사진을 여러 개를 받고 받은 것을 return 해서 우리에게 보여줍니다.

그것의 예시로 아래의 형태를 보면

 

let new_data = list_data.map(hello); 

 

 

let에 반환받고 계속 메모리에 쌓입니다.

(map)

 

이런 경우 stream이 열려 있다고 합니다.

 

 

 

 

let component_list = ["", "", "", ""]

여기에 css 파일을 넣는 다고 생각하면

화면을 더 다채롭게 만들 수 있습니다.

 

 

 

 

function도 메모리에 올릴 수 있기 때문에 위와 같이 작성을 할 수 있습니다.

위와 같이 새롭게 함수 이름을 만들어 넣어주기 때문에, 함수 이름이 필요하지 않습니다.

그래서 아래와 같이 익명 함수로 만듭니다.

 

 

익명함수

 

위와 동일함

 

 

return 함수도 익명 함수화 합니다

 

hello function

 

=>

 

한줄도 가능!

 

 

중괄호가 지워지면 자동 리턴이 되며

리턴 문이 지워져도 됩니다.

 

다만 중괄호 내부가 스택이기 때문에,

두줄 이상일 경우 리턴 문을 지울 수 없습니다.

 

 

map안에 그냥 익명함수를 넣은 모습

 

 

 

 

*

호이 스팅의 개념

 

지역변수를 전역 변수로 넘기는 것

 

스레드에서 찾아내서

계속 지역변수를 전역 변수로 넘겨서 쥐고 있습니다.

 

JS에서는 호이 스팅을 제공합니다.

*

 

*

되게 간편함!

() => {}

*

 

 

JS에서 기억해야 할 것은 두 가지인데

1. let을 쓰고

2. 화살표를 소지하자

그렇게 하면 머리 안 아프다.

 

 

---

Fetch 함수

 

 

한 번 postman으로 Json을 던지는 요청을 해봅시다.

body에 담아서 던져주면 아래와 같이 반응하네요!

 

success!

 

반면 기존 DB에 없는 값을 던져주면 아래와 같이 인증되지 않습니다.

 

인증이 안되네요

 

아래 키 값을 가져와서

 

value

 

post의 headers 값인 Key에 Authorization을 적어주고

위에서 가져온 값을 넣어줍니다.

 

정상적으로 response된다

 

그리고 던져주면 목록보기 완료가 뜹니다!

 

 

 

fetch 함수를 자세히 보면

Promise <Response>를 확인할 수 있습니다.

 

Promise<Response>

 

**

일단 Promise<Response>로 때려버려!

그리고 null값 넣어! 그래야 다른 일을 하지!
(비동기 방식)

**

 

 

 

 

 

한 번 JS 객체를 만들어서 fetch 함수로 요청을 해봅시다

 

아래와 같이 작성을 하고

 

test2.js

 

html을 만들어서 요청해봅시다

 

 

test3.html

 

body: JSON.stringify(loginDto)

stringify를 하는 이유는 JS 객체를 JSON 객체로 변환을 해줘야 하기 때문입니다.

 

 

console.log(rl)을 통해서 확인 가능하다

 

 

non-blocking이라고 불리는 이유는

 

block(블락) 당할 동안 다른 곳에서 실행되기 때문에

non-block(논블로킹)이라고 합니다.

 

즉, block인 상태이지만, block이 아니라는 것!

 

블락(await) 당할 동안 다른 것을 하게 하려면 비동기 함수로 만들어 주면 됩니다.

 

 

async 이걸 붙여주면 비동기 함수가 됩니다.

비동기 함수로 만들어줘야지 논블로킹인 상태로 만들어줄 수 있습니다.

(블락된 상태에서 다른 곳에 연산처리를 하기 때문에 어차피 논블로킹과 같아짐)

 

블락 안 하면 promise(response)로 rl에 null이 들어갑니다.

 

async 추가

 

fetch 앞에 await를 추가합니다

 

그리고 실행을 하면

아래의 콘솔 창처럼 반환합니다.

 

Response의 위치가 마지막이다!

 

Response의 위치가 마지막인 것이 특징입니다.

 

console.log(rl) 이 마지막에 실행되었으며

 

 

console.log("나무 그리기");

console.log("태양 그리기");

console.log("바다 그리기");

 

들이 먼저 실행이 되었습니다.

 

 

분명 login() 함수가 먼저 실행이 된 상태이지만 나중에 response를 한 것은

fetch함수 작업을 await 하는 동안 아래의 console.log가 실행이 된 겁니다.

 

non-blocking 상태여서 가능합니다!

 

 

 

반면 async를 function앞에 붙이지 않으면 아래와 같이 오류가 발생하게 됩니다.

 

anysc 제거

 

await를 붙일거면 async 함수에서 해라는 뜻

 

 

다른 경우로는, async function이지만 fetch 앞에 await를 붙이지 않으면

Promise로 반환합니다.

 

await 제거

 

Promise 반환

 

 

서버와 통신을 하고 response를 받는 시간이 필요한데 await하지 않으면 그냥 넘어가 버립니다.

 

 

 

마지막 경우로 둘 다 제거를 해버리면

 

둘 다 제거

아래와 같이 값을 반환합니다.

 

Promise

 

그냥 바로 넘어가버립니다.

 

 

 

 

 

둘 다 붙이고

만약에 await 한 값을 받아온 변수를 다른 변수에 await 없이 넣어버리면

 

 

아래와 같이 async를 유지하면서도

Promise 값을 반환을 합니다.

(text() 함수의 형태로 값을 변수에 넣지는 못함)

 

 

다 붙여 보면

 

 

값이 모두 들어간 것을 확인할 수 있습니다.

 

text형태로 response해서 보여준다

 

이렇게 await 해서 받아온 값을

다른 변수에 할당해서 값을 보려면

 

위와 같이 다른 변수에 받아올 때도

똑같이 await를 붙여 줍시다!

 

 

 

 

 

 

fetch((url), ({

method: "delete"

});

 

delete

 

버튼을 누르면 fetch url을 타고 delete method를 요청합니다.

 

그리고 console창에서 확인하기 위해서

위와 같이 r1에 fetch를 let에 담아서

Json형태로 r2라는 변수에 값을 넣고 확인해봅시다.

 

 

삭제되는 모습

 

 

 

 

fetch((url), ({

method: "update"

});

 

 

JS로 js object를 던져주는데, json으로 파싱 돼서 전달되게 됩니다.

 

update

 

method가 put 이기 때문에 JS객체를 만들어주고

이것을 Json객체 형태로 변환시키고 body에 담아서 던져줍니다.

 

 

수정되는 모습

 

 

잘 수정되었는지 Postman에서 GET으로 post를 불러와봅니다.

 

잘 수정된 모습

 

---

Reference

 

https://nodejs.org/ko/

Node.js

 

---