IT 기록

이슈 

모바일 웹페이지에서 유튜브 iframe API를 이용하여 동영상을 노출시키고 테스트 도중,

Safari에서만 history back(뒤로가기) 시, 영상이 자동으로 음소거 되어 연속 재생되는 이슈가 발견되었다.

한 번 그런 현상이 재현되면 페이지를 reload하기 전까지 볼륨 조절버튼이나

음소거 on/off버튼도 먹통이 되기 때문에, major급 이슈였고 해결하는데 꽤나 많은 시간이 소요되었다..

BFCache

 브라우저에서 뒤로가기 시, 크롬을 제외한 브라우저에서는 BFCache 기능을 제공한다. 

이전 화면으로 재이동 시 페이지를 좀 더 빠르게 보여주기 위한 기능으로 

html파싱이나 페이지를 구성하는 동작 자체를 생략하기 위해 html, css뿐만아니라 javascript의 상태까지 저장했다가 다시 불러오는 기술이다. 

해결

history.back시 iframe 영상이 음소거된 상태로 재생되는 이슈를 해결하기 위해 

'pageshow'나 'onload', 'pagehide' 등의 이벤트들을 이것 저것 사용해 보았지만,

많은 블로그들에서 해결 방법으로 나와있던 pageshow 이벤트 조차 간헐적으로 타는 것이었다. 

그런데 'popstate'이벤트를 걸어보니 항상 타는 것이 확인되어,

이벤트가 탈 때 영상 요소를 remove시키고,

재 로딩시키는 방법으로 스크립트를 수정하여 이슈를 해결하였다.

 위 소스는 video_area 클래스를 가진 요소 하위에 'youtube_vod' 를 id로 가지는 요소를 생성하면서 youtube 동영상을 로딩시키는 부분이다.

id가 youtube_vod 인 요소는 동영상이 로딩될때 같이 생성되는, 영상 로딩을 위한 접근자 역할을 한다.

접근자를 이용하여 영상을 재 로딩시키는 부분을 확인할 수 있다.

09. Message Queue and Event Loop

Messaege Queue와 Event Loop 이해에 앞서 알아 두어야 하는 것은 Javascript는 non blocking언어라는 것이다. 

(phthon의 경우 blocking언어.)

- Non blocking언어

Javascript는 Non blocking언어이지만 alert function의 경우에는 block이 가능하다. 

alert('blabla');
console.log('123');

위 코드를 실행하면,

alert가 뜨고 해당 alert창을 닫기 전까지 console.log는 실행되지 않는다. 

alert를 만나면 다음 프로세스를 수행하지 않고 차단(block)된다는 것이다. 

따라서 alert는 blocking function인 것인데, Javascript언어 자체는 non blocking언어이다. 

자바스크립트가 non blocking언어 이기 때문에 Events와 callbacks이 사용 가능한 것이다.

예를 들어 버튼을 만들고 Add event listener 로 click 에 대한 callback 이벤트를 걸 수 있다.

-Queue와 Event loop

setTimeout{
	console.log('hi'), 0
};
console.log('bye');

setTimeout을 이용하여 0초 후에 hi를 출력하도록 하고, 다음으로 bye를 출력하도록 하는 소스이다.

위 코드를 실행하면 결과는 기대와 다르게 bye가 먼저 출력되고 이후에 hi가 먼저 출력된다.

그렇다며 그 이유는 무엇인가?

이번 절의 Queue와 Event Loop는 이 현상에 대한 이유를 이해하는 것이 핵심이라고 한다. 

위 코드를 실행하면 내부적으로 다음과 같은 프로세스가 실행된다.

1. 먼저 명령이 Stack에 순서대로 들어온다. 

2. 두번째 단계에서 setTimeout은 브라우저의 WEB API를 이용하여 호출되기 때문에  Web API zone으로 이동 되고,

다음 명령인 console.log 문장이 바로 실행된다. 떄문에 bye가 먼저 찍히는 것이다.

3. bye는 먼저 실행되어 stack을 빠져나가고, Web API는 setTimeout안의 내용을 0초 후에 Queue로 보낸다. 

4. 마지막으로 Queue에 들어온 내용은 다시 Stack으로 보내져서 최종적으로 hi가 출력되는 것이다.

이것이 Queue와 event Loop에 대한 핵심 내용이다.. 라는 것이 노마드 코더의 설명이다. 

동영상마다 러닝타임이 10분정도다 보니 매번 설명이 충분하지 못한 느낌이 드는것은 어쩔수 없는 것인가,,,

08.IIFE, Modules

주제는 IIFE, MOdules and Namepaces이지만 강의에서 Namespaces의 내용은 하지 않는다고 하여 pass~

const secretUsers = ["park", "lee", "kim"];
console.log(secretUsers);

위와 같은 문장을 실행하면 브라우저에서 Array에 접근이 가능하다. 

브라우저에서 접근이 가능하다는 것은 해당 Array를 마음대로 변형하는 것도 가능하다는 것이다. 

아래와 같이.

위의 secretUsers Variable은 공개되어 있다. Private이 아니다.

브라우저에 있고, 접근할 수 있다는 것이다. 

어떤 경우, 자바스크립트는 주고 싶지만, 나의 variable에는 영향을 끼치는 것을 원하지 않는 경우가 있다. 

비밀모드로 만들어야 한다는 것인데, 

그럴때 사용하는 것이 IIFE이다. 

바로 아래와 같이 함수를 만들고 해당 함수를 부르는 것이다. ()()

(function(){
	const secretUsers = ["park", "lee", "kim"];
	console.log(secretUsers);
})()

혹은

(() => {
	const secretUsers = ["park", "lee", "kim"];
	console.log(secretUsers);
})()

위와 같이 IIFE를 사용하면 해당 variable에 대한 접근이 불가능 한 것을 확인할 수 있다.

- Module

html페이지에서 외부 스크립트 파일을 가져와 사용해야 할때,

<script src="경로/스크립트파일명.js"></script> 와 같은 방식으로 사용한다. 

하지만 각각의 스크립트 파일들을 하나의 모듈로서 포함시켜 사용하기 위해서는, 

위와같은 문장으로는 에러를 발생시킨다.

type 속성을 추가하여 "module"값을 지정해주면 해결된다.

<script type="module" src="경로/스크립트파일명.js"></script>

07.Expression vs. Statement

- Expression

Expression returns a value

무언가 결과(Value)를 return하는 문장

ex1) 5 + 11  > 16이라는 결과를 return하므로 Expression

ex2) 

function add(a, b) {

 return a+b;

}

console.log(add(5,6)); 

 > add(5,6) 도 11이라는 결과를 return하므로 Expression

자바스크립트는 Expression을 value로 대체하고, 작업을 계속 진행한다.

- Statement

Statement는 명령. 혹은 지시이다. 

ex1) 예를 들어 아래와 같은 코드블럭은 아무것도 리턴하지 않는다. 지시. 명령이다.

if(true) {

}

ex2) 아래와 같은 문장은 에러를 발생시킨다. return되는 Value가 없는 Statement를 Variable로 저장할 수 가 없기 때문이다.

const thing = if(true) {
}

결론. Variable로 저장할 수 있는 건 Expression이다.

Expression은 Value를 리턴한다. 

Statement는 그냥 명령이다. 

if, else, for, while...  등등

function Expression vs. function declaration

const awesome = add(1,5);


function add(a,b) {	// << 함수의 선언식(function declaration)
	return a+b;
}

console.log(awesome)

위 문장은 에러를 발생시키지 않는다. 

라인 1에서는 존재하지 않던 함수를 사용했고, 결과는 6이 반환된다.

이것이 가능한 이유는

자바스크립트가 코드를 보면, 모든 declaration(함수의 선언식)을 상단으로 가져온다. 

이것이 자바스크립트에서 존재하는 hoisting이라는 프로세스이다.

때문에 위와 같은 코드가 에러를 발생시키지 않는 것이다. 

반면에, 아래와 같은 코드는 에러를 발생시킨다.

const awesome = add(1,5);

const add = (a, b) => a + b;	// << 함수의 표현식(function expression)

console.log(awesome)

이유는 함수의 표현식은 hoisting이 되지 않기 때문에, 1번 라인에서 add는 존재하지 않는 것이 되기 때문이다. 

이것이 함수의 선언문과 표현식의 가장 중요한 차이점이다. 

int[] A = {1,3,2,5,4};

배열 A가 있을 때,

1. 오름 차순 정렬 방법. 

Arrays.sort(A);

A의 결과는 {1, 2, 3, 4, 5}가 된다. 

2. 역정렬인 내림 차순 정렬 방법.

Arrays.sort를 호출할 때 두번 째 인자로 Collections.reverseOrder() 메서드를 넘겨주면 되지만, 

이때, 첫번째 인자의 배열을 Primitive(기초) Type으로 넘기려고 하면 Error가 발생한다. 

Integer[] A = {1,3,2,5,4};

Arryas.sort(A, Collections.reverseOrder());

A의 결과는 {5,4,3,2,1} 이 된다. 

----------------------------------------------------

ArrayList 객체의 정렬 

ArrayList의 경우 Collections.sort();로 정렬 가능. 

AWS .pem 파일 없이 EC2 접속 방법

AWS에서 EC2 인스턴스 생성시 보안을 위한 .pem 파일이 다운로드 되는데, 해당 파일을 사욯아지 않고 접속하는 방법. 

저는 ubuntu EC2를 생성 하였으므로, ubuntu OS 기준입니다.

- 새 유저를 생성하고 비밀번호를 부여해 EC2에 접속하는 법

1. 최초 접속시에는 .pem파일을 사용하여 EC2 접속

2. 유저 생성

$ sudo useradd -s /bin/bash -m -d /home/USERNAME -g root USERNAME

3. 유저 비밀번호 설정

$ sudo passwd USERNAME

4. sudoers 파일에서 권한 변경

$ sudo chmod u+w /etc/sudoers

5. sudoers파일에 유저 추가

$ sudo vi /etc/sudoers 로 열어서

USERNAME ALL=(ALL:ALL) ALL 추가 후 저장

6. sshd_config 파일에서 PasswordAuthentication 설정 변경

$ sudo vi /etc/ssh/sshd_config

PasswordAuthentication no 라고 되어있는 것을 yes로 수정 후 저장

7. ssh Restart

$ sudo service ssh restart

완료 후 터미널에서 새로 세션을 생성하여 생성한 유저 아이디와 패스워드로 접속하면 된다.

aws에 가입하면 1년 프리티어를 이용하여 무료로 웹서버 구축이 가능하다.

웹서버인 EC2를 생성해보았다. 

참고 사이트 - 생활코딩

https://opentutorials.org/module/1946/11274

회원가입 > 로그인 후, 메뉴에서 management console로 이동하면 가운데 솔루션 구축 영역에서 EC2를 사용하여 가상 머신 시작을 선택한다. 

우 상단에서 서버가 위치할 국가를 지정할 수 있으며, Ubuntu Server로 선택하였다. 

Default로 프리티어 사용가능한 서버가 자동 선택되어 있으니, 다음.

다음.

다음.

태그 추가 후 Name 키에 웹서버라는 값을 추가 후 다음.

보안 그룹 구성에서 Rule을 추가하여 HTTP유형을 선택 후 검토 및 시작 버튼을 클릭.

시작하기를 누르면 키 페어 생성 팝업이 뜬다.

새 키 페어 생성 후 키페어 이름에 awspwd 라고 적어주고  '키 페어 다운로드' 버튼을 누르면 서버 접속시 사용할 수 있는 키 파일이 자동 다운로드 된다. 인스턴스 시작 버튼을 누른다.

 인스턴스 상태가  running으로 간단하게 생성된 모습을 확인할 수 있다. 

06.Scope

전역변수와 지역번수의 개념만 알면된다. 

// 1.
function a(){
	const z = 'hello';
}
console.log(z); 

///////////////////////////////////////
// 2.
function c(){
	var y = 'hello';
}
console.log(y);

///////////////////////////////////////
// 3.
const x;
function b(){
	x = 'hello';
}
b();
console.log(x);

1. 번의 결과는 에러를 뱉는다. 

z는 a함수 안에서 만들어진 변수이기 때문에 밖에서 사용하려고 하면, z가 뭔지 모른다는 에러를 뱉게된다. 

2. 번의 결과는 정상적으로 hello를 출력한다. 

왜 1번과 동일한 방식으로 사용하는데 y는 출력이 되는 것인가 ? 

자바스크립트에서 나오는 개념인 함수의 호이스팅이 적용되면서 나타나는 현상인데, 

자바스크립트에서 호이스팅은 var 변수 선언문과 함수 선언문에만 적용이 된다. 

따라서 js6부터는 var를 사용하지말고 let과 const를 이용한 변수 선언만을 사용하는것을 장려한다. 

let은 값을 변경하기 위한 함수 선언시 사용하고,

const는 값을 변경하지 않을 함수 선언을 위해 사용하면 된다. 

 3. 번의 경우엔 x가 함수 밖에서 선언되었기 때문에  console.log(x)시 정상적으로 hello가 출력된다. 

이것들이 Scope의 가장 중요한 핵심 개념이다. 

더 큰 곳에서는 작은 영역에서 선언된 변수(지역변수)에 대해 접근이 불가능하지만,

작은 영역에서는 더 큰 영역에서 선언된 변수(전역변수)에 접근이 가능하다.