쁘도리의 블로그

<div style="margin-top:10px;">\r\n.*\r\n.*\r\n.*\r\n.*</div>$

모듈(Module)이란?

분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대게 클래스 하나 혹은 특정한 목적을 가진 여러개의 함수를 포함하는 라이브러리로 구성되어 있음.

장점

• 유지보수 용이 : 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능개선이나 수정에 용이
• 네임스페이스화 :  코드양이 많을수로 전역스코프에 중복되는 변수병이 존재할수 있음, 이때 모듈로 분리하면 네임스페이스를 갖기 때문에 문제를 해결할수 있음
• 재사용성 : 같은 코드를 반복하지않고 중복되는 코드를 모듈로 분리시켜 필요할때 마다 재사용할 수 있다.

모듈 시스템 종류 

• AMD - 가장 오래된 모듈 시스템중 하나로 require.js라는 라이브러리를 통해 개발됨.
• CommonJS -  NodeJS 환경을 위해 만들어진 모듈 시스템
• UMD -  AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐
• ES Module - ES6(ES2015)에 도입된 자바스크립트 모듈 시스템

ES Module방식

> ES6에 도입된 자바스크립트 모듈로 <script> 태그에 type="module" 속성을 추가해주면, 해당 파일은 모듈로서 동작.

모듈을 외부에서 사용할수 있도록 내보낼때는 export, export default 와 같은 키워드를 사용하며, 외부에서 모듈을 불러 올때는 import 를 사용하여 모듈을 불러온다.

• named export 를 사용하여 함수 또는 변수를 내보낼수 있음.
• export default 를 사용하여 하나 기본함수를 내볼수 있음. (단, 모듈 당 하나만 내보낼수있음)

CommonJS방식

> NodeJS 환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템.  모듈을 외부에서 사용할 수 있도록 내볼때는 export, module.export 와 같은 키워드를 사용하며, 외부에서 불러올때는 require 를 사용하여 모듈을 불러옴,

• module.export 를 사용하여 하나의 객체로 묶어서 외부로 내보낼 수 있음.
•  

ES Module for NodeJS

CommonJs 모듈 시스템을 채택했던 NodeJS환경에서 ES Module을 사용하려면 babel과 같은 트랜스파일러(transpiler)를 사용했어야 하는데, NodeJS 13.2 버전부터 ES모듈 시스템에 대한 정식 지원이 시작됨으로서 별다른 도구 필요 없이 NodeJS에서 ES Module을 사용할수 있게 되었다고 함.

출처 : https://www.youtube.com/watch?v=5NXEXkIrkAk 

DOM Document Object Model 

: 문서 객체 모델

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

BOM Browser Object Model 브라우저 객체 모델

: 브라우저를 제어하기 위한 인터페이스

• window : 모든 객체가 소속된 객체(최상위 객체)
  https://developer.mozilla.org/ko/docs/Web/API/Window
• document : 현재 문서에 대한 정보를 가지고 있는 객체
• history : 현재의 브라우저가 접근했던 URL history를 제어할수있음
• location : 문서의 주소와 관련된 객체로 window 객체의 프로퍼티인 동시에 document의 프로퍼티, 문서URL 변경하며 다양한 정보를 얻을수 있음.
• screen : 사용자의 디스플레이 화면에 대한 다양한 정보를 가지고 있는 객체
• navigator : 실행중인 애플리케이션(브라우저)에 대한 정보를 알 수 있다. 

script 로드 해결 방법 (2가지)

• body 태그 최 하단에서 script 로드 (html 파싱 후 script 로드)
• load 이벤트 리스너 등록 : window.onload (html 파싱 DOM생성 그리고 외부콘텐츠가 로드된 후 발생하는 이벤트)

HTML5 script 로드 해결방법 (feat. defer, async)

• defer 속성 : HTML 파싱과 함께, 비동기로 javaScript 파일을 불러온다. (일반적인 경우)

• async 속성 : HMTL 파싱과 함께, 비동기로 javaScript 파일을 불러온다. 단, script가 실행될경우 html 파싱을 중지한다.

* 동기,비동기 설명 https://www.youtube.com/watch?v=sN4E9_u7xQk

' this ' 란 무엇인가?

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다고 한다.. (this는 호출한 놈?이라고 이해하며, 호출한 행위가 없을경우 기본값으로는 window객체 라고한다.) 단, 위의 경우와 달리 아래와 같이 예외적인 상황도 존재한다. 

1. 전역스코프에서 this는 window 객체
2. 화살표 함수*( Arrow Function)에서는 조금 달라짐..
3. strict Mode 에서도 this 는 조금 달라짐.

* window객체 : 브라우저에서 제공하는 전역 객체

default this = window 객체, 함수를 호출한적이 없을 경우 기본적으로 this는 window 객체

220906 추가내용 : 

bind()

bind() 메서드 : this를 설정할수있는 메서드 단, bind는 단 1번만 this를 설정할 수 있다.

화살표 함수(arrow function)

화살표 함수(arrow function)는 자신을 포함하고 있는 외부 Scope에서 this를 계승받는다.  (화살표 함수에서 this는 자신을 감싼 정적 범위)

Strict Mode

엄격모드?(Strict Mode)에서는 함수를 호출한적이 없을 경우 기본값을 window로 하지않고 undefined로 정의 한다.

출처 : https://www.youtube.com/c/gymcoding

프로토타임 : 어떤 객체의 상위 객체 역할을 하는 객체로 하위 객체에게 자신의 프로퍼티와 메소드를 상속한다.

                      (js는 프로토타입을 기반으로 상속을 구현)

Prototype : 프로토타입 객체로 하위객체에서 자신의 프로퍼티와 메소드를 상속

prototype 프로퍼티 : 생성자 함수의 인스턴스 프로토타입을 가르키는 것

 - 함수 객체가 가지고 있음 (생성자함수로 만들어 지지 않은 화살표함수, 축약메소드는 없다)

 - 생성자 함수가 인스턴스의 프로토타입을 할당하기 위해 사용 (생성자함수가 가능한 객체가 소유하는 프로퍼티)

 - constructor 만이 소유하는 프로퍼티

[[Prototye]] : 프로토타입 객체를 가르키는 내부slot, 모든 객체가 가진 내부slot으로 프로토타입 객체를 가리킨다.

                    proto는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티

__proto__ : 프로토타입에 접근하기 위한 접근자 프로퍼티 [[Prototype]] 내부 slot에 간접적으로 접근,

                   Object.prototype의 접근자 프로퍼티 모든 객체는 proto를 통해 자신의 프로토타입에 접근 가능하다.

Object.prototype :

모든 객체는 프로토타입 체인에 묶여있는데 js엔진은 객체의 프로퍼티에 접근할 때 해당 값이 없으면 __proto__ 접근자 프로퍼티가 가리키는 참조를 따라 자신의 부보 역할을 하는 객체의 프로토타입을 탐색함

프로토타입 객체

- 모든 객체가 가진 것

- 하위 객체에게 사위 객체의 공유 프로퍼티(메소드) 공유

- 상속의 개념을 구현

프로토타입 체인 : 객체의 프로퍼티나 메소드에 접근할 때 없으면 프로토타입 체인을 따라 프로토타입의 프로퍼티와 메소

                            드를 차례로 검색하게 됨. (JS엔진이 객체의 프로퍼티를 찾을때 해당 객체에 찾는 프로퍼티가 없으면,

                            접근자 proto를 따라서 부모의 프로토타입의 프로퍼티를 순차적으로 검색하는 구조)

출처 : https://rrecoder.tistory.com/176?category=947948

예시]

JSP 

<input type="checkBox" id="chk1" name="chk1" />
<input type="checkBox" id="chk2" name="chk2" />
<input type="checkBox" id="chk3" name="chk3" />
<input type="checkBox" id="chk4" name="chk4" />
<input type="checkBox" id="chk5" name="chk5" />

$('[name^=chk]').prop('checked', true);

: chk로 된 체크박스 name input태그들 전부 checked true 처리 

props 와 state 차이 

props readOnly (수정불가)

state modify, (setState를 이용해서 수정)

// props와 state는 render함수 호출

상위컴포넌트가 하위 컴포넌트를 명령할때는 props를 이용해서 컨트롤

하위컴포넌트가 상위 컴포넌트를 이벤트를 통해서 컨트롤

react 학습전 선행학습주제 -

javaScript 클래스, 화살함수, const & let [immutability(변경불가성)]

+ 보충개념 redux 

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<fmt:parseDate value="${ }" var="dateFmt" pattern="yyyyMMdd"/>
<fmt:formatDate value="${dateFmt}" type="both" pattern="yyyy-MM-dd"/>

엑셀특성상 앞자리에 0이올경우 알아서 생략함

ex) 010  > 10 으로 표기

이럴경우 텍스트표기 해야할 대상의 태그에 아래 스타일옵션을 추가해주면 텍스트로 표기되어 옳바르게 표시

style="mso-number-format:'\@'" 

case1.

<%@ page contentType="application/vnd.ms-excel; name='recovery_Excel'; charset=EUC-KR"%>

<%

String f_nm=usrnm+"_출전업체정보";
 response.setHeader("Content-Disposition", "attachment; filename="+new String((f_nm).getBytes("KSC5601"),"8859_1")+".xls");  

String((f_nm).getBytes("EUC-KR"),"8859_1")+".xls");   190924수정내용
 response.setHeader("Content-Description", "JSP Generated Data");

%>

<meta http-equiv="Content-Type" content="application/vnd.ms-excel;charset=euc-kr">

수정2차

case1. 방법은 톰켓에서는 문제없이 적용됨

출처: https://gogh914.tistory.com/69 [Notebook Of Gogh]

case2.

<%@ page import="java.net.URLEncoder"%>

 response.setHeader("Content-Disposition", "attachment; filename="+URLEncoder.encode(f_nm, "UTF-8")+".xls");  
 response.setHeader("Content-Description", "JSP Generated Data"); 

case1. 방법은 제우스was에서 문제없이 적용됨.

IE 개발환경에서 ajax 통신이 실행되지않을 경우,

ajax 구문에     

cache : false;

옵션을 추가해주어야한다.