728x90

HTTP /0.9 ~ /2 까지는 기본적으로 TCP를 사용

 

HTTP 버전별 특징

/0.9

<!-- Request -->
GET /mypage.html
<!-- Response-->
<HTML>
A very simple HTML page
</HTML>
  • GET 요청밖에 없음
  • HTML 파일자체만 응답으로 보내줄 수 있음

 

/1.0

<!-- Request -->

GET /mypage.html HTTP/1.0
User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)

200 OK
Date: Tue, 15 Nov 1994 08:12:31 GMT
Server: CERN/3.0 libwww/2.17
Content-Type: text/html
<HTML>
A page with an image
  <IMG SRC="/myimage.gif">
</HTML>
  • 버전, 상태코드, Content-Type 이 추가되고 HTML 파일들 이외에 다른 문서들을 전송할 수 있음

  • 1 Request & 1 Response Per Connection
    • 매번 새로운 연결로 성능저하
    • 서버 부하 비용 ↑

 

/1.1

  • 지정한 timeout 동안 커넥션을 닫지 않는 방식. 한 커넥션 동안 여려 요청과 응답이 발생할 수 있다.
  • 하나의 커넥션에서 응답을 기다리지 않고 순차적인 여러 요청을 연속적으로 보내그 순서에 맞춰 응답을 받는 방식. 지연시간을 줄일 수 있다.
    • 첫번째 요청이 너무 길어지면 2번째 3번째 요청에 대한 응답 대기시간도 자동으로 길어진다.
  • Header 구조의 중복
    • http/1.1의 헤더에는 많은 메타정보들을 저장
    • 매 요청 시 마다 중복된 Header 값을 전송하게 되며 또한 해당 domain에 설정된 cookie 정보도 매 요청 시 마다 헤더에 포함되어 전송

/2

  • 기존 HTTP/1.x 버전의 성능향상에 초점을 맞춘 프로토콜
  • 표준의 대체가 아닌 확장
  • HTTP 메시지 전송 방식의 변화
    • 바이너리 프레이밍 계층 사용(새로 생김)
      • 메시지를 HEADER와 DATA 프레임으로 분할을 하고 이를 Binary로 인코딩한다. 
        • 파싱, 전송 속도 ↑, 오류 발생 가능성↓

Request and response multiplexing(다중화) -> Head Of Line Blocking 해결

임의의 프레임이 interleaving하여 끼어들기 가능

메시지간 순서라는것이 사라졌다.

 

Stream Prioritization -> 리소스간 우선순위를 설정 가능

Server Push -> 클라이언트가 요청하지도 않은 데이터를 서버가 알아서 Push해줌

html만 요청했는데 script.js와 style.css도 포함시켜줌

 

Header Compression (헤더 압축) -> 헤더의 크기를 줄여 페이지 로드 시간 감소

 

HTTP/1.1 HTTP/2
Persistent Connection HTTP 메시지 전송 방식의 변화
Pipelining 요청과 응답의 다중화
HTTP의 Head of Line Blocking 문제 리소스간 우선 순위 설정
Header 중복 문제 Server Push
  Header 압축
  TCP의 Heade of Line Blocking 문제

 

'HTTP' 카테고리의 다른 글

Basic HTTP Request/Response  (0) 2021.07.23
AJAX  (0) 2021.03.07
CSR vs SSR  (0) 2021.02.10
RESTful API 란?  (0) 2021.01.16
728x90
TCP : 전화와 유사 UDP : 라디오와 유사
일대일 연결만 가능 일대다 연결도 가능
손실되면 재전송 요청을 하므로 신뢰도가 높음 정보를 받았는지 확인치 않고 일방적으로 보냄
데어터의 순서와 무결성이 보장됨 데이터의 순서와 무결성을 보장하지 않음
속도가 상대적으로 느림 속도가 상대적으로 빠름
높은 신뢰도를 요하는 서비스에 적합 IPTV, 스트리밍 서비스에 적합

 

TCP Handshake

3 way handshake

3 way handshaking

연결할때는 3 way handshake를 이용해서 클라이언트와 서버가 총 3번 악수해서 연결이 잘되었다는 것을 확인한다.

 

4 way handshake

4 way handshaking

끊을 때는 4way handshake를 이용해서 끊겠습니다 -> 알겠습니다 -> 저도 끊겠습니다 -> 저도 알겠습니다 순서로  연결을 끊게 된다

 

HTTP (Hyper Text Transfer Protocol)

TCP/IP 위에서 전송하는 데이터의 규격에 대한 약속

 

HTTP의 특징

  • 단방향성 : 클라이언트가 서버에 요청을 보내고 이에 대한 응답을 받는 단방향적 통신 (서버가 클라이언트로 먼저 요청을 보낼 수 없다)
  • 비연결성 : 연결이 계속 유지되지 않고 요청에대한 응답이 끝나면 소켓을 끊는다 (소켓 통신과 반대되는 특징)
  • 무상태성 : 클라이언트가 서버와 연결된 상태가 아니기 때문에 기본적으로 상태를 가지지 않음. 이를 보완하기 위해 쿠키, 세션, 토큰을 사용함

 

HTTP Header의 구조

  • URL
  • HTTP 메소드
  • 응답 코드
  • IP 주소
  • 응답 헤더
    • contenth-length
    • date
    • server
  • 요청 헤더

https://velog.io/@sanspareilsmyn/6.-HTTP-Header

 

HTTP 캐시

응답의 헤더를 통해 컨텐츠 길이, 캐시의 유효시간, ETag를 전송한다.

 

캐시의 유효시간이 지나면 서버로부터 다시 읽어들이는데, 이 때 서버의 응답과 캐시로 가지고 있던 컨텐츠의 ETag가 같다면 업데이트하지 않는다.

 

'HTTP' 카테고리의 다른 글

HTTP 1.0 / 1.1 / 2  (0) 2021.07.23
AJAX  (0) 2021.03.07
CSR vs SSR  (0) 2021.02.10
RESTful API 란?  (0) 2021.01.16
728x90

자바스크립트 엔진이란

자바스크립트 코드를 해석하고 실행하는 인터프리터이다.

브라우저와 같이 자바스크립트를 실행해야하는 곳에 설치가 되어 있어 쉽게 접할 수 있다.

엔진의 종류

  • SpiderMonkey : 파이어폭스
  • V8 : 크롬, Node.js
  • Webkit : 사파리
  • Chakra : 엣지

엔진의 구성요소

자바스크립트 엔진

  • 메모리 힙 : 변수와 객체의 메모리 할당이 이뤄지는 곳
  • 콜 스택 : 코드가 실행됨에 따라 호출 스택이 쌓이는 곳

런타임

예시

사용자의 액션에 따라 Web APIs에 있는 setTimeout(또는 XMLHttpRequest)가 실행된다

setTimeout은 콜백 큐(또는 태스크 큐)에 밀어 넣어진다.

이벤트 루프는 콜 스택과 콜백 큐를 감시하면서, 콜스택이 비워지게 되면 콜백 큐에 대기 중인 항목이 있는지 확인하고, 있으면 스택에 올린다.

 

싱글스레드

자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 자바스크립트 엔진에는 콜 스택이 한개만 존재한다.

이로 인해 자바사크립트 엔진은 한번에 한개의 태스크만 처리가 가능하다.

 

그렇다면 브라우저는 어떻게 우리 눈에 여러 일이 동시에 일어나는 것처럼(애니메이션,request handling,...) 보이게 하는걸까?

그리고 호출스택에 처리 시간이 어마어마하게 오래걸리는 함수가 있으면 브라우저는 페이지를 그리지도 못하고 어느 코드도 실행을 못하게 될텐데 브라우저는 이런 상황을 어떻게 대비를 하고 있을까?

이런화면이 뜰것이다.

이는 바로 자바스크립트의 동시성(Concurrency) 이벤트 루프(Event loop)를 통해 해결된다..

즉 비동기 콜백을 활용하는 것이다.

자세한 처리로직은 상단의 그림으로 이해할 수 있을것이다.


논외

js파일 html에 넣을 때

 

브라우저는 렌더링 도중 자바스크립트와 만나게 되면 이에 대한 해석과 실행이 완료될때까지 렌더링을 멈춘다.

그렇기때문에 렌더링이 끝난 후 실행하기 위해 바디 하단에 스크립트를 두는것이 안정적이다.

  1. head에 삽입되는 경우
    • 무거운 스크립트가 실행되는 경우 렌더링에 방해가 될 수 있다.
    • 제이쿼리와 같은 설정을 위한 스크립트들이 사용된다.
    • DOM이 필요할 경우 document.onload 를 사용하여, load 이벤트 발생 시, 실행되도록 할 수 있다.
  • 바디 하단에 삽입되는 경우
    • 브라우저의 렌더링이 완료 된 후 실행되기 때문에, DOM을 조작할 수 있다.

부득이 head 태그에서 사용해야한다면 이러한 문제를 해결하기위한 추가된 속성이 있다.

바로

이런화면이 뜰것이다.

asyncdefer이다.

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

async또는 defer속성이 추가된 스크립트는 렌더링을 방해하지 않는다.

  • async
    • 외부 스크립트에만 사용할 수 있으며, 스크립트를 내려받는 즉시 실행한다.

  • defer
    • 비동기적으로 스크립트를 다운로드 하며, 렌더링이 완료된 후 스크립트를 실행한다.

'browser' 카테고리의 다른 글

크로스 브라우징  (0) 2021.08.21
브라우저 렌더링  (0) 2021.07.14
Local Storage vs Session Storage vs Cookies  (0) 2020.11.24
728x90

브라우저가 하는일

  • 웹 브라우저는 입력으로 들어온 HTML,JS,CSS를 읽어 웹페이지를 보여준다.
  • 이때 읽은 3개의 요소를 이용하여 하나의 웹페이지를 구성하고 보여주기 위해서 브라우저에서는 다음의 과정을 거친다.

User Interface

- 주소 표시줄, 뒤로/다음/새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스

Rendering Engine

- HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진

- 사파리: Webkit, 파이어폭스: Gecko, 크롬: Blink

Browser Engine

- 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진

Netowrking

- 네트워크 요청을 수행하는 파트

UI Backend

- 체크박스나 버튼과 같은 기본적인 웨젯을 그려주는 파트

Javascript Interpreter

- 자바스크립트 코드를 실행하는 파트 (크롬: V8)

Data Persistence

- LocalStorage,Cookie와 같이 보조기억장치에 데이터를 저장하는 파트


Rendering Engine

임무

  • HTML,CSS,JS, 이미지등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다
  • 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 트리를 생성한다

렌더링엔진의 동작과정(Critical Rendering Path)

1. DOM /CSSDOM Tree 생성

  • DOM Tree를 생성하기 위한 과정은 다음과 같다.
    • 토큰화 : HTML의 tag를 토큰으로 생성
    • 렉싱 : 토큰을 해당 속성과 규칙을 정의하는 노드객체로 변환
    • DOM Tree생성: 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <!-- Comment -->
        <h1> h1 tag </h1>
        <span> span tag </span>
        <div>
            <image alt="이미지" src="asdf.jpg"/>
        </div>
    </body>
</html>​

  • CSSOM Tree 생성
    • CSS로 만들어지는 트리
    • CSSOM은 DOM이 화면에 어떻게 표시될지를 알려주는 역할을 한다.
body{
   margin:0;
   padding:0;
   text-align:center;
 }


h1{  
   color:red;  
}

div{  
   width:50%;  
   margin: 0 auto;  
}

span{  
   display: none;  
}

2. Render Tree 생성

   - 렌더링 엔진이 DOM Tree와 CSSOM Tree를 합쳐서 렌더트리를 생성함

   - 화면에 표시되어야 할 모든 노드의 컨텐츠 스타일 정보를 포함하는 트리.

      - display:none, comment 등은 더이상 트리에 포함되지않음

3. Render Tree 배치

   Layout(Reflow)

      - viewport내에서 요소들의 정확한 위치와 크기를 계산

      - 스타일 속성이 계산된다. %나 em같은 단위는 viewport를 기준으로 pixel단위로 변환된다.

   Paint

      - 화면에 실제 픽셀로 그려지도록 변환

 

 


UI 업데이트

- critical rendering의 path를 줄이면 브라우저의 렌더링 시간을 줄일 수 잇다. 

 

UI 업데이트되는 3가지 상황

   1. 다시 Layout이 발생하는 경우

      - 수치를 다시 계산해야할 경우 Layout을 다시 시행한다.

      - 주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀌었을 때 다시 발생. 이후 Paint

   2. Paint부터 다시 발생이 되는 경우

      - 실제 layer의 수치를 변경 시키지 않는 경우 시행한다.

      - 주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생

   3. layer의 합성만 다시 발생하는 경우

      - layout과 paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가진다.

      - layer:

         - layout과정 이후에 브라우저가 필요에 의해 layer를 생성.

         - render tree의 노드객체들은 layer에 포함됨.

         - layer또한 트리의 형태를 가진다. 그리고 rendering engine이 각 layer를 painting 과정에서 그려준 이후 비트맵으로 합성하여 페이지를 완성한다.

 

브라우저별로 같은 CSS여도 layout부터 시행하는지 composite을 하는지 다르기 때문에 www.csstriger.com에서  성능을 확인한다.

'browser' 카테고리의 다른 글

크로스 브라우징  (0) 2021.08.21
자바스크립트 엔진(인터프리터)  (0) 2021.07.14
Local Storage vs Session Storage vs Cookies  (0) 2020.11.24
728x90

Grid

grid 또한 flex와 마찬가지로 기존 css로는 layout을 표현하기 어렵다는 단점을 보완하기 위해 만든 css attribute이다 .

flext와 유사하게 container에 display:grid로 선언하여 container 내부의 item을 정렬하는데 사용하는 속성이다.

 

flex와 차이점으로는 flex는 direction을 한쪽으로만 지정하여 item을 배치하지만(flex-direction)

grid는 2차원적으로 row와 column을 2차원적으로 배치할 수 있다

페이지 레이아웃을 배치할 때 grid를 flex의 상위호완으로 봐도 무방하다 (그만큼 더 어렵지만)

 

Container Item
grid-template-rows/grid-template-columns: grid별 너비/높이 명시적으로 설정 grid-column-start / grid-column-end / grid-column / grid-row-start / grid-row-end / grid- row: 각 grid의 영역을 지정
gap/row-gap/column-gap: grid 간 간격 설정 grid-area: grid-template-areas의 각 grid별 매칭을 위한 네이밍 속성.
grid-auto-rows/grid-auto-columns: grid별 너비/높이 암시적으로 설정 align-self(justify-self): grid를 해당 cell안에서 세로(가로) 정렬
grid-template-areas: grid의 배치를 grid별 네이밍(grid-area)으로 지정. place-self: align-self와 justify-self를 같이 쓸 수 있는 속성
align-items(justify-items) : 아이템을 각 row(column)안에서 세로(가로) 방향으로 정렬  
place-items: align-items와 justify-items를 같이 쓸 수 있는 속성  
align-content(justify-content): container 통째로 세로(가로) 방향으로 정렬  
place-contents: align-content와 justify-content를 같이 쓸 수 있는 속성  

grid-template-columns / grid-template-rows

각 grid(item)의 row의 크기(너비)를 설정해주는 css attribute이다.

.container{
    /* grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 200px, 200px, 500px로 지정한다.*/
    grid-template-columns: 200px 200px 500px; 
	
    /*grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 1:1:1로 지정한다.*/
    grid-template-columns: 1fr 1fr 1fr ;
    
    /*grid를 4개씩 끊어 한 row에 표현. 각각의 너비를 1:2:1:2로 지정한다.*/
    /*repeat(반복횟수,반복값)*/
    grid-template-columns: repeat(2, 1fr 2fr);
    
    /*grid를 2개씩 끊어 한 row에 표현. 각각의 너비를 200px 나머지 2:1로 지정한다.*/
    grid-template-columns: 200px 1fr;
    
    /*grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 100px,200px,100%-300px로 지정한다.*/
    grid-template-columns: 100px 200px auto;
    
    /*grid를 3개씩 끊어 한 row에 표현. 각각의 너비를 최소 100 최대 auto로 지정한다.*/
    /*내용이 아무리 적더라도 100xp은 확보하며 내용이 너무 많아 100px이 넘어가면 자동으로 늘어난다*/
    grid-template-columns: repeat(100px,auto);
    
    /*grid를 한 row에 자동으로 갯수를 채워 넣는다. 각각의 너비를 최소 20% 최대 auto로 지정한다*/
    /*내용이 매우 적으면 한 grid당 20%를 차지하게 되며 한 row에 총 5개의 grid가 채워진다.*/
    /*내용이 너무 많으면 auto로 설정된 실제 computed value에따라 채워지는 갯수가 결정된다.*./
    /*다 못채운다면 빈칸으로 남긴다*/
    grid-template-columns: repeat(autofill,max(20%,auto));
    
    /*grid를 한 row에 자동으로 늘여 채워 넣는다.*/
    grid-template-columns: repeat(autofil,max(20%,auto));
}

 

grid-template-areas

각 grid에 이름을 붙이고 이 이름을 이용해서 container내에서 grid를 배치하는 css attribute

.container {
  width:300px;
  display:grid;
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

/*--------------Itmes-------------*/
div{border:solid 1px;}
.header { grid-area: header; text-align:center;}
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; text-align:center;}
.sidebar-b { grid-area: b; text-align:right}
.footer { grid-area: footer; text-align:center}

 

row-gap / column-gap / gap

각 grid(item)사이의 간격을 설정한다.

.container {
    /* grid의 row간 간격을 10px로 설정한다*/
    row-gap: 10px;
    /* grid의 column간 간격을 20px로 설정한다*/
    column-gap: 20px;
}

/*위의 상황과 동일하다
.container  {
   gap: 10px 20px;
}
*/

/*column,row 모두 10px
.container  {
   gap: 10px;
}
*/

 

grid-auto-columns / grid-auto-rows

위에 grid-template-columns(or grid-template-rows) 에서 크기를 지정하지 않은 grid(item)들에 대헤서 자동으로 크기를 부여한다. 

미리 columns(or rows)의 갯수를 알 수 없어 크기를 명시적으로 선언할 수 없을때 사용한다.

grid-auto-columnsgrid-auto-row 중 하나만 사용가능하다.

.container {
    display:grid;
    grid-template-columns: 80px 100px;
    grid-template-rows: 30px 50px;
    
    /*위에 설정한 갯수를 초과한 엘리먼트들에 대해서 적용되는 속성*/
    grid-auto-rows: minmax(100px, auto);
}

 

grid-column-start / grid-column-end / grid-column / grid-row-start / grid-row-end / grid- row

chrome 또는 firefox의 개발자도구의 element를 보면 다음과 같이 grid의 구성요소를 볼수 있는 버튼이 있다. 이 버튼을 누르면 다음과 같이 grid의 각 셀의 영역이 어떻게 지정되어있는지 알 수 있다.

이 나뉜 구역을 바탕으로 각 셀의 영역을 어마나 차지하게할지 지정하는 css attribute이다.

위 상황의 css는 다음과같다.

 

.container{
  display: grid;
  grid-template-columns: 50px 50px 190px;
}

.item:nth-child(2){
  background-color:orange;
  border:solid 2px;
  grid-row:1 / 2;
  grid-column:1 / 3; /*어디서부터 어디까지 차지하게할지*/
}
.item{
  background-color:green;
  border: solid 1px;
}

.item:nth-child(3){
  background-color:orange;
  border:solid 2px;
  grid-column:3; /*어디서부터 자동 지정된 한칸*/
}

.item:nth-child(4){
  background-color:orange;
  border:solid 2px;
  grid-row:14 / 15;
  grid-column:1 / span 1; /*어디서부터 몇칸을 차지하게 할지*/
}

CSS-Grid 게임 겸 공부 사이트

https://cssgridgarden.com/#ko

 

 

728x90

Array

Array.apply(null,Array(length))

  • 특정 길이의 iterable한 Array 객체를 생성한다.
Array(7) // [,,,,,,,] 길이가 7인 배열. not iterable
Array.apply(null,Array(7)) // == Array(undefined,undefined,...,undefined) 길이가 7인 undefined 배열, iterable

Array.apply(null,Array(7)).map((el,i)=> i) // [0,1,2,3,4,5,6]

Array.of()

  • 전달인자의 개수나 데이터 타입에 관계없이 새 배열 인스턴스를 생성한다.
Array.of(7); // [7]
Array.of(1,2,3) // [1,2,3]

Array(7) // [ , , , , , ,] 길이가 7인 배열
Array(1,2,3) // [1,2,3]

Array.prototype.entries()

  • 배열의 각 익덱스에 대한 key/value 쌍을 가지는 새로운 Array Iterator 객체를 반환한다.
const arr = ['a','b','c'];

const iterator = arr.entries();

console.log(iterator.next().value);// [0,'a']

console.log(iterator.next().value);// [1,'b']

for( const [key,value] of arr.entries()){
  console.log(key, value) 
}
// 0,'a'
// 1,'b'
// 2.'c'

Array.prototpye.shift() / Array.prototype.unshift()

  • shift()
    • 배열에서 첫 번째 요소를 삭제하고 그 요소를 반환한다.
  • unshift()
    • 배열에서 첫 번째 요소를 추가하고 새로운 길이를 반환한다.
let arr = ['a','b','c'];

arr.shift();
console.log(arr);// ['b','c']

const newLength = arr.unshift('d'); 
console.log(arr); //['d','b','c']
console.log(newLength);// 3

Array.prototype.splice()

  • 배열에서 요소를 추가/삭제 하고 삭제한 요소 배열을 반환한다.
let arr = ['a','b','c'];
arr.splice(1,2,'k');
console.log(arr) // ['a','k']

Array.prototype.join()

  • 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
let arr = ['a','b','c'];
console.log(arr.join('-'));//'a-b-c'
console.log(arr.join(''));//'abc'

Array.prototype.indexOf()

  • 배열에서 지정된 요소를 찾을 수 있는 첫번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.
let arr = ['a','a','b'];
console.log(arr.indexOf('a')) // 0
console.log(arr.indexOf('a',2)) //1
console.log(arr.indexOf('c') // -1

Array.prototype.keys()

  • 배열의 각 _인덱스_를 키 값으로 가지는 새로운 Array Iterator객체를 반환한다.
let arr =['a','b','c'];
const iterator = arr.keys();

for(const key of iterator){
  console.log(key);
} // 0
  // 1
  // 2

Array.prototype.flat()

  • 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.
let arr = ['a',['b','c'],[['d','e']]];
console.log(arr.flat()); // ['a','b','c',['d','e']]
console.log(arr.flat(2)); // ['a','b','c','d','e']
console.log(arr.flat(Infinity))//['a','b','c','d','e']

Array.prototype.flatMap();

  • 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 flatten한다. 기본적으로 flat depth는 1이다.
let arr = [1,2,3];

arr.map(item=>item*2); // [2,4,6]

arr.map(item=>[item*2]) // [[2],[4],[6]]
arr.flatMap(item=>[item*2]) // [2,4,6]

arr.flatMap(item=>[[item*2]]) // [[2],[4],[6]]

Array.from()

  • array-like object나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다.
console.log(Array.from('foo')); // ['f','o','o']

console.log(Array.from([1,2,3],x=>x+x); // [2,4,6]

 

Object

Object.assign()

  • 하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사한다. 같은 key는 덮어씌워 새로운 값으로 갱신한다.
const target = {a:1,b:2};
const source = {b:4,c:5};

const returnTarget = Object.assign(target,source);

console.log(returnTarget); // {a:1,b:4,c:5}

console.log(target); // {a:1,b:4,c:5} target도 값이 갱신된다!!

Object.freeze()

  • 객체의 값을 변경할 수 없도록 동결한다. Object의 const라고 보면될듯하다.
const obj = {
  prop: 42
};

obj.prop = 41;

console.log(obj.prop); // 41

Object.freeze(obj); 

obj.prop = 40; // error in strict mode

console.log(obj.prop) // 41

 

String

'

String.prototype.match()

  • 문자열이 정규식과 매치도는 부분을 검색한다.
var str = 'For more information, see Chapter 3.4.5.1';
var re = /see (chapter \d+(\.\d)*)/i;
var found = str.match(re);

console.log(found);

String.prototype.padEnd() / String.prototype.padStart()

  • 현재 문자열에 다른 문자열을 채워 주어진 길이를 만족하는 새로운 문자열을 반환한다.
console.log(`abc`.padEnd(10)); // 'abc       '
console.log(`abc`.padEnd(10,'foo')); // `abcfoofoof`
console.log(`abc`.padEnd(6,'123456')); // `abc123`
console.log(`abc`.padEnd(1)); // `a`

String.prototype.slice()

  • 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.
console.log(`abc`.slice(1)) // bc
console.log(`abc.slice(0,1)) // a
console.log(`abc`.slice(-1)) // c
console.log(`abc`.slice(-3,-2) // a

String.prototype.split()

  • 지정한 구분자를 이용하여 여러개의 문자열로 나눈다
console.log(`ab cd`.split(' ')); // ['ab'.'cd']
console.log(`ab cd`.split('')); //['a','b',' ','c','d']
console.log(`ab cd`.split()); // ['ab cd']

String.prototype.substring()

  • 문자열의 시작 인덱스부터 종료 인덱스 전까지 문자열의 부분 문자열을 반환한다.
const str = 'abcde'

console.log(str.substring(1,3)); // bc

console.log(str.substring(2)); // cde

String.prototype.trim() / String.prototype.trimEnd() / String.prototype.trimStart()

  • trim
    • 양끝의 공백(space, tab, NBSP)을 제거해준다.
  • trimEnd
    • 뒤의 공백을 제거해준다.
  • trimStart
    • 앞의 공백을 제거해준다.
const str = ' abcd '

console.log(str.trim()); 'abcd'
console.log(str.trimEnd()); ' abcd'
console.log(str.trinStart()); 'abcd '

 

Proxy

  • 특정 객체(array,object)를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 intercept하는 객체로 작업은 Proxy 자체에서 처리하기도 하고, 원래 객체가 처리하도록 넘겨주기도한다.

참고사이트1
참고사이트2

'VueJS' 카테고리의 다른 글

Vue3 - 3.Type Fundamentals  (0) 2021.12.28
Vue3 - 2. Vue3 + Typescript  (0) 2021.12.28
Vue3 - 1. Composition API  (0) 2021.12.11
vue3 - 0.주요 특징  (0) 2021.12.10
VueJs Project Architecture  (0) 2021.01.28
728x90

용어의 개념은 헷갈리지 않도록 다음과 같이 잡고 가겠다.
주체 : main. 다른 주체를 호출하는 함수
다른 주체 : main에서 호출하는 함수.

Blocking vs Non-Blocking

다른 주체가 작업할때 "제어권"이 해당 주체에게 넘어가는지 넘어가지 않는지로 구분.

  • Blocking
    • 다른 주체가 작업할 때 제어권이 주체에서 다른 주체에게 넘어간다.
    • 다른 주체가 작업이 끝날때까지 주체는 모든 작업을 중단하고 결과가 return 될때까지 기다린다.
  • Non-Blocking
    • 다른 주체의 작업완료 여부에 관련 없이 자신의 작업을 이어간다.
    • synchronous 기반 언어에서 다른 주체는 주체에게 요청 받는 즉시 응답을 보내 주체가 계속 제어권을 가질수 있도록 해준다.

Synchronous vs Asynchrnous

다른 주체에서 결과를 돌려주었을 때 어느 주체가 코드의 순서와 해당 결과에 관심이 있는지 아닌지로 구분.

  • Synchronous
    • 주체가 다른주체의 작업 완료 여부에 신경을 쓰게 되어 작업을 동시에 수행하거거나, 동시에 끝내거나, 끝나는 동시에 시작함을 의미
    • 예를 들어 송금 서비스가 있다. A가 B에게 송금 메시지 전송, B가 A에게 수금 성공 메시지 전송, 이후 A와 B는 각각 차액 증액 시행.
      • 요청과 응답이 발생한 후 이 결과를 바탕으로 동시에 같은 작업을 동시에 함.
    • 응답 값이 곧 작업 결과와 일치한다.
  • Asynchronous
    • 주체가 다른주체의 작업 완료 여부에 신경을 쓰지 않아 시작, 종료가 일치하지 않으며, 끝나는 동시에 시작을 하지 않음을 의미
    • 응답 값이 작업 결과가 함께 전송되지 않고 값도 다를 수 있다.
    • js에서 비동기 처리를 할 때, axios의 return 값은 바로 promise를 반환한다.

Blocking - Synchronus

  • 주체는 다른 주체를 호출 하면서 동작하지 않고 기다린다. 이후 다른 주체가 작업 결과를 반환하면 주체는 비로소 그 결과를 바탕으로 작업을 개시한다.
  • Blocking - Synchronous의 예시로는 Java의 scanner 입력요청이 있다. 입력요청을 하는 순간 프로그램은 스탑하며(blocking) 입력결과가 반환된 순간 이 결과를 바탕으로(sync) 이후의 작업이 이어진다.
  • const fs = require('fs');
    const data = fs.readFileSync('/file.md'); // 파일을 읽을 때까지 여기서 블로킹 됩니다.

NonBlocking - Synchronous

  • 주체는 다른주체에 요청을 보낸 후, 다른 주체의 작업 결과를 기다리지 않고 본인의 작업을 계속한다. 이 때 주체는 다른 주체에게 중간중간 해당 작업이 끝났는지 물어본다. 이 결과 다른 주체가 작업 결과를 반납하면 주체는 그 결과를 바탕으로 작업을 개시한다.
  • NonBlocking - Synchronous의 예시로는 정보의 로드율(다운로드. 업로드)이 얼마만큼인지 보여줄 때이다. chrome에서 파일을 받을동안 사용자는 인터넷 서핑을 계속 이어갈 수 있다.(non-blocking) 그리고 다운로드가 진척되는 중간중간 진행정도(%)를 사용자에게 실시간 UI 보여준다.(synchronous)

Blocking - Asynchronous

  • 주체는 다른주체에게 요청을 보낸 후 동작하지 않고 멈춘다. 하지만 주체는 다른 주체의 작업 결과값에 관심이 없다.
  • asynchronous이기 때문에 다른 주체는 바로 결과를 반환하고 이후 작업을 시작한다. 하지만 주체는 작업결과를 기다린다.
    • async 함수가 응답과 작업결과가 다른 함수인데 blocking으로 작업결과가 나오기까지 기다린다라... blocking/sync와 별반 다를바 없어보인다. 이런 상황은 주로 개발자 실수로 만들어진 경우가 대다수다.

NonBlocking - Asynchronous

  • 주체는 다른 주체에게 요청을 보낸후, 다른 주체의 작업 결과를 기다리지 않고 본인의 작업을 계속한다. 다른 주체는 요청받은 작업을 하다가 작업이 끝나면 주체의 callback함수를 실행한다.
  • js의 비동기 처리가 이에 해당한다.(정밀하게는 동기적으로 작동하지만) 주체가 다른 주체를 호출하고 바로 주체 본연의 일을 한다.(비동기 함수는 바로 promise를 반환하기때문에 동기적으로 작동해도 이것이 가능) 이후 다른 주체가 결과를 도출하면 이 결과를 바탕으로 주체에 있던 callback함수를 실행한다. 각자 본인의 일을 하고 잇는 것이다.
  • const fs = require('fs');
    fs.readFile('/file.md', (err, data) => {
      if (err) throw err;
    });

Javascript 에서 의미하는 async/ await 는?

비동기 처리란?

특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성이다. 동기 처리를 사용할 시 비동기 작업 결과값을 마냥 기다릴 수 없기 때문에 기본적으로 비동기 처리를 사용한다.

비동기 처리 방식에는 작업결과를 이용할 수 없다는 문제점이 있다. 이 문제점을 JS에서는 비동기함수(ex. axios)가 callback함수를 넘겨받아 해결하도록 함으로써 해결한다.(callback, promise, await)

async

async function 의 의미는 이 함수가 promise vlaue를 반환할 것이라는 의미이다. 즉, 직역적으로도 비동기 함수라는 뜻이다.
async 함수는 보통 내부에서 await를 사용중일 때 선언하는데 await또한 비동기 함수의 promise.value를 반환받을 때까지 기다리는 기능을 하므로 await를 선언한 함수도 어쩔 수 없이 비동기 함수가 되게된다.

await

await는 얼핏보면 async 함수내에서 await를 호출한 시점부터 이후의 코드의 실행을 멈추는 Blocking 기능을 한다고 볼 수 있다.

하지만 정확히 따져보면 await는 Blocking 기능을 수행하지 않고 있다.
그 이유는 실제 Blocking이 일어나고 있었다면 await하는 동안 해당 프로그램은 이벤트 처리를 할 수 없어야한다. 하지만 await 중에도 이벤트 발생시 이벤트 처리는 이벤트 처리대로 실행할 수 있다.

결론: async 함수는 내부적으로 blocking/sync 로 보일 수 있다. 하지만 현실은 promise.then 기반의 non-blocking/ async 구조이다. 그리고 async함수는 그 자체적으로 promise를 반환하는 async 함수이다.

'기타' 카테고리의 다른 글

MVC 란?  (0) 2021.05.19
library vs framework  (0) 2021.03.07
CI(continuous Integration)/CD(Continuous Delivery/Continous Deployment)  (0) 2021.02.11
728x90

웹사이트를 비롯한 소프트웨어에서 사용하는 구조

Model : 데이터를 저장하는 장소.

View : 눈에 보의는 것. 웹에서는 HTML

Controller : 사용자의 행동에따라 Model과 View를 조작하는 코드 파일. 예를들면 routing 기능이 있겠다.

MVC파일의 구조이다.

사용자가 링크창에 라우팅을 했을때 일어나는 상황은 다음과같다.

  1. 사용자가 Lecture/Watch/lecNo=1 입력
  2. lectureController.cs 에서 watch라는 함수가 강의 목록을 인자로 받아서 Service의 lectureRepository의 GetOne 함수를 호출 (lecRep.GetOne(lecNo))
  3. Service의 lectureRepository에서 강의의 상세정보를 받는다
  4. watch.cshtml에서 해당내용 반환. 결과물 화면이 보여지게된다.

+ Recent posts