Peep

파비콘(favicon.ico) 만들기

파비콘이란?

' 파비콘 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. '

-위키백과

파비콘에 사용할 아이콘 선정

저는 iconflat 사이트에서 무료라이센스 아이콘을 사용하고는 합니다. (라이선스 확인 및 출처 필수)

www.flaticon.com/

검색어에 검색을하고 Filters에서 라이센스 Free를 선택해줍니다.

원하는 아이콘을 검색하고 아이콘에 마우스를 올리면 다운로드 할 수 있는 버튼이 뜹니다.

다운로드 버튼을 클릭하여 아이콘 이미지를 다운로드 받습니다.

ICO 파일로 변환

convert 사이트를 이용해 해당 이미지를 ico 확장자로 변환하게씁니다.

변환사이트는 본인이 구글을 검색해도 되고 아래 사이트를 이용해도됩니다.

https://icoconvert.com

Step 1. 이미지업로드

파일 추가버튼 클릭 후 파일을 선택해주고, Upload 버튼을 클릭합니다.

Upload 버튼을 누른 후 아래 Step2로 스크롤해 내려갑니다.

Step 2. 이미지 자르기

내가 올린 파일 이미지가 뜨고 이미지에 마우스 드래그 시 자를 수 있는 도구가 나옵니다.

전 그대로 사용하기 위해 Step 4로 넘어갔습니다.

Step3는 액자나 기울기 등을 적용하는 부분입니다.

파비콘은 심플한게 좋기때문에 건너뛰었습니다.

Step 4. 사이즈 및 포맷설정

Step 5. 다운로드

Step4에서 크기를 설정해줍니다.

디바이스나 브라우저마다 다른 사이즈의 파비콘을 사용할 수 있습니다.

물론 최적화 시켜서 다 맞추면 좋겠지만 일반적으로는 16x16이나 32x32가 많이 사용됩니다.

저는 32x32로 선택했습니다. 

파비콘은 사이트 탭에서 사이트 이름의 옆, 즐겨찾기 시 사이트 이름 옆, 바탕화면에 바로가기 등록 시에도 사용됩니다.

Step5에서 확장자를 선택 후 Convert ICO를 클릭하면 하단에 파란색 글씨로 Download your icon(s)가 나옵니다.

Download your icon(s) 글씨를 클릭하여 파일을 다운로드합니다.

+ 만약 다운로드가 안된다면 +

Download your icon(s)위에 마우스를 올린 후 우클릭을 하여 '검사'를 눌러줍니다.

그렇게 하면 옆에 막 코드가 적혀있는 창(개발자도구)이 뜨는데 <a href="링크" 부분의 링크를 클릭해 줍니다.

그러면 다운로드가 됩니다.

저는 16x16 / 32x32 / 64x64 / 256x256을 선택함으로 인해 multi-size 파일이되었는데,

하나만 선택해도 됩니다.

multi-size 옵션

만약 여러 사이즈가 필요하다면 Step4에서 한번에 여러 사이즈르 선택하여 다운로드 받으면 됩니다.

ico파일은 하나의 파일이지만 그 안에 다양한 크기의 이미지를 포함시킬 수 있는 기능을 지원합니다.

아래 참고 이미지처럼 사이즈를 여러개 선택한 후 다운로드 받아보시면 하나의 파일입니다.

설정 완료

파비콘 설정하면 내 사이트 탭 옆에 뜨는 것을 확인 할 수 있습니다.

사이트 바로가기 설정 시에도 아이콘 확인이 가능합니다.

스토리지 중에 무엇을 써볼까하다가 AWS S3를 이용하기로 했습니다.

그래서 조사하고 기억하기 위해 글을 작성합니다!

AWS S3가 무엇인지 알아보겠습니다.

AWS(Amazon Web Services) S3(Simple Storage Serviced)

아마존에서 제공하는 온라인 스토리지 웹 서비스입니다.

높은 내구성, 가용성, 저렴한 가격이 장점입니다.

이분의 블로그 글을 참고하시면 자세합니다.

저는 이 블로그 글을 읽고 제가 기억해야하는 부분을 요약한 것입니다.

 https://acstory.tistory.com/33

내구성과 가용성이 높다라는 것은 외부의 자극에도 변형되지 않고 유지되며 시스템이 장애없이 정상적으로 운영되는 성질이 높다는 것입니다.

일반 스토리지와 객체스토리지(S3)의 차이

일반 스토리지

1) 업로더가 업로드하면 스토리지에 저장됨

2) 저장된 스토리지에 있는 파일을 사용자가 다운로드 요청

3)

정상: 파일을 정상적으로 응답

손상이 있을 경우: 다운로드 실패 혹은 손상된 파일을 응답

객체스토리지 (S3)

1) 업로더가 업로드하면 스토리지가 여러 위치에 복제본을 생성함

2) 저장된 스토리지에 있는 파일을 사용자가 다운로드 요청

3)

정상: 파일을 정상적으로 응답 (이때 복제본도 응답 가능)

손상이 있을 경우: 손상본을 제외 시키고 정상적인 복제본을 통해 응답 

단점은 스토리지가 객체를 내부 복제하는데에 시간이 걸린다.

물론 매우 짧다.

따라서 복제 도중 다양한 요청에 대해 일관적인 응답이 아닐 경우도 존재합니다.

덮여쓰기 중 이전 버전을 응답한다거나 삭제했음에도 응답이 되는 경우를 예로 들 수 있습니다.

S3 요금

최초요금은 없으며 사용한 만큼 비용을 지불해야합니다.

스토리지 클래스를 결정할 때엔 네가지 비용 요소를 고려해야한다고 하네요.

- 스토리지 요금

- 요청 및 데이터 검색 요금

- 데이터 전송 및 전송 가속화 요금 

- 데이터 관리 기능 요금

https://aws.amazon.com/ko/s3/pricing/

리전을 눌러보면 GB당 얼마인지 나옵니다.

리전마다 다르니 확인하시고 사용하세요.

https://acstory.tistory.com/33

aws.amazon.com/ko/s3/

스코프에 대한 지식이 없다면 먼저 간단히 읽고 오세요.

실행컨텍스트에 대해서 알고 진행해야하기에 실행 컨텍스트 글을 꼭 참고해주세요.

클로저(Closure)

여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다.

클로저는 객체지향과 함수형 프로그래밍에서 매우 중요한 개념입니다.

특성<- 이라는 것 보이시죠?

자바스크립트 고유의 개념이 아니라서 많은 사람들이 헷갈려하고(나 또한..) 정의를 요약하기가 힘듭니다.

"자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수"

- 더글라스 크록포드, 자바스크립트 핵심가이드

"함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는것"

- 에단 브라운, 러닝 자바스크립트

" 컴퓨터 언어에서 클로저는 일급 객체 함수의 개념을 이용하여 스코프에 묶인 변수를 바인딩하기 위한 일종의 기술이다."  

- 위키백과

위의 글들만 봤을 때 혼란스러웠습니다...

추가적으로 자바스크립트 코어책을 보고 난 후 관련 지식들을 수정해서 작성해보려고 합니다.

개념

클로저는 어떤 함수 A가 선언된 당시 이 A 함수가 만들어질때 저장된 환경들과 또 다른 함수 B의 환경 사이에서의 상호관계에 따른 현상입니다.

=> 함수가 선언될 당시의 lexical environment(함수 선언당시 실행 컨텍스트 내의 식별자 정보, 외부환경 정보)의 상호관계에 따른 현상입니다.

이해가 어려우니 예시를 보고 다시 이야기해보겠습니다.

예시1

외부 함수의 변수를 참조하는 내부함수

(여기서 클로저는 식별자 name을 참조하기 위한 내부함수 inner에서 발생하는 현상입니다.)

var outer = function(){
	var name = 'hans';
    
    var inner = function(){
    	console.log(name);
    };
    
    inner();
};

outer();

1) inner 함수 내부에는 식별자 name이 없습니다.

=> 이것은 즉 inner 함수의 lexical environment의 environmentRecord에 name 식별자가 없다는 것을 의미합니다.

=> environmentRecord는 현재 컨텍스트와 관련된 코드의 식별자 정보(매개변수의 이름, 함수 선언, 변수명등)들이 저장해둡니다.

2) inner 함수는 lexical environment의 outer-environmentReference에서 상위 함수의 컨텍스트를 찾는데, 이때 상위 컨텍스트는 outer입니다.

=> outer-envirnmentReference는 현재 호출된 함수가 선언될 당시(할성화될 당시)의 LexicalEnvironment를 참조한 것입니다. 

=> 즉, 선언 당시 outer의 lexical environment를 참조합니다.

3) inner의 outer-environment로 인해 outer 함수의 lexical environment에서 name 식별자를 찾을 수 있습니다.

=> 스코프 체이닝!

4) outer 함수가 끝나게되면 outer함수의 실행 컨텍스트가 종료되며 lexical environment에 저장된 식별자(name, inner)에 대한 참조를 지웁니다.

=> 이때 만약 참조하는 변수가 있다면 메모리에 남아있고, 참조되지 않는다면 가비지 컬렉터의 수집대상이 됩니다.

예시2

외부 함수의 변수를 참조하는 내부 함수

var outer = function(){
	var a = 1;
    
    var inner = function(){
    	return ++a;
    };
    
    return inner;
};

var outerFunc = outer();
console.log(outerFunc()); // 2
console.log(outerFunc()); // 3

1) inner 함수를 반환하고 있습니다.

2) outerFunc가 선언될 때 outer의 실행 컨텍스트가 종료됩니다.

=> 이때 우리는 식별자 a와 inner가 가비지컬렉팅될 것이라 생각합니다.만 아닙니다.

3) outerFunc는 outer의 실행 결과인 inner 함수를 참조합니다.

4) 이후 outerFunc가 호출될 때 앞에서 반환한 inner 함수를 실행합니다.

5) inner가 실행될 때 inner의 lexical environment의 environmentRecord에서 식별자 a를 찾습니다.

=> 없기때문에 lexical environment의 outer-environment에서 상위 함수의 컨텍스트를 찾습니다.

=> inner 함수가 선언된 위치의 lexical environment가 참조복사되기 때문에 outer 함수의 lexical environment를 찾을 수 있습니다. 

6) outer의 lexical environment 의 environmentRecord에서 식별자 a를 찾습니다.

여기서 

"반환된 inner 함수가 실행될때 outer함수 실행 컨텍스트는 종료되었는데, 어떻게 outer함수의 lexical environment에 접근할 수 있는가?"

라는 의문이 들었지만, 코어 자바스크립트 책에서 친절히 설명해줍니다..

!!!

이것은 가비지 컬렉터 동작 방식때문이라고 합니다.

가비지 컬렉터는 값을 참조하는 변수가 하나라도 있다면 수집 대상에 포함하지 않습니다.

즉, outer의 컨텍스트가 종료된 뒤에 반환된 inner 함수에서 식별자 a를 참조하고 있고...

outerFunc로 선언되어있기 때문에 언제라도outerFunc가 실행될 수 있음을 인지합니다..

그렇기 때문에 반환된 inner 함수가 활성화 되었을때, 위의 예시대로(lexical environment^^) 동작해야하기 때문에 가비지 컬렉터의 대상이 되지 않으며.... 이것으로 인해 동작이 가능한 것입니다. 

그리고 위의 클로저의 예시로 return을 설명했지만

실제로는 외부로 전달이 return만을 의미하지 않으며... return 없이도 클로저가 발생하는 다양한 경우들이 있습니다. 

뭐... 콜백함수를 고차함수로 바꿔 클로저를 활용하는 방식이나 클로저를 통한 변수 보호, 커링함수 등....

=> 커링함수는 여러개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나누어 순차적으로 호출될 수 있게 체인형태로 구성된 함수를 말합니다. 각 호출될 때마다 인자들을 메모리에 저장하고 마지막 호출 시에 가비지컬렉팅 대상이 되는 방식으로 사용하는 방식입니다.

그래서..?

간단히 말하면 클로저는 어떠한 현상에 의해 메모리에 남겨진 변수들의 집합(?)입니다.

=> 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상, 외부 함수의 LexicalEnvironment가 가비지 컬렉팅되지 않는 현상을 말합니다.

책에서는 더 다양한 예시와 표현들이 있지만,

가장 근접한 표현의 글이라고 작성되어있던것 중 하나의 글을 가져와보았습니다.

"함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수"

- 존레식, 자바스크립트 닌자 비급

클로저를 이해하고나면 드는 생각은,

메모리를 너무 낭비하는 것 아닌것인가? 라고 생각합니다. 또한 실제로 메모리 누수의 위험을 이유로 클로저를 지양하라고 합니다.

하지만 메모리 소모는 클로저의 본질적 특성입니다.

그리고 이 특성을 잘 활용하는 것이 중요합니다.

메모리 관리 중 하나의 예를 들면 null, undefined를 사용하는 것입니다. 

가비지 컬렉터를 이해하여 사용하지 않는 메모리에 대해 회수를 해주는것이 중요합니다.

function init(){
	name = null;
	count = null;
    date = null;
}

(null과 undefined에 대해서도 글한번 읽어보세요.)

과거에 썼던 글에 오류를 발견하고 수정했는데, 새로쓰게되었습니다..

과거의 글아 안녕.....☆

그때 생각했던 개념과는 많이 달라졌군요...

성장한 것이겠죠.. ? 공부는 이래서 쭉 해야하는 것 같습니다.

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

코어자바스크립트 : 핵심개념과 동작원리로 이해하는 자바스크립트 프로그래밍, 정재남

자바스크립트에서의 this는 어디서든 사용할 수 있으며 다른 언어와는 조금 다르게 동작합니다.

실행 컨텍스트가 생성될때 this의 바인딩이 일어나며 우선순위가있습니다.

실행 컨텍스트는 함수를 호출할때 생성되므로 또 다른 의미로는 함수를 호출할때 this가 결정된다고 할 수도 있습니다.

또한 함수의 호출마다 this가 달라질 수도 있다는 의미이기도합니다.

This

• 전역공간에서의 this는 전역객체 (브라우저 - window, 노드 - global)를 참조

• 메서드일 경우 호출한 객체를 this로 참조

• 함수일 경우 this는 전역객체

• 콜백함수는 제어권을 넘겨받은 함수가 정의한 this 참조, 정의가 없으면 전역객체

• 생성자 함수는 생성될 인스턴스를 참조

• call, apply, bind 같은 명시적 바인딩일 경우 인자로 전달된 객체

• 그외 엄격모드는 undefined로 초기화 됨 (엄격, 비엄격에 차이가 있다)

전역

전역공간에서의 this는 전역객체를 가리킵니다.

전역 객체는 런타임환경에 따라 다른 이름과 정보를 가지고 있는데, 브라우저는 window, 노드환경에서는 global입니다.

console.log(this === window); // true

함수

호출한 방법에 의해 this가 결정됩니다. 

함수로서 호출하는 방법과 메서드로서 호출하는 경우에따라 this가 다른 값이 될 수 있습니다.

예제1)

var obj = {
	funcA : function(){
    	console.log(this);
    },
    option : {
    	funcB : function(){
    		console.log(this);
    	}
    }
};

console.log(obj.funcA()); // obj가 this임
console.log(obj.option.funcB()); // obj.option가 this임

점(.) 표기법으로 연결된 경우 마지막 점 바로 앞에 연결된 객체가 this가 됩니다.

예제2) 같은 코드라도 엄격모드와 비엄격모드에서 달라질 수 있습니다.

// 엄격모드 
function isThis(){ 
	"use strict"; 
    return this; 
};

console.log(isThis()); // undefined

// 비엄격모드 
function isThis() { 
	return this; 
};

console.log(isThis()); // Window { 0: Window, 1: ..... }

명시적방법(call, apply, bind)

상황별 this가 바인딩되는 규칙을 깨고 this에 별도의 대상을 바인딩하는 방법이 있습니다.

다만 명시적으로 별도의 this를 바인딩 할 경우 this를 예측하기 어렵다는 단점이 있습니다.

call

메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령입니다.

첫번째 인자로 this를 바인딩, 이후 인자들은 호출할 함수의 매개변수로 전달합니다.

var getName = function(name){
	console.log(this, name);
};

getName('hong'); // Window { ... } 'hong'

getName.call({ a : 1 }, 'hong'); // {a: 1} 'hong'

apply

call 메서드와 기능적으로 완전히 동일합니다.

apply 메서드는 두번째 인자를 배열로 받아서 매개변수로 지정한다는 점만 call과 다릅니다.

var getName = function(name){
	console.log(this, name);
};

getName('hong'); // Window { ... } 'hong'

getName.apply({ a : 1 }, ['hong']); // {a: 1} 'hong'

* 문자열 'hong'을 배열로 호출하지 않으면 타입에러가 발생합니다.

bind

ES5에서 추가된 기능이며 call 메서드와 비슷하지만 즉시 호출하지 않습니다.

넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환합니다.

var getName = function(name){
	console.log(this, name);
};

getName('hong'); // Window { ... } 'hong'

var bindGetName = getName.bind({a: 1});
bindGetName('hong'); // {a: 1} 'hong'

* bind 메서드를 적용해서 새로 만든 함수는 name 프로퍼티에 동사 bind의 수동태인 bound라는 접두어가 붙으며 call과 apply보다 추적이 수월합니다.

ES6의 arrow function

함수 내부에서 this가 전역객체를 바라보는 문제를 보완하고자 this를 바인딩하지 않는 화살표 함수를 도입했습니다.

화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠져있어 this에 접근하려고하면 스코프체인상 가장 가까운 this에 접근합니다.

즉, 상위 스코프의 this를 그대로 활용할 수 있습니다.

const car = { 
	name : avante, 
	getPrice: function() {
		return this.name;
	},
}; 

console.log(car.name()); // avante

위와같은 내용들로 인해 this가 이것이다라고 정의할 수는 없습니다.

출처

• https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/this.md

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

• 코어 자바스크립트:핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍,(저자 정재남)