Javascript3

- 모듈화

함수 앞에 export를 사용해서 모듈화를 시킬 수 있다.

export function showImage() {
    let imgNum = Math.floor(Math.random()*images.length);
    const objImg = document.getElementById("introImg");
    objImg.src = images[imgNum];
}

서버와 클라이언트

1. 클라이언트

브라우저를 통해 특정 HTML 페이지, 이미지, 동영상 등 웹 상에 존재하는 자원(Resource)에 접근하는 주체

2. 서버

HTML 페이지나 이미지, 동영상 및 데이터 그 자체(ex. JSON, XML)를 보관하고 있는 외부 컴퓨터
요청한 자원을 제공해주는 사람

= 클라이언트가 요청한 자원을 제공해주기 위한 용도

3. 클라이언트 - 서버 모델

요청 : 웹페이지의 버튼을 클릭해서 url이 변경되면 새로운 resource에 요청을 보내서 바뀌는 것이다.
응답 : 특정 서버 컴퓨터에서 응답한 html파일을 보고 있는 것

4. URL(Uniform Resource Locator)

웹 상에 존재하는 수많은 서버 컴퓨터들 중 특정 서버가 가진 자원의 상세한 위치 정보를 나타내는 지시자 = 자원이 위치한 고유한 주소

5. 프로토콜

원활한 통신을 위하여 전세계에 표준화된 통신 규칙을 정하는 것
인터넷 프로토콜 : 인터넷을 통해 전달되는 데이터 간의 네트워크 통신 규칙

= 안전하고, 완전한 데이터 전달을 위해 설계된 데이터 전달 처리 방식

6. OSI 7 Layer Model

7. HTTP 통신규칙

1. HTTP Protocol : 웹 브라우저, 서버, 웹 애플리케이션은 HTTP프로토콜을 통해 통신한다.

1) HTTP Request & HTTP Response
요청과 응답은 HTTP 프로토콜 기반에서 동작한다.

• HTTP Request : 클라이언트의 요청
• HTTP Response : 서버의 응답
• DNS :

2) XML : 전통적으로 HTML처럼 마크업 형태로 작성되는 XML 확장자가 사용된다.

• JSON(Javascript Opject Notation)
  마크업 형태의 작성 포맷 대신, Javascript언어와 유사한 형태의 포맷인 JSON을 사용한다.
  데이터를 쉽게 교환하고 저장하기 위해 사용하는 데이터 교환 표준이다.

{ key : vale } JSON의 형태는 키와 값의 쌍으로 이루어져 있는 구조이다.

8. npm

cd + tab : cmd의 경로 이동이 가능하다.

package.json
dependencies : 라이브러리에 의존하고 있다.

• package-lock.json
  하위 의존성을 나타낸다. 다운 받아서 사용하면 알아서 관리해준다.

• http://127.0.0.1 = localhost : 나만 들어갈 수 있는 서버

forground가 실행중인 상태

• http://localhost:3000/index.html
  기본으로 설정되어 있는 값이다.

- NPM vs NPX

NPM : 라이브러리를 담고 있는 저장소 역할을 한다.
자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자
NPX : npm에 속한 패키지를 실행시키는 하나의 도구이다.
= 패키지 실행 도구

GET : 클라이언트 -> 서버로 리소스로 부터 정보를 요청하기 위해 사용되어지는 메서드이다.
POST : 클라이언트 -> 서버로 리소스를 생성, 업데이트하기 위해 데이터를 보낼 때 사용 되는 메서드이다.

9. 동기(Synchronous) vs 비동기(Asynchronous)

####- 동기
이전 작업이 다 수행되지 않을 경우, 다음 작업은 수행하지 못하는 상태
순서가 달라져서 실행이 안되는 문제가 발생, 코드를 파악하기가 어렵다.
= 화면이 새로고침이 되면 동기

####- 비동기
이전 작업의 수행 여부에 상관없이 다음 작업은 개별로 수행한다.
성능이 더 좋다. = 새로고침이 되지 않으면 비동기

https://www.jsv9000.app/

- javascript 동작 원리

event loop <- callback queue
javascript는 싱글쓰레드 방식이다. 사용자가 볼 때 한 번에 여러개가 처리되는 것 처럼 보여야 하기 때문에 브라우저 안에 web api를 사용해야 한다. 원래 하나의 call stack에서 사용한다.
setTimeout이 call stack을 들어갔다가 나오고 task queue로 할당
call stack에 있는 코드를 우선순위로 실행하고, call stack이 비어있을 경우 task queue에 있는 것을 call stack으로 가져와서 수행한다.

call stack = 실행 context맥락에 맞게 실행 context값이 달라진다.

10. Ajax

비동기 기반의 자바스크립트가 Ajax이다. 페이지를 로딩하지 않고 사용할 수 있다.
api생성할 수 있는 객체가 만들어진다. = 비동기

- 장점

1) 변경할 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않음
2) 변경할 필요 없는 부분은 렌더링 하지 않는다.
3) 비동기 방식으로 동작 -> 블로킹이 발생하지 않는다.

11. JSON

클라이언트와 서버 간의 HTTP통신을 위한 텍스트 데이터 포맷이다. 키와 값으로 구성된다.
javascript는 prototype 기반 언어이기 때문에 정확한 분류가 아닌, 실행되는 시점에 따라 참조하는 값이 달라진다.

const obj = {
      "id": 255,
      "name": "Yoo",
      "username": "Kang"
    };

- JSON.stringify

JSON.stringify메서드는 객체, 배열을 JSON 포맷의 문자열로 변환한다.
= 직렬화

const json = JSON.stringify(obj);

- JSON.parse

서버 -> 클라이언트에게 전송된 JSON 데이터를 사용하기 위해 문자열을 객체로 변환한다.
= 역직렬화

const parsed = JSON.aprse(json);
console.log(parsed);

- XMLHttpRequest

const xhr = new XMLHttpRequest();
api생성자 함수 -> 인스턴스 객체 생성

- HTTP 요청 전송

1) xhr.open('POST', '/users');
-> open메서드는 서버에 전송할 http요청을 초기화
2. xhr.setRequestHeader('content-type', 'application/json');
-> http요청 헤더 값을 설정한다. open메서드를 호출한 이후에 호출해야 한다.
3. xhr.send(); open메서드로 초기화된 http 요청을 서버에 전송한다.

12. REST API

REST : HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처
REST API : REST를 기반으로 서비스 API를 구현한 것

- JSON Server를 이용하여 REST API실습

1) JSON Server 설치 : npm init => npm install json-server
2) db.json파일 생성 : 키와 값으로 이루어진 json 파일을 생성한다.
3) JSON Server 실행 : json-server --watch db.json (--port 5000) 포트 변경 가능
4) npm run start
5) GET 요청

const xhr = new XMLHttpRequest(); // 객체를 생성한다.
xhr.open('GET', '/todos'); // todos리소스에서 모든 todo의 index를 가져온다.
xhr.send(); // HTTP 요청 전송
xhr.onload=()=>{
if (xhr.status === 200){
document.querySelector('pre').textContnt = xhr.response;
} else {
console.error