From 24983944120204c3140d881f930740fe6a103fd7 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 26 Oct 2021 22:00:47 +0900 Subject: [PATCH 01/19] Create Lobo virtual Dom --- Lobo | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 Lobo diff --git a/Lobo b/Lobo new file mode 100644 index 0000000..042728a --- /dev/null +++ b/Lobo @@ -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 From 6986cb83277b20f3bad0af8ab3b6c41b79319cee Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 26 Oct 2021 22:05:35 +0900 Subject: [PATCH 02/19] =?UTF-8?q?Create=20Lobo(JSX=EB=9E=80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit JSX란? --- "Lobo(JSX\353\236\200)" | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 "Lobo(JSX\353\236\200)" diff --git "a/Lobo(JSX\353\236\200)" "b/Lobo(JSX\353\236\200)" new file mode 100644 index 0000000..f60c0ce --- /dev/null +++ "b/Lobo(JSX\353\236\200)" @@ -0,0 +1,39 @@ +JSX란? +자바스크립트의 확장문법으로서 React.createElement를 호출하기 위한 문법이다. +브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. +*번들링? +Bundling. +모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업 +요리키트, 식물재배 키트…. 등과 같이 어떠한 것을 만들때 쉽게 만들수 있도록 해주는것 +*바벨? +6to5 +ES6(ECMAScript 6)를 ES5(ESMAScript 5)로 바꿔주는 도구. +문법이 새로 나왔지만 구식인 브라우저는 이것을 적용을해주지 않는다! +이때 바벨이라는 도구를 통해 구현 가능! +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 From 154f604eac6be94da32b3863ebac1a6c05260c50 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 26 Oct 2021 22:06:21 +0900 Subject: [PATCH 03/19] =?UTF-8?q?Create=20Lobo(Closure=EB=9E=80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closure란 --- "Lobo(Closure\353\236\200)" | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 "Lobo(Closure\353\236\200)" diff --git "a/Lobo(Closure\353\236\200)" "b/Lobo(Closure\353\236\200)" new file mode 100644 index 0000000..f9b1328 --- /dev/null +++ "b/Lobo(Closure\353\236\200)" @@ -0,0 +1,7 @@ +클로저란? +자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. +클로저는 생성된 시점의 유효범위 내에 있는 모든 지역변수로 구성된느 함수와 함수가 선언된 어휘적 환경의 조합이다. +클로저는 어떤 데이터와 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. +Scope에 묶인 변수를 바인딩하기 위한 일종의 기술로서 함수를 저장한 레코드이며 스코프의 인수들은 클로저가 만들어질때 정의된다. +스코프 내의 영역이 소멸되었어도 독립된 복사본인 클로저를 통해 계속해서 접근할수있다. +https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures From 329a2179d7c70f6df69d2e5b218e1dcbe41eb9d6 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 26 Oct 2021 22:14:45 +0900 Subject: [PATCH 04/19] =?UTF-8?q?Update=20and=20rename=20Lobo(Closure?= =?UTF-8?q?=EB=9E=80)=20to=20Closure=EC=9D=98=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closure의 정의 --- ...\236\200)" => "Closure\354\235\230 \354\240\225\354\235\230" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename "Lobo(Closure\353\236\200)" => "Closure\354\235\230 \354\240\225\354\235\230" (91%) diff --git "a/Lobo(Closure\353\236\200)" "b/Closure\354\235\230 \354\240\225\354\235\230" similarity index 91% rename from "Lobo(Closure\353\236\200)" rename to "Closure\354\235\230 \354\240\225\354\235\230" index f9b1328..34d76f6 100644 --- "a/Lobo(Closure\353\236\200)" +++ "b/Closure\354\235\230 \354\240\225\354\235\230" @@ -1,6 +1,6 @@ 클로저란? 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. -클로저는 생성된 시점의 유효범위 내에 있는 모든 지역변수로 구성된느 함수와 함수가 선언된 어휘적 환경의 조합이다. +클로저는 생성된 시점의 유효범위 내에 있는 모든 지역변수로 구성되는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저는 어떤 데이터와 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. Scope에 묶인 변수를 바인딩하기 위한 일종의 기술로서 함수를 저장한 레코드이며 스코프의 인수들은 클로저가 만들어질때 정의된다. 스코프 내의 영역이 소멸되었어도 독립된 복사본인 클로저를 통해 계속해서 접근할수있다. From 7b68d2deddc3a73dce7158286a3c469414ed6f1c Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 26 Oct 2021 22:15:24 +0900 Subject: [PATCH 05/19] =?UTF-8?q?Rename=20Lobo=20to=20VirtualDom=EC=9D=98?= =?UTF-8?q?=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit VirtualDom의 정의 --- Lobo => "VirtualDom\354\235\230 \354\240\225\354\235\230" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Lobo => "VirtualDom\354\235\230 \354\240\225\354\235\230" (100%) diff --git a/Lobo "b/VirtualDom\354\235\230 \354\240\225\354\235\230" similarity index 100% rename from Lobo rename to "VirtualDom\354\235\230 \354\240\225\354\235\230" From 09d866d622b38a86a0e7a09d52a7431dc2ef2a14 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 26 Oct 2021 22:15:54 +0900 Subject: [PATCH 06/19] =?UTF-8?q?Rename=20Lobo(JSX=EB=9E=80)=20to=20JSX?= =?UTF-8?q?=EC=9D=98=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit JSX의 정의 --- ...SX\353\236\200)" => "JSX\354\235\230 \354\240\225\354\235\230" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "Lobo(JSX\353\236\200)" => "JSX\354\235\230 \354\240\225\354\235\230" (100%) diff --git "a/Lobo(JSX\353\236\200)" "b/JSX\354\235\230 \354\240\225\354\235\230" similarity index 100% rename from "Lobo(JSX\353\236\200)" rename to "JSX\354\235\230 \354\240\225\354\235\230" From 090d4f8ffc8f120213ea8c1aee9a977ef9f196a2 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Wed, 27 Oct 2021 14:44:29 +0900 Subject: [PATCH 07/19] =?UTF-8?q?Update=20JSX=EC=9D=98=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "JSX\354\235\230 \354\240\225\354\235\230" | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git "a/JSX\354\235\230 \354\240\225\354\235\230" "b/JSX\354\235\230 \354\240\225\354\235\230" index f60c0ce..afaae9a 100644 --- "a/JSX\354\235\230 \354\240\225\354\235\230" +++ "b/JSX\354\235\230 \354\240\225\354\235\230" @@ -1,15 +1,14 @@ JSX란? -자바스크립트의 확장문법으로서 React.createElement를 호출하기 위한 문법이다. +자바스크립트의 확장문법으로서 React.createElement를 호출하기 위한 문법으로 사용되었고,React 17.0 이상에서는 _JSX로 트랜스파일도 가능해졌다. 브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. *번들링? Bundling. 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업 요리키트, 식물재배 키트…. 등과 같이 어떠한 것을 만들때 쉽게 만들수 있도록 해주는것 *바벨? -6to5 -ES6(ECMAScript 6)를 ES5(ESMAScript 5)로 바꿔주는 도구. +바벨이라는 도구를 통해 구형 브라우져에서도 돌아가게끔 최신 문법을 변환해주는 도구! 문법이 새로 나왔지만 구식인 브라우저는 이것을 적용을해주지 않는다! -이때 바벨이라는 도구를 통해 구현 가능! +이때 바벨은 구형 브라우져에서도 돌아가게끔 최신 문법을 변환해주는 도구! JSX를 사용함으로써 React.creatElement를 일일이 호출하지 않고도 편하게 UI를 렌더링할 수 있다. *렌더링? 아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 공업 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도. 주로 디자인 용어로 쓰임 @@ -27,8 +26,7 @@ JSX를 사용함으로써 React.creatElement를 일일이 호출하지 않고도 다만 falsy한 값은 예외적으로 화면에 나타난다. *falsy한 값? Boolean 문맥에서 fasle로 해결되는 값 -거짓 같은 값들에는 다음과 같은 것들이 있다. - + 5.undefinded를 렌더링 하지 않기 JSX 내부에서 undefined를 렌더링하는 것은 괜찮지만 바로 undefinded를 사용할 경우 다음과 같은 오류가 발생한다.  From 78678bf9026f3d65aabddf05f289ddd4e29dba98 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 2 Nov 2021 22:15:51 +0900 Subject: [PATCH 08/19] =?UTF-8?q?Create=20=ED=94=84=EB=A1=9C=ED=86=A0?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=9D=B4=EB=9E=80=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\200\354\236\205\354\235\264\353\236\200?" | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 "\355\224\204\353\241\234\355\206\240\355\203\200\354\236\205\354\235\264\353\236\200?" diff --git "a/\355\224\204\353\241\234\355\206\240\355\203\200\354\236\205\354\235\264\353\236\200?" "b/\355\224\204\353\241\234\355\206\240\355\203\200\354\236\205\354\235\264\353\236\200?" new file mode 100644 index 0000000..c082236 --- /dev/null +++ "b/\355\224\204\353\241\234\355\206\240\355\203\200\354\236\205\354\235\264\353\236\200?" @@ -0,0 +1,28 @@ +프로토타입이란? +실제로 제품이 나오기 전에 제품의 핵심정보들이 담겨있는 초기모델 +프로토타입은 개발검증과 양산 검증을 거쳐야 비로소 시제품으로 출시될수있다. +전통적인 *폭포수 모델을 대치하여 시스템을 점진적으로 개발해 나가는 접근방법 +1.고객이 원하는 디자인 확인 +2.실제 모델 제작 +3.생산 비용 아끼기 +4.투자 +5.사용자의 피드백 +6.평가자료 + +*폭포수 모델이란? +순차적인 소프트웨어 개발 프로세스로 개발의 흐름이 마치 폭포수처럼 아래로 향하는 것처럼 보여서 붙여진 이름 +소프트웨어 요구사항 분석-소프트웨어 설계 구현-소프트웨어 시험-소프트웨어 통합-소프트웨어 유지보수 +*워터폴과 에자일! +워터폴:프로젝트 시작부터 최종 결과물 전달까지 특정 순서에 따라 선형적으로 개발/ +요구사항 수집과 분석-설계-테스팅-프로젝트 최종 결과물 전달-유지보수/프로젝트와 절차가 잘 정착된 의외의 상황이 발생하지 않은 환경에서 업무를 능숙하게 처리/체계적이며 사전합의된 요구사항을 충족하는데 초점. +에자일:’스프린트’라는 짧고 점진적인 개발 주기로 구성된 프로젝트 관리 방법론/반복적이며 사람중심적인 개발 방식/ +계획-설계-개발-테스팅-배포-피드백/고객중심적이고 환경변화에 잘 적응하며 악조건속에서도 제품을 출시가능 +*와이어프레임과 프로토타입 +와이어프레임:제품의 대략적인 스케치/제품의 구조와 기능에 초점/최초 단계 +프로토타입:사용자의 피드백을 얻고 개선.상호작용/최종단계에서 사용 + +#참고자료 +https://www.edrawsoft.com/kr/for-beginners/what-is-prototyping.html +https://www.ciokorea.com/news/166830 +https://ko.wikipedia.org/wiki/%ED%8F%AD%ED%8F%AC%EC%88%98_%EB%AA%A8%EB%8D%B8 + From 4d07741a53e4c1464608c089f9c5820c0dccdea5 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 2 Nov 2021 22:16:20 +0900 Subject: [PATCH 09/19] =?UTF-8?q?Create=20CORS=EB=9E=80=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "CORS\353\236\200?" | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 "CORS\353\236\200?" diff --git "a/CORS\353\236\200?" "b/CORS\353\236\200?" new file mode 100644 index 0000000..b689d20 --- /dev/null +++ "b/CORS\353\236\200?" @@ -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 + From 79aa30cec50de342da76b83706e3bea816420a79 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 2 Nov 2021 22:17:03 +0900 Subject: [PATCH 10/19] =?UTF-8?q?Create=20Redux=EC=97=90=EC=84=9C=20Flux?= =?UTF-8?q?=EB=9E=80=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...354\227\220\354\204\234 Flux\353\236\200?" | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 "Redux\354\227\220\354\204\234 Flux\353\236\200?" diff --git "a/Redux\354\227\220\354\204\234 Flux\353\236\200?" "b/Redux\354\227\220\354\204\234 Flux\353\236\200?" new file mode 100644 index 0000000..aa92902 --- /dev/null +++ "b/Redux\354\227\220\354\204\234 Flux\353\236\200?" @@ -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 From a916bd19718c091f372d8950443c1c18c7a6c4e1 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 9 Nov 2021 16:13:24 +0900 Subject: [PATCH 11/19] =?UTF-8?q?Create=20=EC=9E=90=EB=B0=94=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EC=97=90=EC=84=9C=20this=EB=9E=80?= =?UTF-8?q?=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...354\227\220\354\204\234 this\353\236\200?" | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 "\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 this\353\236\200?" diff --git "a/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 this\353\236\200?" "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 this\353\236\200?" new file mode 100644 index 0000000..3115b62 --- /dev/null +++ "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 this\353\236\200?" @@ -0,0 +1,42 @@ +자바스크립트에서 this란? +this의 값은 함수를 호출한 방법에 의해 결정됩니다 +실행중에는 할당으로 설정할 수 없고 함수를 호출할 때마다 다를 수 있습니다. +ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind메서드를 도입하였습니다. +ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다. +실행컨텍스트의 프로퍼티는 비엄격모드에서 항상 객체를 참조하며, 엄격모드에서는 어떠한 값이든 될 수 있습니다. +#전역문맥 +this는 엄격 모드 여부에 관계없이 전역 객체를 참조합니다. +#함수문맥 +-단순호출 +this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역객체를 참조합니다. +반면,엄격모드에서 this값은 실행문맥에 진입하며 설정되는 값을 유지하므로 this는 undefined로 남아있습니다. +this의 값을 다른 문맥으로 넘길때에는 call이나 apply를 사용합니다. +비엄격모드에서 this로 전달된 값이 객체가 아닌 경우,call과 apply는 이를 객체로 변환하기 위한 시도를 합니다. +null과 undefined값은 전역 객체가 됩니다. +-bind 메서드 +f.bind(someObject)를 호출하면 f와 같은 본문과 범위를 가졌지만 this는 원본함수를 가진 새로운 함수를 생성합니다. +새 함수의 this는 호출방식과 상관없이 영구적으로 bind의 첫번째 매개변수로 고정됩니다. +-화살표함수 +this는 자신을 감싼 정적범위. 전역코드에서는 전역객체. +Obj.bar에 할당된 함수는 화살표 함수로 생성된 다른 함수를 반환한다. +반환된 함수가 호출될때, this는 항상 초기에 설정된 값 +-객체의 메서드 +This 바인딩은 가장 즉각으로 멤버 대상에 영향을 받는다. +-객체의 프로토타입 체인에서의 this +메서드가 어떤 객체의 프로토타입 체인 위에 존재하면 this의 값은 그 객체가 메서드를 가진것 마냥 설정됨 +프로토타입 상속. +-접근자와 설정자의 this +접근자나 설정자로 사용하는 함수의 this는 접근하거나 설정하는 속성을 가진 객체로 묶는다. +-생성자로서 +함수를 new 키워드와 함께 생성자로 사용하면 this는 새로 생긴 객체에 묶인다 +-Dom 이벤트처리기로서 +this는 이벤트를 발사한 요소로 설정됨. +-인라인 이벤트 핸들러에서 +-this는 처리기를 배치한 DOM요소로 설정됨 +내부함수의 this는 정해지지않았으므로 전역/window 객체를 반환함 +비엄격모드에서 this를 설정하지않은 경우의 기본값. + + + +https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this + From 7cc4cd1bf4c389a953def0cd3549d05a24b8fc76 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 9 Nov 2021 16:13:59 +0900 Subject: [PATCH 12/19] =?UTF-8?q?Create=20=EC=9E=90=EB=B0=94=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EC=9D=98=20=EC=8B=A4=ED=96=89?= =?UTF-8?q?=EC=BB=A8=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EA=B3=BC=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\244\355\212\270 \352\263\274\354\240\225" | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 "\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\235\230 \354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270 \352\263\274\354\240\225" diff --git "a/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\235\230 \354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270 \352\263\274\354\240\225" "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\235\230 \354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270 \352\263\274\354\240\225" new file mode 100644 index 0000000..871f4bd --- /dev/null +++ "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\235\230 \354\213\244\355\226\211\354\273\250\355\205\215\354\212\244\355\212\270 \352\263\274\354\240\225" @@ -0,0 +1,34 @@ +자바스크립트의 실행컨텍스트 과정 + +#실행컨텍스트 +문맥.코드의 실행환경 +Scope,hosting,this,function,closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리 +실행가능한 코드를 형상화하고 구분하는 추상적인 개념 +=>실행 가능한 코드가 실행되기 위해 필요한 환경 +*실행가능한 코드:전역코드,eval코드,함수코드 + +#실행컨텍스트 과정 +1. 스택은 LIFO(Last In First Out, 후입 선출)의 구조를 가지는 나열 구조이다 +2. 전역 코드(Global code)로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다. 전역 실행 컨텍스트는 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지된다. +3. 함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다. +4. 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다.
 +#전역 컨텍스트 +코드를 실해하는 순간 모든 것을 포함하고 관리하는 환경/페이지가 종료될때까지 유지됨 + 변수객체,scope chain,this가 들어온다. + 전역 컨텍스트는 arguments가 없고 variable로서 해당 스코프의 변수들이 있다.:name,wow,say +Scope chain은 자기 자신인 전역 변수객체들로서 this는 따로 설정되어있지않으면 window이다. +this를 바꾸기위해 new를 호출하거나 함수에 다른 this값을 bind한다. + +#함수 컨택스트 +자바스크립트는 함수 스코프를 따른다. 함수를 호출할때마다 함수 컨택스트가 하나씩 더 생긴다. +전역컨택스트를 생성후 함수를 호출할때마다 컨택스트가 생긴다 +컨택스트 생성시 컨택스트안에 변수객체,scope chain,this가 생성된다. +컨텍스트 생성후 함수가 실행되는데 사용되는 변수들은 변수 객체안에서 값을 찾고 없다면 스코프체인을 따라 올라가며 찾는다 +함수 실행이 마무리되면 해당 컨텍스트는 사라진다. +페이지가 종료되면 전역 컨텍스트는 사라진다. +Scope chain은 say 변수객체와 상위의 전역 변수객체 +this는 window +컨택스트안에서 변수를 찾을수 없다면 상위 변수객체인 전역 변수객체에서 찾는다 + +https://poiemaweb.com/js-execution-context +https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0 From 713b80f2b9c75a877b25a231569f682977a032bd Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 9 Nov 2021 16:14:33 +0900 Subject: [PATCH 13/19] =?UTF-8?q?Create=20=EC=84=9C=EB=B2=84=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=EA=B3=BC=20?= =?UTF-8?q?=ED=81=B4=EB=9D=BC=EC=9D=B4=EC=96=B8=ED=8A=B8=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=EC=9D=98=20?= =?UTF-8?q?=EC=B0=A8=EC=9D=B4=EC=A0=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...201\354\235\230 \354\260\250\354\235\264\354\240\220" | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 "\354\204\234\353\262\204\354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\352\263\274 \355\201\264\353\235\274\354\235\264\354\226\270\355\212\270 \354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\354\235\230 \354\260\250\354\235\264\354\240\220" diff --git "a/\354\204\234\353\262\204\354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\352\263\274 \355\201\264\353\235\274\354\235\264\354\226\270\355\212\270 \354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\354\235\230 \354\260\250\354\235\264\354\240\220" "b/\354\204\234\353\262\204\354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\352\263\274 \355\201\264\353\235\274\354\235\264\354\226\270\355\212\270 \354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\354\235\230 \354\260\250\354\235\264\354\240\220" new file mode 100644 index 0000000..c8c8d1b --- /dev/null +++ "b/\354\204\234\353\262\204\354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\352\263\274 \355\201\264\353\235\274\354\235\264\354\226\270\355\212\270 \354\202\254\354\235\264\353\223\234 \353\240\214\353\215\224\353\247\201\354\235\230 \354\260\250\354\235\264\354\240\220" @@ -0,0 +1,9 @@ +#서버사이드렌더링:서버에서 페이지를 그려 클라이언트로 보낸후 화면에 표시하는 기법 +검색 엔진 최적화와 빠른 페이지 렌더링 +서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지 그리는 시간 단축->화면에 유의미한 정보가 표시되는 시간이 빨라짐 +개발시 웹 애플리케이션 실행방법, 서버쪽 환경 구성, 클라이언트, 서버빌드에 대한 이해 필요=>개발자의 역량 중요 +#클라이언트사이드렌더링:클라이언트에서 동작한 라이브러리. 즉 브라우저에서 화면의 결과를 그려낸것 +#어디서 화면에 보일 페이지의 내용을 그리느냐에 따라 +클라이언트:브라우저에서/서버:서버에서 + +https://joshua1988.github.io/vue-camp/nuxt/ssr.html From 61e3b978fc2cfbf3d68c44ceff38447b1942fcce Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 16 Nov 2021 18:37:03 +0900 Subject: [PATCH 14/19] =?UTF-8?q?Create=20=EC=8A=A4=EC=BD=94=ED=94=84?= =?UTF-8?q?=EB=9E=80=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\244\354\275\224\355\224\204\353\236\200?" | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 "\354\212\244\354\275\224\355\224\204\353\236\200?" diff --git "a/\354\212\244\354\275\224\355\224\204\353\236\200?" "b/\354\212\244\354\275\224\355\224\204\353\236\200?" new file mode 100644 index 0000000..824cca0 --- /dev/null +++ "b/\354\212\244\354\275\224\355\224\204\353\236\200?" @@ -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 From 53957265514ef9cacecf1b1e54037e0888554f42 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 16 Nov 2021 18:37:33 +0900 Subject: [PATCH 15/19] =?UTF-8?q?Create=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B2=84=EB=B8=94=EB=A7=81,=20=EC=BA=A1=EC=B2=98=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...47\201, \354\272\241\354\262\230\353\247\201" | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 "\354\235\264\353\262\244\355\212\270 \353\262\204\353\270\224\353\247\201, \354\272\241\354\262\230\353\247\201" diff --git "a/\354\235\264\353\262\244\355\212\270 \353\262\204\353\270\224\353\247\201, \354\272\241\354\262\230\353\247\201" "b/\354\235\264\353\262\244\355\212\270 \353\262\204\353\270\224\353\247\201, \354\272\241\354\262\230\353\247\201" new file mode 100644 index 0000000..de8af4e --- /dev/null +++ "b/\354\235\264\353\262\244\355\212\270 \353\262\204\353\270\224\353\247\201, \354\272\241\354\262\230\353\247\201" @@ -0,0 +1,16 @@ +#버블링 +한 요소에 이벤트가 발생하면 가장 최상단의 조상 요소를 만날 때까지 요소 각각에 할당된 핸들러가 동작 +이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물 속 거품인 ‘버블’을 닮음 + +#캡처링 +이벤트가 발생하면 이벤트가 발생한 가장 안쪽 요소가 ‘타깃요소’ +이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려갑니다. +버블링과 반대방향으로 진행되는 이벤트 전파 방식 + +#표준 Dom 이벤트에서 정의한 이벤트 흐름 +1.캡처링 단계-이벤트가 하위 요소로 전파되는 단계 +2.타깃 단계-이벤트가 실제 타깃 요소에 전달되는 단계 +3.버블링 단계-이벤트가 상위 요소로 전파되는 단계 + + +https://ko.javascript.info/bubbling-and-capturing From 8478ba06da71baca00ca7e0f220ba87ae6b1ef00 Mon Sep 17 00:00:00 2001 From: Lobo2u <84758204+Lobo2u@users.noreply.github.com> Date: Tue, 16 Nov 2021 18:38:07 +0900 Subject: [PATCH 16/19] =?UTF-8?q?Create=20=EC=9E=90=EB=B0=94=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=EC=97=90=EC=84=9C=20module=EC=9D=B4?= =?UTF-8?q?=EB=9E=80=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...4\204\234 module\354\235\264\353\236\200?" | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 "\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 module\354\235\264\353\236\200?" diff --git "a/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 module\354\235\264\353\236\200?" "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 module\354\235\264\353\236\200?" new file mode 100644 index 0000000..e56ce69 --- /dev/null +++ "b/\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\354\227\220\354\204\234 module\354\235\264\353\236\200?" @@ -0,0 +1,36 @@ +개발하는 애플리케이션의 크기가 커질때 파일을 여러개로 분리해둔것->모듈 +클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됨 +파일 하나. 스크립트 하나. +export와 import을 통해 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유 가능 +#AMD +가장 오래된 모듈 시스템/require.js라는 라이브러를 통해 처음 개발됨 +#CommonJS +Node.js 서버를 위해 만들어진 모듈 시스템 +#UMD +Amd와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐 +#모듈의 기능 +-엄격 모드로 실행됨 +선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킴 +-모듈 레벨 스코프 +모듈은 자신만의 스코프가 있다 +모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다 +-단 한 번만 평가됨 +최초 호출시 단 한번만 실행됨 +어느 한 모듈에서 수정하면 다른 모듈에서도 변경사항을 확인할 수 있다. +-import.meta +현재 모듈에 대한 정보 제공 +브라우저 환경에서 스크립트의 url정보를 얻을수 있다. +-this는 undefined +모듈이 아닌 일반 스크립트의 this는 전역객체 +#브라우저 특정 기능 +-지연 실행 +외부 스크립트, 인라인 스크립트와 관계없이 마치 defer 속성을 붙인 것처럼 실행됨 +*외부모듈스크립트