삶 가운데 남긴 기록 AACII.TISTORY.COM

직렬화(serialize) 컴퓨터 메모리 안에 구현된 객체(인스턴스)를 문자열로 변환하는 과정을 직렬화라고 합니다. 반대로 문자열을 다시 객체로 환원화하는 것을 역직렬화라고 합니다. JSON(Javascript Object Notation) 표기법 리터럴 객체: { name : "Tom", age : 17, marriage : false, data : [2, 5, null] }; JSON: ' { "name" : "Tom", "age" : 17, "marriage" : false, "data" : [2, 5, null] } '; 차이점은 프로퍼티 이름을 큰따옴표로 묶은 문자열로 표기하고 전체는 작은 따옴표로 묶어서 표기한다는 점입니다. 객체를 JSON으로 변환 JSON.stringify() 첫번째 인수:..

프로퍼티 데이터 프로퍼티: 값을 저장하기위한 객체의 맴버 변수 접근자 프로퍼티: 데이터 프로퍼티에 접근하기 위한 함수를 정의한 프로퍼티 getter 와 setter를 정의하면 데이터 프로퍼티에 접근 할 수 있습니다. delete person.name 처럼 delete 연산자로 프로퍼티를 삭제할 수 있습니다. 캡슐화 즉시 실행 함수로 클로저를 생성하면 데이터를 외부에서 숨기고 접근자 프로퍼티(getter, setter)로만 읽고 쓰고 할 수 있습니다. 프로퍼티 디스크립터(property descriptor) 프로퍼티 디스크립터는 해당 프로퍼티의 설정을 기술하는 객체입니다. 프로퍼티의 쓰기 가능 여부 등을 설정 할 수 있게 도와줍니다. 데이터 프로퍼티의 디스크립터 { value: 프로퍼티의 값, writab..

함수적 종속(Functional Dependency) X→ Y: X, Y가 속성의 부분 집합일 때, X 값이 항상 Y 값의 오직 하나만 연관 되어 있을 경우 함수적으로 종속되어있다고 합니다. 학번 이름 학년 학과 400 이순신 4 컴퓨터공학과 422 유관순 3 수학과 (Determinant): 학번 → (Dependent): 이름, 학년, 학과 완전 함수적 종속과 부분 함수적 종속 수강 테이블 학번 과목번호 성적 학년 100 c413 a 4 100 e412 b 4 학번, 과목번호 → 성적 학번 → 학년 성적은 (학번, 과목번호)에 완전 함수적 종속(Functional Dependency)입니다. 학년은 (학번, 과목번호)에 부분 함수적 종속(Partial Functional Dependency)이다. 학..

생성자 안에 메서드를 정의할 때의 문제점 생성자로 객체를 생성 할 때마다 똑같은 함수가 생성되어 메모리를 소비하게 됩니다. 이런 문제는 프로토 타입 객체에 메서드를 정의하는 방식으로 해결합니다. 프로토 타입 객체 함수의 prototype 프로퍼티가 가리키는 객체를 그 함수의 프로토 타입 객체라고 합니다. 기본적으로 빈 객체를 가리킵니다. 프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티처럼 사용할 수 있습니다. function F(){}; F.prototype.prop = "prototype value"; var obj = new F(); console.log(obj.prop);//prototype value; //프로토 타입 객체의 프로퍼티는 읽기만 하고 수정이 불가..

이클립스, 전자정부프레임워크, STS 등에서 웹프로젝트를 import 하고 나서 JSP 파일을 열었는데 한글이 깨졌습니다. 검색 후에 흔히 나와 있는 방법들을 시도해 보았으나 실패. 다른 에디터(note pad 등)로 열었을 때는 문제가 없었으므로 한글 인코딩 자체가 망가지지는 않았습니다. 검색 해서 나오는 인코딩 UTF-8 설정 등을 모두 시도해보았는데도 여전히 한글이 깨져서 나온다면 다음을 시도해 보시기 바랍니다. 이클립스 메뉴 > window > Preferences 1. General > Content Types 을 눌러보면 위의 화면이 나옵니다. 2. 거기서 Text를 선택 후 JSP를 클릭하세요. 3. File associations의 *.jsp를 눌러 보세요. 4. 그리고 해당 문서의 한글 ..

화살표 함수 표현식 var square = function(x){ return x*x; }; //화살표 함수 표현식 var square = (x) => { return x*x; }; //인수가 한개이면 인수를 묶는 괄호를 생략할 수 있습니다. var square = x => { return x*x; }; //인수가 없는 경우 var f = () => { return alert("x"); }; //함수 몸통이 return 뿐이면 return 키워드도 생략 가능 var square = x => x*x; //함수 몸통이 return 뿐이라도 객체를 리턴하면()으로 묶어야 함 var f = (a, b) => ({x: a, y: b}); //즉시 실행 함수 (x => x*x)(3); // 9 this가 함수를 정..

네임 스페이스(name space) 전역 유요 범위 안에 함수나 변수 객체들을 선언하면 라이브러리나 규모가 큰 프로그램을 만들 때 이름이 겹칠 우려가 있습니다. 네임 스페이스는 변수 이름과 함수이름을 한 곳에 모아서 충돌을 방지하는 방법입니다. 객체를 네임 스페이스로 활용 객체를 전역 변수로 하나 생성하고 그 객체에 프로그램 전체에서 사용하는 모든 변수와 프로퍼티를 정의하는 방법입니다. 함수를 네임 스페이스로 활용 함수 안에서 선언된 변수의 유효 범위는 함수 내부이기 때문에 함수 바깥에서는 읽거나 쓸 수 없는 성질을 이용하는 방법입니다. 모듈 패턴 showName 메서드는 getName을 참조하고 있고 setName 메서드는 name을 참조하고 있습니다. 지역변수 name과 지역함수 getNmae은 클로..

실행 가능 코드(Excutable Code) 실행 가능 코드를 만나면 Evaluation 해서 Execution Context로 만듭니다. window object 에 정의 된 함수 일반 함수 eval() : 일반적인 함수와 다르게 동적인 환경에서 실행 Execution Contexts 는 실행에 필요한 모든 정보를 관리합니다. 렉시컬 환경 컴포넌트(LexicalEnvironment Component) 함수 블록의 유효범위 안에 있는 식별자와 그 결과값이 저장되는 곳입니다. 식별자와 그 값을 가리키는 키쌍으로 바인드해서 렉시컬 환경 컴포넌트에 기록합니다. 환경 레코드(Environment Record) 유효 범위 안의 식별자를 기록하고 실행하는 영역. 식별자와 결과값을 바인드해서 환경 레코드에 기록합니다..

window 객체의 대화 상자 //인수로 문자열을 받아 경고 대화 상자를 표시 alert("경고"); //인수로 질문 제목을 받아 문자열을 입력 받는 대화상자를 표시 prompt("입력 하세요."); //인수로 확인 제목을 받아 '확인' , '취소' 버튼이 있는 대화 상자를 표시 //확인 을 누르면 true가 리턴되고 취소를 누르면 false가 리턴됩니다. confirm("실행 하시겠습니까?"); console 객체 주요 메서드 console.error() 오류 메시지 출력 console.info() 메시지 타입 로그 출력 console.log() 일반 로그 출력 console.time() 처리 시간 측정용 타이머 시작 console.timeEnd() 처리 시간 측정용 타이머 정지시키고 흐른 시간 밀리 ..

부동 소수점 실수 계산의 정확도 문제 64비트 부동 소수점 규격 부호: 1비트, 지수 부분: 11비트, 가수 부분: 52비트 유효 소수점 자리수가 2의 53승 이므로 약 10의 16승 즉, 16자리가 유효한 자릿수입니다. 부동 소수점으로 계산하면 오차가 발생합니다. 일반적으로 가까운 두 수를 뺄 때 정밀도에 손실이 일어납니다. Math.sqrt(10001) - Math.sqrt(10000); //유효자리가 16자리에서 12자리로 줄어듭니다. //이런 경우 아래 처럼 바꾸어 정밀도 손실을 피할 수 있습니다. 1 / (Math.sqrt(10001) + Math.sqrt(10000)) 10진수로 정확하게 딱 떨어지는 값도 계산 결과가 어긋나는데 내부적으로는 이진수로 계산하기 때문입니다. var a = 0.16..

리터럴로 객체(object) 생성 예제 var card1 = {suit:"클로버", rank:"Q"}; var card2 = {"suit":"하트", "rank":"K"}; //object의 값을 불러올때는 .키값 이나 대괄호[] 안에 키값을 사용합니다. console.log(card1.suit); console.log(card2["rank"]); //object에 새로운 property를 추가 삭제 할 수 있습니다. card1.value = 11; console.log(card1); //{suit:"클로버", rank:"Q", value:11} delete card1.rank; console.log(card1); //{suit:"클로버", value:11} //property 존재 확인 console...

Symbol() 기존에는 상수로 상태값을 표현해 왔습니다. var NONE = 0; var BLACK = -1; var RED = 1; 이러한 상태 값들을 Symbol로 표현할 수 있습니다. var NONE = Symbol("none"); var BLACK = Symbol("black"); var RED = Symbol("red"); //Symbol은 유일한 값입니다. console.log(BLACK.toString()); //black 이 출력됩니다. Symbol과 문자열 연결 //Symbol.for()를 이용하면 전역 레지스트리에 심벌이 만들어 져서 공유할 수 있습니다. let sym1 = Symbol.for("test"); let sym2 = Symbol.for("test"); console.log..

공백문자(스페이스 한 칸) html에서는 공백을 연속으로 써도 공백 1칸으로 인식합니다. 그래서 공백을 여러 개 사용해야 할 때는, 빈 칸을 으로 표현해 줍니다. 브라우저가 기호 하나당 빈 칸(space)하나로 표시해줍니다. < 부등호() 영어로 greater than 이라는 뜻입니다. 마찬가지로 태그 기호와 충돌을 일으키기 때문에 부등호 기호를 쓰려면 변환해야 합니다. & 앰퍼샌드(&) 기호는, 위에서 사용한 기호들 처럼 이미 특수한 용도로 사용되고 있습니다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를, & 이렇게 표기해 주어야 합니다. " quotation 즉, 이것은 쌍따옴표(")를 표현하는 것입니다. 자바스크립트와 충돌 가능성이 있어서 변환해서 표현해야 합니다. 그런데 일반 텍스트에서는 ..

html은 태그들의 tree 구조로 되어 있는 데 이 것을 DOM tree 라고 부릅니다. 이러한 DOM 트리를 검색하면서 특정 태그(element)를 선택하여 CSS를 적용할 수 있습니다. 이렇게 html 의 요소(element)를 특정하여 선택할 수 있게 해주는 것을 selector (선택자)라고 부릅니다. element selector * 모든 element type 지정한 타입의 element class 지정한 class의 element type.class 지정한 클래스에 속하는 지정한 타입의 element #id attribute에 지정한 id값에 해당하는 element attribute selector [attr] attr 어트리뷰트를 정의하는 element [attr="val"] attr 의..

기본 구조 1. DOCTYPE 에 DTD 문서를 명시하지 않아도 됩니다. 2. 인코딩을 명시하는 것이 간결해졌습니다. 3. link type은 매번 text/css 로 명시하지 않아도 됩니다. 4. script type도 매번 text/javascript를 명시하지 않아도 됩니다. Semantic/Structual 요소(element) 컨텐츠의 목적이나 구조에 맞게 태그를 사용하여 빅데이터에서의 검색이 수월하게 하기 위해 도입되었습니다. 1. 레이아웃 header(머리말), footer(제작자, 저작권 정보), hgroup(제목과 부제목) nav(메뉴), section(문서영역 구분), article(개별 컨텐츠 즉, 뉴스기사, 블로그 내용 등) aside(좌우측 컨텐츠) 2. 그룹핑 main(주요 컨텐..