[8주차][Lobo2u]웹팩/자바스크립트 비동기/이벤트 루프

#26 웹팩이란?

@@ -0,0 +1,20 @@
+#웹팩의 정의
+웹팩이란 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리를 말한다!
+즉, 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러로서 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.
+웹팩 버전 4.0.0 이후로는 프로젝트를 번들링하기 위한 설정파일을 필요로 하지 않지만, 사용자 요구에 따라 기대이상으로 유연하게 설정이 가능하다.
+#디펜던시 그래프
+하나의 파일이 다른 파일에 의존할 때마다, webpack은 이것을 의존성으로 취급한다.
+이를 통해 webpack은 이미지 또는 웹폰트와 같은 코드가 아닌 애셋을 가져와, 애플리케이션에 의존성으로 제공할 수 있다.
+애플리케이션을 처리할 때, 커맨드 라인 또는 설정 파일에 정의 된 모듈 목록에서 시작한다.
+엔트리포인트에서 시작하여, webpack은 애플리케이션에 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드한 다음, 모든 모듈을 브라우저에 의해 로드되는 작은 수의 번들로 묶는다.
+#번들링
+기본적으로 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역활.
+주로  JavaScript를 위한 번들러지만 플러그등을 통해 html, css, 이미지 파일까지 압축화하거나 최적화 해준다.
+#웹팩과 번들링의 차이는?
+웹팩은 번들러, 번들링은 하는 행동
+음.. 프린터기를 예로 들자면
+프린터기는 프린터하는 도구-웹팩은 번들링하는 도구:번들러
+프린트는 종이를 뽑는 과정-번들링은 파일을 압축, 최적화하는 과정
+
+
+https://webpack.kr/concepts/

#27 자바스크립트에서의 비동기

@@ -0,0 +1,16 @@
+#자바스크립트에서 비동기의 정의
+특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것
+#제이쿼리의 ajax
+화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있다.
+$.get()을 통해 HTTP GET 요청을 전송해 지정된 URL에서 데이터를 가져온다.
+서버에서 받아온 데이터는 response 인자에 담긴다.
+특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것.
+#setTimeOut()
+Web API의 한 종류.
+코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행.
+#콜백 지옥과 해결방법
+비동기 처리과정중 콜백 안에 콜백을 계속 무는 형식으로 코딩을 하는것.
+가독성도 떨어지고 로직을 변경하기도 어렵다.
+코딩패턴의 변경이나 Promise나 Async를 사용해 콜백지옥 해결 가능
+
+https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

#28이벤트 루프

@@ -0,0 +1,18 @@
+#이벤트 루프의 정의
+항상 대기하고 있다가 호출 스택이 비워지면 태스크 큐에서 함수를 하나씩 호출 스택으로 밀어올린다.
+모든 asyncio 응용프로그램의 핵심으로서 비동기 태스크 및 콜백을 실행하고 네트워크 IO 연산을 수행하며 자식 프로세스를 실행하는 것
+#ECMAScript에는 이벤트 루프가 없다.
+자바스크립트는 단일스레드기반의 언어로서 자바스크립트 엔진은 단일 호출 스택을 사용한다.
+실제 자바 스크립트가 구동된느 환경에서는 주로 여러 개의 스레드가 사용되는데 이러한 구동환경이 단일 호출 스택을 사용하는 자바스크립트엔진과 상호연동하기 위해 사용하는 장치가 바로 ‘이벤트 루프’이다.
+#단일 호출 스택과 Run-to-Completion
+자바스크립트의 함수가 실행되는 방식:”Run to Completion”
+하나의 함수가 실행되면 이 함수의 실행이 끝날 때까지는 다른 어떤 작업도 중간에 끼어들지 못한다.
+자바스크립트 엔진은 하나의 호출 스택을 사용하며, 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고 스택에서 제거되기 전까지는 다른 어떠한 함수도 실행될 수 없다.
+#테스트큐와 이벤트 루프
+태스트큐는 콜백 함수들이 대기 하는 큐 형태의 배열
+이벤트 루프는 호출 스택이 비워질 때마다 큐에서 콜백 함수를 꺼내와서 실행하는 역활
+
+
+https://vimeo.com/96425312
+https://meetup.toast.com/posts/89
+https://www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2

CORS란?

@@ -0,0 +1,14 @@
+CORS란?
+Cross-Origin Resources Sharing
+추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
+리소스가 자신의 출처(도메인,프로토콜,포트)와 다를때 교차 출처 HTTP 요청을 실행
+브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송 지원
+-XML HttpRequest와 Fetch API 호출
+-웹폰트(css내 @font-face에서 교차 도메인 폰트 사용시)
+-WebGL 텍스쳐
+-drawImage()를 사용해 캔버스에 그린 이미지/비디오 프레임
+-이미지로부터 추출하는 CSS Shapes
+단순요청:CORS preflight를 트리거하지않는 simple requests
+GET/HEAD/POST
+https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
+

Closure의 정의

@@ -0,0 +1,7 @@
+클로저란?
+자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다.
+클로저는 생성된 시점의 유효범위 내에 있는 모든 지역변수로 구성되는 함수와 함수가 선언된 어휘적 환경의 조합이다. 
+클로저는 어떤 데이터와 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다.
+Scope에 묶인 변수를 바인딩하기 위한 일종의 기술로서 함수를 저장한 레코드이며 스코프의 인수들은 클로저가 만들어질때 정의된다.
+스코프 내의 영역이 소멸되었어도  독립된 복사본인 클로저를 통해 계속해서 접근할수있다.
+https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

JSX의 정의

@@ -0,0 +1,37 @@
+JSX란?
+자바스크립트의 확장문법으로서 React.createElement를 호출하기 위한 문법으로 사용되었고,React 17.0 이상에서는 _JSX로 트랜스파일도 가능해졌다.
+브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
+*번들링?
+Bundling.
+모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업
+요리키트, 식물재배 키트…. 등과 같이 어떠한 것을 만들때 쉽게 만들수 있도록 해주는것
+*바벨?
+바벨이라는 도구를 통해 구형 브라우져에서도 돌아가게끔 최신 문법을 변환해주는 도구!
+문법이 새로 나왔지만 구식인 브라우저는 이것을 적용을해주지 않는다! 
+이때 바벨은 구형 브라우져에서도 돌아가게끔 최신 문법을 변환해주는 도구!
+JSX를 사용함으로써 React.creatElement를 일일이 호출하지 않고도 편하게 UI를 렌더링할 수 있다.
+*렌더링?
+아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 공업 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도. 주로 디자인 용어로 쓰임
+[JSX문법 규칙]
+1.컴퍼넌트에 여러 요소가 있다면 반드시 부모 하나로 감싸주어야 한다.
+-Virtual Dom에서 컴포넌트 변화를 효율적으로 비교할수 있게 된다.
+2.자바스크립트 표현
+-JSX가 내부에서 코드를 {}로 감싸면 자바스크립트 표현식을 작성할 수 있다.
+3.조건부 연산자
+조건에 따라 다른 내용을 렌더링 해야 할때는 
+1)JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나
+2){} 안에 조건부 연산자인 삼항연산자를 사용한다.
+4.AND(&&)를 사용한 조건부 렌더링
+리액트에서 false를 렌더링할때는 null과 마찬가지로 아무것도 나타나지 않는다. 
+다만 falsy한 값은 예외적으로 화면에 나타난다.
+*falsy한 값? 
+Boolean 문맥에서 fasle로 해결되는 값
+
+5.undefinded를 렌더링 하지 않기
+JSX 내부에서 undefined를 렌더링하는 것은 괜찮지만 바로 undefinded를 사용할 경우 다음과 같은  오류가 발생한다.
+
+따라서, 어떤 값이 -할 수도 있다: OR(||) 연산자를 사용하여 undefined일 때 사용할 값을 지정하여 주어 오류를 방지할수있다.
+
+https://ko.reactjs.org/docs/react-without-jsx.html#gatsby-focus-wrapper
+[리액트를 다루는 기술/김민준/길벗]
+https://developer.mozilla.org/ko/docs/Glossary/Falsy

Redux에서 Flux란?

@@ -0,0 +1,35 @@
+FaceBook에서 Flux아키텍처를 발표했을 당시 flux에 대한 오픈소스 라이브러리를 함께 공개하였으나 이 라이브러리에는 디스패처만 구현되어 있을 뿐 완전한 flux 프레임워크라고 부르기엔 다소 무리가 있었다고 한다.
+따라서 flux 기반의 향상된 라이브러리를 공개, 지원하기 시작했는데 이렇게 공개된 라이브러리중 가장 널리 사용되고 대표적인 라이브러리중 하나가 redux이다.
+#FLUX의 문제점과 Redux에서의 해결방법
+문제점1.스토어의 코드는 애플리케이션 상태를 삭제하지 않고는 리로딩이 불가능하다.
+=>스토어는 애플리케이션 상태만을 가지게 하여 리로딩하지 않도록 했고, 또 다른 객체인 리듀서를 통해 모든 상태변환 로직을 관리하게 했다.
+리듀서를 리로딩하는것으로 애플리케이션 상태를 잃어버리지않고 관련 로직만을 리로딩할 수 있게 되면서 문제 해결!
+*리듀서란?이전 상태와 Action을 합쳐 새로운 state를 만드는 조작.
+문제점2.애플리케이션 상태는 매 액션마다 재 기록된다.
+액션이 스토어로 전달되었을때, 기존의 애플리케이션 상태를 수정하는 대신 그 상태를 복사한 뒤 복사본을 수정한다.
+*디스패처란?
+여러 다중 스레드 서버 프로세스가 SMTP 연결 서비스에 대한 역활을 공유할 수 있게 하는 다중 스레드 디스패칭 에이전트
+자체 구성에 나열된 TCP 포트에 대한 중앙 수신기의 역활 수행.
+*SMTP란?
+Simple Mail Transfer Protocol
+인터넷에서 이메일을 보내기 위해 이용되는 프로토콜
+*TCP란?
+Transmission Control Protocol
+IP 프로토콜 위에서 연결형 서비스를 지원하는 전송계층 프로토콜
+-redux란?
+자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
+오픈소스 자바스크립트 라이브러리의 일종으로, state를 이용해 웹사이트 혹은 애플리케이션의 상태관리를 해 줄 목적으로 사용
+일관적으로 동작하고 서로 다른 환경에서 작동하고 테스트하기 쉬운 앱을 작성하도록 도와준다.
+*컨테이너? 
+같은 타입의 여러 객체를 저장하는 일종의 집합
+클래스 템플릿으로서, 컨테이너 변수를 선언할 때 컨테이너에 포함할 요소의 타입을 명시할 수 있다.
+복사 생성과 대입을 할 수 있는 타입의 객체만을 저장할 수 있다.
+요소의 추가 및 제거를 포함한 다양한 작업을 도와주는 여러 멤버 함수를 포함하고 있다.
+-flux란?
+facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐
+단방향 데이터흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역활을 한다.
+이전까지의 프레임워크와는 달리 패턴과 달리 패턴과 같은 모습을 하고있기 때문에 새로 코드의 작성없이도 바로 flux를 이용해 사용할 수 있다.
+https://ko.redux.js.org/introduction/getting-started/
+http://tcpschool.com/cpp/cpp_container_intro
+https://blog.naver.com/backsajang420/22137124428
+https://docs.oracle.com/cd/E19957-01/820-0512/bgagx/index.html

VirtualDom의 정의

@@ -0,0 +1,26 @@
+VirtualDOM이란?
+Virtual dom이란?
+1.VIRTUAL DOM의 정의
+가상 dom은 실제 dom을 업로드하는 것보다 훨씬 빠르다
+여기서 dom이란!
+Document Object Model의 축약어이다.
+즉, 문서객체모델 이라 할 수 있다.
+여기서 문서객체모델이란!
+XML,HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다.
+*객체화:제품을 만들때 사용하는 설계도인 클래스를 통하여 제품인 객체를 만들어내는 일! 상품코드같은 느낌인가!
+*추상화:복잡한 자료등으로 부터 핵심적인 개념 또는 기능을 간추려 내는 것!
+-물리수준에서의 추상화:시스템의 저장 방식을 기술
+-논리수준에서의 추상화:어떠한 데이터가 데이터베이스를 저장하는지 기술
+-보기(view) 수준에서의 추상화:데이터 전체 가운데 일부만을 기술
+[DOM]
+즉, DOM은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스로서 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
+DOM은 W3C의 표준 객체 모델로서 계층 구조로 표현되는데, JAVA SCRIPT의 계층 구조는 다음과 같다.
+
+[VIRTUAL DOM]
+UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 REACT DOM과 같은 라이브러리에 의해 실제 “DOM”과 동기화하는 프로그래밍 개념이다.
+이러한 “재조직” 과정을 통해 React의 선언적 API를 가능하게 한다.
+앱구축에 사용해야 하는 어트리뷰트(Attribute,속성) 조작, 이벤트 처리, 수동 DOM업데이트화를 추상화해준다.
+-React의 세계에서 “VIRTUAL DOM”이란 보통 사용자 인터페이스를 의미하며, React Element와 연관된다. 
+그러나 React는 컴포넌트 트리에 대한 추가정보를 포함하기 위해 'Fiber”라는 내부객체를 사용한다.
+*컴포넌트 트리:화면 구성이 주어지면 여러 컴포넌트를 통하여 뷰를 구성함으로써 모델링 하는 과정
+https://ko.reactjs.org/docs/faq-internals.html

서버사이드 렌더링과 클라이언트 사이드 렌더링의 차이점

@@ -0,0 +1,9 @@
+#서버사이드렌더링:서버에서 페이지를 그려 클라이언트로 보낸후 화면에 표시하는 기법
+검색 엔진 최적화와 빠른 페이지 렌더링
+서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지 그리는 시간 단축->화면에 유의미한 정보가 표시되는 시간이 빨라짐
+개발시 웹 애플리케이션 실행방법, 서버쪽 환경 구성, 클라이언트, 서버빌드에 대한 이해 필요=>개발자의 역량 중요
+#클라이언트사이드렌더링:클라이언트에서 동작한 라이브러리. 즉 브라우저에서 화면의 결과를 그려낸것
+#어디서 화면에 보일 페이지의 내용을 그리느냐에 따라 
+클라이언트:브라우저에서/서버:서버에서
+
+https://joshua1988.github.io/vue-camp/nuxt/ssr.html

스코프란?

@@ -0,0 +1,19 @@
+변수의 접근성 결정
+#블록 스코프
+2015년도에 ES6의 도입으로 인해 let과 const를 사용하게 됨
+변수들은 block외부에서 block {} 안으로 접근할수 없도록 함
+Var 함수는 블록스코프를 선언할 수 없음
+#local scope
+자바스크립트 함수로 선언된 변수들은, 함수에 local로서 작용함
+그들 자체의 함수내부에서만 인식됨에 따라, 다른 함수내에서 같은 이름의 변수들을 사용할 수 있다.
+지역변수들은 함수가 시작됨에따라 생성되고, 함수가 완성됨에 따라 삭제된다.
+#함수 스코프
+각각의 함수는 새 스코프를 만들어낸다.
+함수내의 변수들은 함수의 외부에서부터 접근할 수 없도록 함
+변수들은 var, let, const등의 함수로 선언된다.
+#전역 스코프
+함수밖에서 선언된 함수들은 전역이된다.
+자바스크립트 프로그램 내의 어떠한 곳이든지 접근이 가능하다.
+Var, let, const 등의 함수로 선언된다.
+
+https://www.w3schools.com/js/js_scope.asp

이벤트 버블링, 캡처링

@@ -0,0 +1,16 @@
+#버블링
+한 요소에 이벤트가 발생하면 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작
+이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물 속 거품인 ‘버블’을 닮음
+
+#캡처링
+이벤트가 발생하면 이벤트가 발생한 가장 안쪽 요소가 ‘타깃요소’
+이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려갑니다.
+버블링과 반대방향으로 진행되는 이벤트 전파 방식
+
+#표준 Dom 이벤트에서 정의한 이벤트 흐름
+1.캡처링 단계-이벤트가 하위 요소로 전파되는 단계
+2.타깃 단계-이벤트가 실제 타깃 요소에 전달되는 단계
+3.버블링 단계-이벤트가 상위 요소로 전파되는 단계
+
+
+https://ko.javascript.info/bubbling-and-capturing

자바스크립트에서 module이란?

@@ -0,0 +1,36 @@
+개발하는 애플리케이션의 크기가 커질때 파일을 여러개로 분리해둔것->모듈
+클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됨
+파일 하나. 스크립트 하나.
+export와 import을 통해 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유 가능
+#AMD
+가장 오래된 모듈 시스템/require.js라는 라이브러를 통해 처음 개발됨
+#CommonJS
+Node.js 서버를 위해 만들어진 모듈 시스템
+#UMD
+Amd와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐
+#모듈의 기능
+-엄격 모드로 실행됨
+선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킴
+-모듈 레벨 스코프
+모듈은 자신만의 스코프가 있다
+모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다
+-단 한 번만 평가됨
+최초 호출시 단 한번만 실행됨
+어느 한 모듈에서 수정하면 다른 모듈에서도 변경사항을 확인할 수 있다.
+-import.meta
+현재 모듈에 대한 정보 제공
+브라우저 환경에서 스크립트의 url정보를 얻을수 있다.
+-this는 undefined
+모듈이 아닌 일반 스크립트의 this는 전역객체
+#브라우저 특정 기능
+-지연 실행
+외부 스크립트, 인라인 스크립트와 관계없이 마치 defer 속성을 붙인 것처럼 실행됨
+*외부모듈스크립트 <script type="module” src=“..”>를 다운로드할 때 브라우저의 HTML 처리가 멈추지 않고 외부모듈스크립트와 기타 리소스를 병렬적으로 불러옴
+*모듈스크립트는 HTML문서가 완전히 준비될때까지 대기 상태에 있다가 HTML 문서가 완전히 만들어진후 실행됨
+*스크립트의 상대적 순서가 유지되어 문서상 위쪽의 스크립트부터 차례로 실행됨
+#인라인 스크립트의 비동기 처리
+Async 속성이 붙은 스크립트는 로딩이 끝나면 다른 스크립트나 HTML문서가 처리되길 기다리지 않고 바로 실행됨
+
+
+
+https://ko.javascript.info/modules-intro