'전체 글'에 해당되는 글 390건

1. isNaN()

매개변수가 숫자가 아닌지 판별하여 true/false로 반환하는 함수로 숫자가 아니면 true를 반환합니다다. 예상하지 않은 결과를 방지하기 위해서 Number.isNaN()을 사용하는 걸 추천합니다. Number.isNaN이 없을 경우에, 식 (x != x)은 변수 x가 NaN인지 아닌지 테스트하는 더 믿을 수 있는 방법입니다. (출처)

NaN값은 산술 연산이 정의되지 않은 결과 또는 표현할 수 없는 결과를 도출하면 생성됩니다. 숫자가 아닌 값의 변환을 시도했으나 알맞은 원시 숫자 값이 없는 경우의 결과도 NaN입니다. 0을 0으로 나누면 NaN이지만, 다른 수를 0으로 나누면 그렇지 않습니다. NaN은 같음 연산 ==, ===을 사용해 판별할 수가 없어서 생겨났습니다.

2. jQuery.isNumeric()

$.isNumuric(value)의 value가 숫자인지 여부를 체크해서 boolean 값 true or false으로 반환합니다. 십진수의 유효성을 검사하는 함수이며 이 API는 jQuery 3.3에서 더 이상 사용되지 않습니다. 3.0부터 숫자로 강제 변환될 수 있는 경우에만 true가 반환됩니다. (출처)

4장 객체의 기초 내용을 바탕으로 객체의 정의와 이용 방법을 자세하게 다룹니다. 프로토타입 상속, 접근자 프로퍼티, 객체의 속성, 프로퍼티의 속성 등에 대해서 입니다. JS 언어의 스펙은 객체로 규정되어 있으므로 객체의 매커니즘에 관한 이해는 JS 전체를 이해하는 기초입니다.

1. 객체 생성하기

객체를 정의하는 방법과, 생성자의 프로토타입 객체에 추가한 메서드를 생성자로 생성한 인스턴스에서 사용하는 방법을 정리합니다. 

1.1 객체의 생성

JS 객체는 이름-값을 한 쌍으로 묶은 집합입니다. 이름(key)과 값이 한 쌍을 이룬 것을 프로퍼티라고 합니다. 값에는 모든 데이터 타입의 데이터(원시 값, 객체)를 저장할 수 있습니다. 함수의 참조를 값으로 가진 프로퍼티는 메서드라고 합니다.

생성 방법

1) 객체 리터럴로 생성

var card = {suit: "하트", rank: "A"};

2) 생성자로 생성

function Card(suit, rank){
	this.suit = suit;
	this.rank = rank;
}
var card = new Card("하트", "A");

3) Object.create로 생성 

var card = Object.create(Object.prototype, {
	suit: {
		value: "하트",
		writable: true,
		enumerable: true,
		configurable: true
	},
	rank: {
		value: "A",
		writable: true,
		enumerable: true,
		configurable: true
	}
});

1.2 프로토타입

생성자 안에서 메서드를 정의하는 방식의 문제점

생성자 안에서 this 뒤에 메서드를 정의하면 그 생성자로 생성한 모든 인스턴스에 똑같은 메서드가 추가됩니다.
즉 메서드를 포함한 생성자로 인스턴스를 여러 개 생성하면 같은 작업을 하는 메서드를 인스턴스 개수만큼 생성하게 되며 결과적으로 그만큼의 메모리를 소비합니다.

function Circle(center, radius) {
	this.center = center;
	this.radius = radius;
	this.area = function(){
		return Math.PI*this.radius*this.radius;
	};
}
var c1 = new Circle({x:0, y:0}, 2.0);
var c2 = new Circle({x:0, y:1}, 3.0);
var c3 = new Circle({x:1, y:0}, 1.0);

프로토타입 객체

위의 문제는 프로토타입 객체에 메서드를 정의하는 방식으로 해결할 수 있습니다. JS에서 함수도 객체이므로 함수 객체가 기본적으로 prototype 프로퍼티를 갖고 있습니다. 함수의 prototype 프로퍼티가 가리키는 객체를 그 함수의 프로토타입 객체라고 합니다. prototype 프로퍼티는 기본적으로 빈 객체를 가리킵니다.

function F(){};
console.log(F.prototype); //Object{}

프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티처럼 사용할 수 있습니다.

F.prototype.prop = "prototype value";
var obj = new F();
console.log(obj.prop); //"prototype value"

프로토타입은 '원형'이라는 뜻이지만, 여기서는 인스턴스에 아무것도 정의하지 않아도 처음부터 사용할 수 있는 것의 의미로 사용합니다. 또한 프로토타입 객체의 프로퍼티는 읽기만 가능하고 수정이 불가능합니다.
인스턴스의 프로퍼티에 값을 대입했을 때 이름이 같은 프로퍼티가 있으면 그 프로퍼티에 값을 대입하고, 없을 시 인스턴스에 그 이름으로 프로퍼티를 추가한 후 값을 대입합니다.

obj.prop = "instance value";
console.log(obj.prop); //"instance value"
console.log(F.prototype.prop); // "prototype value"

프로토

// Circle 생성자
fucntion Circle(center, radius) {
	this.center = center;
	this.radius = radius;
}
// Circle 생성자의 프로토타입 프로퍼티에 area 메서드 추가
Circle.prototype.area = funciton(){
	return Math.PI*this.radius*this.radius;
};
// Circle 생성자로 인스턴스를 생성
var c1 = new Circle({x:0, y:0}, 2.0);
var c2 = new Circle();
var c3 = new Circle();
console.log(); 

JS 개발 시 클릭 click 이벤트가 무한 반복해서 들어올 때...

"클릭 이벤트를 재정의하면 (같은 엘리먼트에 중복해서 클릭 이벤트를 발생시키면)
이벤트 대체가 아닌 중복이 되어 누적된 모든 이벤트가 다 실행된다.
따라서 off()를 사용해서 중복을 방지해야한다. "

$("#id").off().on('click', function() {
	//do something
}

//or

$("#id").off("click").on('click', function() {
	//do something
}

//https://yunzema.tistory.com/49

생각해보면 당연한 것이지만, 

"같은 element에 중복해서 클릭 이벤트를 발생시키면 그 수만큼 중복 실행된다"

마지막으로 설정한 이벤트를 제외하고 마지막에 정의된 것만 실행하려면
off를 사용해도 되지만 이벤트를 unbind한 후 bind를 해 준다.

//클릭이벤트 unbind
$("#test-button2").unbind("click");

//클릭이벤트 bind
$("#test-button2").bind("click",function(){
    alert("click event");
});


// or

//클릭이벤트 unbind & bind
$("#test-button2").unbind("click").bind("click",function(){
    alert("click event");
});

//https://6developer.com/3

.bind

// 사용법 요약

$("#element").bind('click', test_function);

function test_function(){
	alert();
}

<button id="element">
button elem.
</button>

쉽게 말하면 jQuery 이벤트를 다른 함수로 연결(묶어주는) 함수 (by.제타위키)

사전 준비

flex의 속성은 크게 큰 테두리에 있는 컨테이너에 적용하는 속성과 컨테이너 안의 아이템들에 적용하는 속성으로 나뉩니다. 사용하기 전에 컨테이너에는 display : flex; 속성을 넣어줍니다.

.container {
	display: flex;
}

그러면 아이템들이 가로 방향으로 배치되고 자신이 가진 내용물의 width 만큼 차지합니다. height는 컨테이너의 높이만큼 자동으로 늘어납니다. 비슷한 것으로 inline-flex는 아이템의 배치보다는 컨테이너와 주변 요소와의 관계를 결정합니다.

아이템 배치 축 결정

아이템들의 배치되는 축 (가로, 세로) 결정은 flex-direction을 사용합니다. row, row-reverse, column, column-reverse가 있습니다. 줄 넘김 설정은 flex-wrap을 사용합니다.

.container {
	flex-direction: row;
}

아이템 정렬 방식

아래와 같이 설정합니다. (좌->우, 우->좌) flex-start, flex-end, center, space-between, space-around 등이 있습니다.
flex-start는 아이템들을 시작점으로, flex-end는 끝점으로, center는 가운데로 정렬합니다. space-between은 사이에 균일한 간격을 넣어주며 space-around는 아이템 둘레에 균일한 간격을 만듭니다. space-evenlh는 아이템 사이와 양 끝에 균일한 간격을 만듭니다.

.container {
	justify-content: flex-start;
}

쌓는 방식의 수직축 규칙은 align-items로 설정합니다. stretch는 수직축 방향으로 끝까지 늘어나는 것, flex-start는 아이템들을 시작점으로 정렬하는 것, baseline은 텍스트 베이스 라인 기준으로 정렬하는 것입니다. flex-wrap: wrap;이 설정된 상태에서 아이템들의 행이 2줄 이상일 때 align-content는 여러 행 정렬을 조절할 수 있습니다.

.container {
	align-items: flex-start;
}

기타 다양한 옵션들은 아래 포스팅이 정리가 잘 되어있습니다. 아래의 링크를 보고 내용을 요약한 것이 이 포스팅이기도 합니다.

studiomeal.com/archives/197

실습

flex로 container 역할을 하는 큰 div 안에 item 역할을 하는 div 두 개를 만든 다음, 2개의 item들을 동적으로 가로분할, 세로분할하여 화면 분할 형태를 바꾸는 걸 하나 만들어보았습니다. html과 js, jQuery, css를 사용했습니다.

* jQuery insertAfter : www.thewordcracker.com/jquery-examples/change-the-order-of-elements-using-jquery/

구글 검색 명령어 (Google Search Operator) 란?

구글의 웹페이지들 중 원하는 정보를 효율적으로 검색하기 위해선 구글 검색 명령어 가이드를 잘 활용하면 좋은데요. 이번 글에서는 구글에서 효율적인 검색을 할 수 있도록 도와주는 구글 검색 명령어를 다뤄보도록 하겠습니다.

구글 검색 명령어 혹은 구글 검색 연산자(Google Search Operator)란 구글에서 검색을 할 때 더 효과적으로 목적에 맞는 검색을 할 수 있도록 도와주는 명령어 입니다. 목적과 용도를 가지고 몇가지만 익숙하게 다루실 줄 안다면, 훨씬 원하시는 정보에 대한 답을 빠르고 효율적으로 얻을 수 있습니다. 

1. 구글 기본 검색 명령어(Basic Search Operator)

기본 검색 명령어는 구글 서치 결과 값을 간단하게 필터할 때 사용할 수 있는 명령어 입니다. 기본 검색 명령어 자체만을 이용해서 검색도 가능하고, 원하시는 결과 값에 따라 여러 기본 검색 명령어 및 고급 검색 명령어와 함께 사용하여 검색도 가능합니다.

2. 고급 검색 명령어(Advanced Search Operators)

고급 검색 명령어는 일반 검색 명령어와는 조금 다르게, 도메인 URL과 같은 특별한 매개 변수(Parameter)의 입력을 필요로 하기도 합니다.일반 검색 명령어로 찾기 어렵거나 검색 결과 값을 더 세부적으로 필터하고 싶을 때 사용하는 명령어 입니다. 일반 검색 명령어와 같이 여러 명령어를 함께 사용할 수 있습니다.

구글은 빅 데이터를 분석하여 주기적으로 잘 사용되지 않거나, 필요성이 떨어진다고 생각되는 명령어들을 주기적으로 없애거나 생성합니다. 이 글의 출처에서 에디터분은 구글 SEO 검색엔진 최적화 작업을 진행하거나, 구글에서 웹페이지 색인(index)여부를 확인하거나, 혹은 PPC 키워드 광고 키워드 리서치를 할 때 등에도 구글 명령어를 활용하고 계시다고 합니다. 이런 구글 검색명령어가 낯설은 분도 많을 텐데요. 일단 일반적인 검색부터 자주 활용하면서 익숙해져봐야겠습니다. 

출처 

https://www.hedleyonline.com/ko/blog/google-search-operator-complete-guide/  

유튜브 첫 채널을 개설했다면 프로필 사진을 추가하고 싶으실 건데요. 유튜브 채널 프로필, 커버 이미지 수정 및 추가 방법은 아래 순서를 따라가면 됩니다. 유튜브 첫 화면에서 프로필에 사람 아이콘을 누르면 나오는 드롭다운 메뉴에서 내 채널 메뉴를 클릭합니다. 

저는 눈의 피로도를 위해 거의 다크모드 환경을 많이 사용하기에 어둑어둑합니다. 아직 준비중인 채널이라 업로드한 영상이 하나도 없네요.나온 화면에서 우측의 채널 맞춤설정 메뉴 버튼을 클릭합니다. 

이제 유튜브 채널 스튜디오 메뉴로 이동했습니다. 탭 메뉴에서 브랜딩을 마우스로 클릭하면 프로필사진, 배너 이미지, 동영상 워터마크를 설정할 수 있습니다. 레이아웃을 들어가면 영상별로 카테고리도 분류할 수 있습니다.

원래 목적으로 돌아와서 유튜브 채널 프로필, 배너 이미지 사이즈는 다음과 같습니다. 이미지보다 아래 표에 더 자세히 적어두었습니다.
정보 출처는 뇌피셜이 아니고 유튜브 측에서 제공한 정보입니다. (위 페이지에서 자세히 알아보기를 누르면 누구나 볼 수 있습니다.)

※ 채널 아이콘과 채널 아트의 수정 및 업데이트는 이제 모바일 수정은 불가합니다. PC로만 가능하다고 하네요!

본래는 만들 때부터 맞춰서 제작하긴 하지만, 가지고 있거나 제작한 이미지 사이즈가 크다면, 이미지 크기를 조절하는 방법은 컴퓨터의 이미지 편집기, 온라인 이미지 크기 조절 도구 사용 등 다양합니다. 애플 맥에서는 Preview, 윈도우 컴퓨터에서는 Microsoft Photos 가 있고, 흔히 그림판이나 알씨 등도 사용하며 어도비 포토샵 등등 무궁무진합니다.

각각의 유튜브 이미지 업로드는 아까 진입한 브랜딩 페이지에서 업로드를 눌러서 진행하시면 됩니다. 이번 글에서는 유튜브 채널 프로필, 배너 이미지, 워터마크의 권장 이미지 규격과 업로드 방법을 알아보았습니다. 도움이 되셨다면 광고 한번만 눌러주시면 큰 도움이 됩니다^^ 읽어주셔서 감사합니다~

eval()은 문자열을 코드로 인식하게 하는 함수입니다. 
ES5부터는 지역범위가 아니라 전역 범위에서 동작합니다. ** 즉 함수를 선언하면 전역함수가 되고, 실행 코드는 실행되는 위치의 지역 범위에 접근할 수 없습니다.

eval()

인자가 하나 이상의 JS 명령문을 나타낸다면 실행합니다.
인자가 문자열이 아니면 인자 그대로 반환합니다.
값이 없으면 undefined를 반환합니다.

eval 함수는 eval('2+2') 이런식으로 사용합니다. 

var jb = '2+2';
			document.write( '<p>' + jb + '</p>' );
			document.write( '<p>' + eval( jb ) + '</p>' );
// 2+2
// 4

동적인 프로퍼티에 접근하려고 사용한다면 대괄호 표기법으로 대체할 수 있습니다. (출처) eval()은 Ajax 요청으로 받아온 JSON 응답을 다룰 때 이런 안티 패턴이 나오기도 하는데요.

// 안티 패턴 
var property = 'name'; 
console.log(eval('obj.' + property)); 

// 권장 패턴 
var property = 'name'; 
console.log(obj[property]);

보안과 유효성을 보장하기 위해서 브라우저의 내장 메서드를 사용해서 JSON 응답을 파싱하는 것이 좋습니다.
즉 JSON.parse()를 사용하는 것인데 미지원 브라우저에서는 JSON.org 의 라이브러리를 사용할 수 있습니다.

// 참고: 실행 가능한 모든 예시에 'use strict'가 적용되어있습니다.

eval("let x = 5; function f() {}");

alert(typeof x); // undefined (없는 변수)
// 함수 f도 읽을 수 없음

엄격 모드에서 eval은 자체 렉시컬 환경을 갖고 있어서 eval 내부에 선언된 함수와 변수는 외부에서 읽을 수 없습니다.
use strict가 적용되어 있지 않은 경우엔 eval은 자체 렉시컬 환경을 갖지 않기 때문에 외부에 있는 x와 f를 읽을 수 있습니다. (출처)

자바스크립트 onchange는 작성한 JS를 통해 변화가 일어났는지를 감지합니다. jQuery change 이벤트와 비슷합니다. onchange 이벤트의 사용 방법은 아래와 같습니다. 첫 번째는 html에서 사용할 때, 나머지는 js에서 사용할 때의 문법입니다. 

<element onchange="myScript">

object.onchange = function(){myScript};

object.addEventListener("change", myScript);

단 마지막의 addEventListner는 익스플로러 8 이전 버전에서는 작동하지 않는 메소드입니다. (출처) 아래는 간단한 JS onchange 이벤트의 예제입니다. 예제를 실행하고 input text의 내용(non)의 내용을 바꾸면 배경색이 노란색으로 바뀝니다.  

<input type="text" value="non" onchange = "hoisted(this)" />

 hoisted(obj);

 function hoisted(obj) {
   obj.style.backgroundColor = 'yellow';
 }

 
아래는 onChange 함수를 지원하는 브라우저입니다. 지원 브라우저는 크롬, 엣지, 파이어폭스, 익스플로러, 사파리, 오페라 등이 있습니다.

아래는 selectbox에서 onchange 함수를 사용하고 this.value를 사용해서 값을 가져오는 예시입니다.
다른 함수에서 ID 값으로 참조하여 선택되어져 있는 option의 value값을 가져올 수 있습니다.

<select id="seledtBox" onchange="alert(this.value)">
<option id="0" value="value1">value1</option>
<option id="1" value="value2">value2</option>
<option id="2" value="value3">value3</option>
<option id="3" value="value4">value4</option>
<option id="4" value="value5">value5</option>
</select> 

var selectValue = document.getElementById('selectBox').value;
alert(selectValue); 

<select id="seledtBox" onchange="alert(this.options[this.selectedIndex].text)">
<option id="0">value1</option>
<option id="1">value2</option>
<option id="2">value3</option>
<option id="3">value4</option>
<option id="4">value5</option>
</select> 

두 번째 자바스크립트 onchange를 사용한 경우에는 text (value1, value2, ...) 부분이 값으로 넘어갑니다. (출처)

onchange의 값이 갱신되지 않을 때 / 동작하지 않는 경우 해결하기

onchange가 select 태그 등에 동작하지 않는 원인은 select 태그를 클릭해서 값을 선택하지 않고,
select 태그의 value 프로퍼티의 값을 스크립트를 사용해 업데이트 하는 경우입니다.
onchange 이벤트는 해당 element의 blur 여부에 따라 동작하기 때문에 값이 갱신되지 않습니다.

onchange 동작 안됨 현상의 해결 방법은 해당 DOM에 onchange() 함수를 추가하여 사용하는 것입니다. 위와 같이 코드를 적용하면 updated()라는 함수가 뒤따라 실행하게 됩니다. (출처)

document.querySelector('select').value = '2';
// 엘리먼트를 찾아 값을 변경

document.querySelector('select').onchange();
// 값이 바뀐 엘리먼트에 onchange 함수를 실행

입력폼의 양식이 많은 경우 onchange()를 가지는 엘리먼트 요소가 하나가 아닌 여러개인 경우가 있을 것입니다. 이 경우 하나씩 적용하기 보다 onchange를 가지는 모든 엘리먼트를 가져와 동작시키는 방법이 더욱 편합니다.  모든 onchange 속성을 가지는 태그를 찾아 그 값을 eval() 함수를 사용하여 실행하는 방법으로 아래와 같습니다.

var elements = document.querySelectorAll('[onchange]');

for(var i = 0; i < elements.length; i++) {
  var thisFunc = elements[i].getAttribute('onchange');
  eval(thisFunc);
};

시작점 : 그래픽을 불러오는 지점에서 멀티스레드(thread : 프로세스 내 실행 단위)가 서로 충돌. 구조에 대해 고민 시작

JS에서 자주 쓰이는 패턴은 모듈 패턴 (모듈 : 비공개 변수를 가질 수 있는 즉시실행함수 IIFE 같은 것), 싱글톤 패턴, 생성자 패턴이 있습니다. 

JS 싱글톤

• 어플리케이션 시작 -> 모 클래스가 최초 한번만 메모리 할당 (static) -> 그 메모리에 인스턴스를 만들어 사용하는 패턴

• 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나. 이후 사용 시에도 같은 것을 호출 = > 단 하나의 인스턴스를 생성해 사용하는 디자인 패턴

• 사용 : 처음 네임스페이스를 만들 때 등

• 간혹 멀티쓰레드 환경에서 동기화처리를 안하면 인스턴스가 두 개 생성될 수 있습니다.

• 하나로 통제되어서 과정과 변수값의 원자성 모두 보장되지만 데드락 위험성

• 함수가 컨트롤

var obj = {
  a: 'hello',
  b: function() {
    alert(this.a);
  }
};

객체리터럴이 대표적인 싱글톤패턴의 예입니다.
다만 속성이 노출되어 있어 싱글톤 패턴은 아래와 같이 비공개로 많이 사용합니다.

var singleton = (function() {
  var instance;
  var a = 'hello';
  function initiate() {
    return {
      a: a,
      b: function() {
        alert(a);
      }
    };
  }
  return {
    getInstance: function() {
      if (!instance) {
        instance = initiate();
      }
      return instance;
    }
  }
})();
var first = singleton.getInstance();
var second = singleton.getInstance();
console.log(first === second); // true;

IIFE 즉시실행함수 안에 비공개변수 a를 만들고,
그 안에 instance 변수와 initiate 함수를 만듭니다.
initiate 함수 안의 내용이 실제 객체의 내용입니다.

getInstance 함수 호출 -> 내부 initiate 함수 호출-> instance에 객체 내용 저장, 반환
재호출되어 이미 instance가 있는 경우 그대로 반환

** 쉽게 설명을 잘 해 놓은 글 : blog.naver.com/mycho/221848960534

var Singleton = (function() {

  var Singleton = function() {

    this.type = "1";

  }

  var instance = null;

  var createInstance = function() {

    instance = new Singleton();

    return instance;

  }

  return {

    getInstance: function() {

      if (!instance) {

        instance = createInstance();

      }

      return instance;

    }

  };

})();


function Client() {}

Client.prototype.test = function() {

  var obj1 = Singleton.getInstance();

  var obj2 = Singleton.getInstance();

  if (obj1 === obj2) {

    console.log("obj1과 obj2는 같은 인스턴스다.");

  }
}
new Client().test();

// 출력결과
// obj1과 obj2는 같은 인스턴스다.

Atomics 객체

정적메소드로서 제공됩니다. 메모리가 공유되었을때, 멀티쓰레드는 메모리안에 같은 데이터들을 읽거나 쓸 수 있습니다. Atomic operations은 예측 가능한 값을 쓰고 읽으며 다음 작업이 시작되기 전에 작업이 완료되고, 작업이 중단되지 않도록 합니다.  지원 브라우저는 파이어폭스만 지원됩니다.

변수의 원자성은 보장하나 과정이 보장 되지 않으며 시스템이 변수를 컨트롤합니다.

데드락, Deadlock

서로 우위가 애매해서 기다리다 실행이 되지 않는 것. 서로 기다리는...

• 원인 : 운영체제 혹은 소프트웨어의 잘못된 자원 관리

• 의미 : 둘 이상의 프로세스가 함께 멈추어 버리는 현상. 데드락은 평소엔 별 문제가 없다가 가끔 쌩뚱맞게 일어나기 때문에 다중 쓰레드 프로그래밍의 주요 난점 중 하나

• 주요 패턴 : 다중 쓰레드 프로그래밍 환경에서의 ABA 문제, AB/BA 문제 등. 락(뮤텍스 같은 다중 프로세스 동기화 장치)을 저 순서대로 짜면 첫 락에 진입하자마자 쓰레드가 바뀌는 경우(Context-Switching) 다른 쓰레드가 자꾸 얻으려고 시도하는데 이미 락은 걸려 있고, 풀어주진 않고, 그래서 무한 대기하는 현상

• 해결 : 코드 순서를 조정하거나 처리 시간대를 다르게 바꾸어 동시에 일어나지 않게 하거나 락을 하나로 합칩니다. (이 경우

   CPU 활용도는 좀 떨어집니다.)

크리티컬섹션 (Critical Section)

• 운영체제가 지원하는 동기화 방법 중 하나로 공유 자원의 독점을 보장해주는 역할을 합니다.

• 임계 구역, 치명적 영역. 즉 보호되어야 할 영역을 뜻합니다.

• 한 프로세스 내의 스레드 사이에서만 동기화가 가능. 접근을 대기시킵니다.

자바스크립트에서 크리티컬섹션 락 구현의 유사한 예로는 글로벌 변수 flag 를 두고 갱신중에는 flag = false,
완료후엔 flag = true 사용을 해야할 때는 flag == true 의 조건을 두는 방식이 있습니다.

Promise

 Promise 객체는 비동기 작업의 완료/실패와 결과값을 나타냅니다. Promise를 사용하면 비동기메서드에서 동기 메서드처럼 값을 반환할 수 있습니다. JS에서 프로미스는 콜백 함수를 연결할 수 있는 이미 진행중인 프로세스를 나타앱니다. 

시간차를 두고 실행하려면 인수 없는 화살표 함수  f = () => expression를 사용하고, f()를 사용해 평가합니다. 메서드의 종류는 아래와 같습니다.

• Promise.all()
• Promise.race()
• Promise.reject()
• Promise.resolve()

Promise의 프로토타입 메서드는 아래와 같습니다.

• Promise.prototype.catch()
• Promise.prototype.then()
• Promise.prototype.finally()

JS async와 await

자바스크립트의 비동기 처리 패턴. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다. 일반적으로 await의 대상이 되는 비동기처리코드는 Axios 등 프로미스를 반환하는 API 호출 함수입니다. 

async function functionName(){
	await 비동기처리 메서드();
}

출처

싱글톤 :  jeong-pro.tistory.com/86

www.zerocho.com/category/JavaScript/post/57541bef7dfff917002c4e86

blog.naver.com/mycho/221848960534

아토믹 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Atomics

데드락 : namu.wiki/w/Deadlock

크리티컬 섹션 : genesis8.tistory.com/154

JS async와 await : joshua1988.github.io/web-development/javascript/js-async-await/

JS replaceAll 안됨 현상이 있으신가요? 이유는 그 함수를 미지원하기 때문입니다.

var date = "2016-06-23";
var str = date.replace("-", "");

위와 같이 사용하면 첫 번째 "-"만 공백으로 대체됩니다. (str = 201606-23)
replace 함수에 정규식을 넣어 사용하면 의도한 결과를 만들 수 있습니다.

var str = date.replace(/-/gi, "");

gi에서 g는 발생할 모든 패턴에 대한 전역 검색, i는 대소문자 모두 포함을 뜻합니다. m을 추가하면 여러 줄 검색도 가능합니다. 슬래시("/")를 사용할 때는 이스케이프 문자 (\)를 슬래시 앞에 붙여 사용합니다.

자주 쓰는 기능이라면 함수로 만들어두는 것도 좋겠습니다.

function replaceAll(str, searchStr, replaceStr) {

   return str.split(searchStr).join(replaceStr);
}

▶ XSLT XPATH  노드 접근 표현식의 문법을 알아보겠습니다. XPATH는 XML 문서의 요소들을 노드 개념으로 접근, 소스 트리의 정확한 위치를 지정해주기 위한 경로지정 문법으로 XML과 별개의 문법 체계를 지닙니다.

XPATH : XML Path Language. W3C의 표준으로 확장 생성 언어 문서의 구조를 통해
경로 위에 지정한 구문을 사용하여 항목을 배치, 처리하는 방법을 기술하는 언어로
XSL 변환 (XSLT)과 XML 지시자 언어(XPointer)에 쓰입니다.
XML 문서의 노드를 정의하기 위해 경로식을 사용하며함수와 기타 확장 가능 표현들이 있습니다. (출처)

'XPath is a language for addressing parts of an XML document,designed to be used by both XSLT and XPointer'

용어

• tag : <로 시작해서 >로 끝나는 형식정의로 시작태그, 종료태그, 빈태그가 있습니다.

• element : 시작, 종료태그와 태그 사이의 모든 내용으로 태그, 자식element, 속성, text(contents)가 있습니다.

• node : XML문서는 여러 개의 Nodes(가지)로 구성된 Tree로 비유됩니다. XPath의 Node는 element, attribute, text, namespace, processing-instruction, comment, document 7가지가 있습니다. 

• 노드 사이의 관계의 용어는 부모노드 Parent, 자식노드 Children, 형제노드 Siblings, 조상노드 Ancestors, 자손노드 Descendants를 사용합니다.

• root element : Element tree 중 최상위의 Element

• Atomic values : 부모나 자식이 없는 단일 Node들의 값

• Items :  Atomic values 단일 값들과 Node들

XSLT XPATH  노드 접근 표현식

• / : 최상위 엘리먼트 or 가상의 루트 노드

• * : 노드 전체

• . : 노드 자신

• /a/b/c : 루트 노드의 자식 a의 자식 b의 자식인 c

• a : 노드 자신 (상대경로)

• //a : 모든 노드 중 a 노드 (첫 노드 검색 후 작업종료)

• a[b] : b 노드를 자식으로 갖는 a노드

• a[b='c'] : 자식 b 노드가 c텍스트를 갖는 a 노드

• a[b='c']/d : 자식 b 노드가 c텍스트를 갖는 a 노드의 자식 d노드

• a/@b : a노드의 속성 b

• a[@b] : b 속성을 갖는 a노드

• a[@b='c'] : b속성값 c를 갖는 a노드

• a[@b='c']/d : b속성값 c를 갖는 a 노드의 자식 d노드

• a/@* : a의 모든 속성노드

• a/* : a의 모든 자식노드

XPATH 함수

XPath는 100여개 이상의 내장함수를 포함하고 있습니다. 이러한 함수들은 문자열, 숫자, 날짜와 시간비교, 시퀀스 생성, 논리값 등 매우 다양합니다. (출처)

• nodename : 지정한 노드이름을 가진 모든 노드를 선택

• name() : 노드명 반환 (ex. a/b/c/name())

• processing-instruction() - 처리지시문을 반환

• comment() - 주석 반환

• text() : 노드 자신의 PCDATA 만 반환. (자식 X)

• position() : 노드의 위치 지정 (ex. //a[position()=2])

• last() : 노드집합의 마지막 노드

• count() : 반환된 노드집합의 갯수

• number() : Text형인 PCDATA를 숫자형으로 변환

• sum() : 노드집합 안의 모든 산술값들의 합

• boolean() : 값이 숫자 0이면 false, 나머지 true / 문자열일때 하나 이상이면 true / 노드집합일 때 비어있으면 false

• not() : 반환값의 반대 값 확인. 요소의 유무 확인에 사용

• true() / false() : 항상 true/false 값을 반환

• contains() : 데이터 검색

• stars-width() : 특정 문자열로 시작하는지 유무

• string() : 값을 문자열로 반환

• string-length() - 문자길이를 반환

• concat(문자열1,문자열2) - 두 문자열을 합친다.

• contains(소스문자열,찾는문자열) - 문자열에 특정문자가 있는지를 Boolean값으로 반환

• substring(소스문자열,숫자) - 문자열로부터 숫자만큼 이후 문자를 반환

• substring-after(소스문자열,특정문자) - 처음 만나는 특정문자 뒤의 모든 문자를 반환

• substring-before(소스문자열,특정문자) - 처음 만나는 특정문자 앞의 모든 문자를 반환

• translate(소스문자열,찾을 문자열,대치할 문자열) - 소스문자열에서 문자를 찾아 바꾼다.

참고

www.w3schools.com/xml/xsl_elementref.asp

출처 

www.nextree.co.kr/p6278/

blog.daum.net/webdeveloper/8663454

자바스크립트로 3D 모델을 로드하는 방법

SAP 3D Visual Enterprise Viewer SDK와 함께 JavaScript를 사용하여 브라우저에서 3d 모델을 로드하는 것은 매우 쉽습니다. 아래 예제에서는 MyRHFile.rh라는 모델을 사용하고 있습니다. 실제 사용 시 이 파일의 이름을 변경해야 합니다.

<html>
<head> </head>
<body>   
	<object id="VEViewer" type="application/rh" width="100%" height=600px">     
	<div align="center">Couldn't instantiate VEViewer for some reason</div>   
	</object>   

<script type="text/javascript">

	function windowOnLoad()
	{
		VEViewer = document.getElementById("VEViewer");  
		VEViewer.FileName = "MyRHFile.rh";  
	}

// Initialisation
 var VEViewer; window.onload = windowOnLoad;
 
</script>
</body>
</html>

로드 시 자바스크립트를 사용하여 objects를 강조 표시 (highlight objects) 하는 방법

SAP 3D Visual Enterprise Viewer SDK와 함께 JS를 사용하여 scene tree에서 objects를 강조 표시하는 방법을 보여줍니다. 모델에서 선택된 노드는 JS에서 명시적으로 지정됩니다.

<html>
<head>
  <object id="Viewer" type="application/rh" width="100%" height=600px">
  </object>
</head>

<body>
<script type="text/javascript">

 onload = windowOnLoad;

function windowOnLoad()
{
   Viewer = document.getElementById("Viewer");
   Viewer.FileName = "MyRHFile.rh";
   Viewer.SceneLoaded = SelectNodes;
}
 
function SelectNodes()
{
   var nodes = Viewer.Scene.Nodes;
   var nodeCount = Viewer.Scene.Nodes.Count;

// Loops thro' the scene tree to select objects [_1_Primary_Driven_Gear & _6_Left_Case] 

 for (var i = 0; i < nodeCount; i++)
 {
    var node = nodes.GetByIndex(i);
    var output = node.name;
  
  if(output=="_1_Primary_Driven_Gear" || output=="_6_Left_Case")
  {
    node.visible = true;
    node.selected = true;  
  }
 }
}
</script>
</body>
</html>

scene tree에서 object 및 steps 목록을 얻는 방법

JS로 SAP 3D Visual Enterprise Viewer의 scene tree를 탐색하여 object와 steps 목록들을 가져오는 방법입니다. 이 예제를 사용하려면 여기에 "c : \ SAPVisualEnterpriseViewerSDKSamples"디렉토리 예제를 만들어야합니다. 아래 코드를 .htm 파일에 저장해야합니다. 이 디렉토리에는 MyRHFile.rh라는 샘플 .rh 파일도 있어야 합니다. 코드를 수정하여 파일 이름을 변경할 수 있습니다.

참고 :이 예에서는 document.write를 사용하지 않았습니다. 그 이유는 출력이 느려지고 insertAdjacentHTML을 사용하여 결과를 출력하기 때문  입니다.

<html>
<head>
<object id="Viewer" type="application/rh" width="100%" height=600px">
</object>
</head>

<body>

<div id="firstDiv">Ojbect <strong>List</strong></div>

<script type="text/javascript">

onload = windowOnLoad;

function windowOnLoad()
{
Viewer = document.getElementById("Viewer");
Viewer.FileName = "MyRHFile.rh";
Viewer.SceneLoaded = GetNode;
}

function GetNode()
{
var nodes = Viewer.Scene.Nodes;
var nodeCount = Viewer.Scene.Nodes.Count;
// Traverse all the Scene's nodes
	for (var i = 0; i < nodeCount; i++)
	{
    var node = nodes.GetByIndex(i);
    var output = node.name;
    var div1 = document.getElementById('firstDiv');
    div1.insertAdjacentHTML('afterend', '<div id="secondDiv">Second <strong>'+output+'</strong></div>');

      if(output=="_1_Primary_Driven_Gear" || output=="_6_Left_Case")
      {
        //node.visible = true;
        //node.selected = true;
        //var ExecuteQuery;
        //var querytoexecute ="everything() set_opacity(0.3)";

        //Viewer.Scene.ExecuteQuery(querytoexecute);
      }
	}
}
</script>
</body>
</html>

Object를 회전, 스케일 조절

SAP 3D Visual Enterprise Viewer와 JS로 객체를 회전, 확대, 축소하는 방법입니다. 버튼 같은 것을 누르면 작동하게 하겠죠. 그의 예시입니다.

<html>

  <head>
    <script id=clientEventHandlersJS language=javascript>
      function LoadFile() {
        var fileToUpload = document.getElementById("myfile").value;
        document.getElementById("vev").LoadFile(fileToUpload);
      }

      function rh() {
        return element("vev");
      }

      //ALL ROTATE CODE ETC
      function BadNodeWarning() {
        alert("Please select an object from your Model.");
      }

      function UpdateScene() {
        Viewer = document.getElementById("vev");
        Viewer.Scene.update();
      }

      function getSelected() {
        Viewer = document.getElementById("vev");
        var nodes = Viewer.Scene.Nodes;

        for (var i = 0; i < nodes.count; i++) {
          n = nodes.getByIndex(i);
          if (n.selected) return n;
        }
        return null;
      }

      function RotateWorld_onclick() {
        var n = getSelected();
        if (!n) return BadNodeWarning();

        // rotate in world coords
        n.transform.rotateAboutZInplace(3.14159 / 7);
        UpdateScene();
      }

      function ScaleWorld_onclick()  {

        var n = getSelected();
        if (!n) return BadNodeWarning();

        // rotate in world coords
        n.transform.scaleInPlace(1.1, 1.1, 1.1);
        UpdateScene();
      }

    </script>

    <style>
      p.controls span {
        display: inline-block;
        width: 150px;
      }

      p.controls input,
      input[type="button"] {
        width: 100px;
      }

    </style>
  </head>

  <body>

    <h1>Sample Browse and Load SAP 3d Visual Enterprise Models </h1>

    <b>Step One:</b> <br><br>

    <input id="myfile" name="myfile" type="file"><br><br>

    <b>Step Two:</b> <br><br>

    <input value="Click Here To Load Your 3D Model" type="submit" onclick="return LoadFile()">

    <br><br>

    <object id="vev" style="width: 600px; height: 400px" type="application/rh"></object>

    <p class="controls">
      <span>World transformations:</span>
      <input id="RotateWorld" type="button" value="Rotate" onclick="return RotateWorld_onclick()">
      <input id="ScaleWorld" type="button" value="Scale" onclick="return ScaleWorld_onclick()">
    </p>
  </body>
</html>

출처 : https://wiki.scn.sap.com/wiki/display/SVE/SAP+3D+Visual+Enterprise+Viewer+SDK?original_fqdn=wiki.sdn.sap.com