J's inner world

Call Back 함수란?

함수를 매개변수로 받아서 함수 안에서 함수를 호출하는 것을 말한다. 내부에 있는 함수의 Call(요청)에 대한 Back(응답)을 받아야 상위 함수도 동작할 수 있기에, 이렇게 데이터가 엮여있기 때문에 콜백함수라고 말한다.

그런데 Call Back 함수가 비동기적이라고?

특정한 요청을 보내면, 해당 요청에 대한 응답을 기다리는 동안 다른 나머지 코드들을 실행하는 것을 말한다.

그러니까, 원래 동기적으로 동작하면서 순차적으로 코드를 실행하는 것이 자바스크립트의 원래 모습인데, 콜백 함수를 이용하면 무조건 작업이 끝난 다음에 다음 코드가 실행되는 것이 아니라, 요청을 보내놓고 다른 일을 하다가 호출하는 것이다. 물론 콜백함수는 동기적으로도 불러올 수 있다.

// 동기적 콜백 Synchronous Callback

function printImmediately(print) {
	print();
}
printImmediately(() => console.log('Hello'));





// 비동기적 콜백 Asynchronous Callback

function printWithDelay(print, timeout) {
	setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);

콜백지옥! 들어봤는가?

함수 내부에 콜백함수를 부르고, 또 그 내부에 콜백함수를 부르고, 또 부르고 ... 를 반복하다보면 계속 콜백이 되기 때문에 콜백 지옥이 만들어진다. 따라서 복잡한 코드에서 콜백함수를 많이 호출하는 것을 권유하지 않는다.

0. Single Thread 언어인 Javascript

 먼저 자바스크립트는 Single Threaded 언어이다. 즉, 하나의 프로세스에서는 하나의 쓰레드만이 존재한다는 것이다.

운영체제를 배웠다면, 프로세스와 쓰레드에 관한 개념을 이해하기 쉬운데, 배우지 않았다면 다음 예시를 살펴보자.

멀티 쓰레딩의 의미는 하나의 프로세스가 여러가지의 작업을 할 수 있다는 의미이다. 사람으로 친다면, 한 손으로는 커피를 마시고 다른 손으로는 신문을 보고 다리로는 걷는 일을 동시에 하는 것처럼 하나의 프로세스가 여러 가지의 일을 할 때 멀티 쓰레딩하다고 한다. 그렇다면 이제 싱글 쓰레딩이 뭔지 이해가 될 것이다. 그렇다. 단 하나의 작업만 수행할 수 있는 것을 의미한다.

 그러나 자바스크립트가 Multi Threading 하게 아예 동작할 수 없는 것은 아니다. 실제로 웹 페이지에서 동시에 여러 작업을 할 수 있었던 경험이 있을 것이다. 이 때 이용하게 되는 것이 웹 APIs 이다. 이를 이용하게 되면 자바스크립트도 멀티 쓰레딩한 것처럼 동작이 가능하다.

다음은 MDN 사이트에 명시된 Web APIs 이다.

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

1. 자바스크립트는 기본적으로는 동기적(synchronous)으로 동작한다 !

"동기적으로 동작한다." 의 의미는 "먼저 수행된 작업이 모두 끝나고 나서야 다음 일을 순차적으로 수행하는 것"이고

"비동기적으로 동작한다." 의 의미는 "요청을 다같이 보내고 작업이 끝나지 않아도 다음 동작을 수행하는 것"이다.

이처럼 자바스크립트는 호이스팅(hoisting)을 이용하여 기본적으로 동기적으로 동작하는 데, 문제는 비동기적으로 처리할 수 있는 방법이 존재하기 때문에 자바스크립트에서 비동기 처리 이슈가 있는 것이다.

1.5 호이스팅(hoisting)이란?

자바스크립트는 호이스팅(hoisting)을 이용해서 var 변수나 function 함수를 제일 위로 올려서 선언문들을 차례대로 먼저 수행한다. 이 때 할당은 같이 끌어올려지지 않는다. 즉, 알맹이는 냅두고 겉껍질만 일단 선언해놓는 것이다. 예를 들어, 어떤 모임에 사람들이 모이기 전에 출석체크부터 하는 것과 같은 맥락이라고 보면 된다.

2. 그래서 자바스크립트로 비동기 처리를 어떻게 하는 건데?

크게 세 가지의 방법이 있다.

첫 째, 비동기적 Call Back 함수 이용하기

https://jinn-o.tistory.com/25

둘 째, Promise 사용하기

https://jinn-o.tistory.com/26

셋 째, Async & Await

위 비동기 처리에 관한 세 가지의 방법이 담긴 포스팅은 링크로 달아두었다.

자바스크립트도 typescript 처럼 타입을 부여한 덩어리를 만들 수 있다!

enum class 를 이용한다면 날 것 그대로의 문자열을 사용하지 않고 타입들을 지정할 수 있다.

javascript enum class 사용예시

const State = Object.freeze({
    win: 'win',
    fail: 'fail',
    cancel: 'cancel',
});

const StateMessage = Object.freeze({
    win: 'SUCCESS !!',
    fail: 'fail ... replay ?',
    cancel: 'replay ?',
    error: 'not valid state',
});



// enum class 사용 전 코드

function getStateMessage(state) {
	let message;
	switch (state) {
		case 'win':
			message = 'SUCCESS !!';
			break;
		case 'fail':
			message = 'fail ... replay ?';
			break;
		case 'cancel':
			message = 'replay ?'
			break;
		default:
			throw new Error('not valid state');
	}
    return message;
}



// enum class 사용 후 코드

function getStateMessage(state) {
	let message;
	switch (state) {
		case State.win:
			message = StateMessage.win;
			break;
		case State.fail:
			message = StateMessage.fail;
			break;
		case State.cancel:
			message = StateMessage.cancel;
			break;
		default:
			throw new Error(StateMessage.error);
	}
	return message;
}

자바스크립트 빌더 패턴이란?

클래스를 추상화(abstration)하기 위한 방법이다. 빌더 패턴을 사용하면 코드를 더 가독성이 좋게 만들 수 있으며, 클래스를 직접적으로 노출시키지 않고 객체를 생성할 수 있다.

빌더 패턴 예시

class BookBuilder {
	withName(name) {
    	this.name = name;
        return this;
	}
	withPrice(price) {
    	this.price = price;
        return this;
	}
	withPublisher(publisher) {
    	this.publisher = publisher;
        return this;
	}
	build() {
    	return new Book(
        	this.name,
            this.price,
            this.publisher
        );
	}
}

class Book {
	constructor(name, price, publisher) {
    	this.name = name;
        this.price = price;
        this.publisher;
    }
}

위와 같은 코드를 만들었다면 main.js 에서는 다음과 같이 사용한다.

const book = new BookBuilder()
	.withName('InnerWorld')
	.withPrice(15000)
	.withPublisher('Jinn_O')
	.build();

문제 발생 !

Uncaought TypeError: this.onItemClick is not a function at HTMLElement.onClick

무려 나를 3~4시간동안이나 방황하게 만든 오류였다 ...

어..? 하다보니까 문제가 해결 됐는데!

근데 도대체 이유가 뭐지 !!

답은 javascript <this 바인딩> 문제였다.

먼저, this란?

자바스크립트에서 this는 현재 실행되고 있는 코드를 가리킨다. this 를 직역하면 "이것" 이듯이, 그냥 지금 이순간의 코드를 가리키는 것이다. 자기자신을 손가락으로 가리키고 있는 것이라고 생각하면 편하다.

그래서 왜 실행이 안됐던 건데?

this.(특정 엘리먼트).addEventListener('click', this.(특정 함수));

// 예시 example
this.gameField.addEventListener('click', this.onClick);

위의 코드와 같이 특정 함수를 함수명 그대로 전달할 때, 자바스크립트에서는 클래스 정보는 같이 전달이 되지 않는다.

즉, 위 코드와 같이 함수를 인자로써 어딘가에 전달할 때, 클래스는 무시된 상태로 함수만 전달이 되어진다.

그러니까 껍데기만 전달이 되고 그 안에 알맹이는 전달이 되지 않는 것이다. (!!!)

따라서 이 때 필요한 것이 데이터 바인딩이다 !

바인딩 처리하기 첫번째, 직접 바인딩하라고 알려주기

this.(특정 함수) = this.(특정 함수).bind(this);
this.(특정 엘리먼트).addEventListener('click', this.(특정 함수));

// 예시 example
this.onClick = this.onClick.bind(this);
this.field.addEventListener('click', this.onClick);

바인딩 처리하기 두번째, 에로우 펑션(Arrow function) 이용하기

this.(특정 엘리먼트).addEventListener('click', (event) => this.(특정 함수)(event));

// 예시 example
this.gameField.addEventListener('click', (event) => this.onClick(event));

바인딩 처리하기 세번째, 애초부터 함수를 정의할 때 데이터 바인딩 하기

// 원래 일반적인 함수 정의
onclick(event) {
	// ...
}

// 바인딩 처리한 함수 정의
onclick = event => {
	// ...
};

<1부. 희망의 역학>

프롤로그부터 엄청난 흥미를 끌었던 책이다. "역사상 가장 발전한 시대를 살고 있지만, 세상은 엉망진창으로 돌아간다." 전적으로 동의하는 바이다. 우리는 세계 역사상 가장 안전한 시대를 사는 가장 번영한 인류임에 틀림없다. 저자는 이를 진보의 역설이라고 말한다. 나 또한 삶의 의미에 대해 의문을 품고 방황하기 시작한지 오래되었다. 내가 나를 기준으로 한 1인칭 주인공 시점의 안경을 벗어던져버리고, 제 3자의 시선으로 세상과 나를 바라본다면, 정말이지 나는 그저 우주의 먼지에 불과함에는 틀림없다. 그럼에도 우리는 희망을 갖고 살아간다.

일반적으로 우리는 이성이 감정을 통제해야 한다고 말한다. 나도 그렇게 생각했다. 감정은 날 너무 힘들게 하기 때문이다. 쓸데 없는 것에 시간을 보내게 만들고, 해야할 일을 미루게 한다. 그러나 이 책을 읽고 나서는 생각이 달라졌다. 이성은 감정을 통제할 수 없다. 놀랍게도 우리의 행동을 결정하는 것은 감정이었다. 이성은 감정을 설득할 뿐이다. 그러니까, 우리의 의지는 전적으로 감정에 달린 것이다.

개인의 가치관은 곧 경험의 산물이고, 가치관의 차이는 가치관이 맞는 사람들끼리의 공동체를 만들어냈고, 그 공동체에서 소속감을 느끼며 분쟁을 만들어냈다. 그 분쟁들 중에는 전쟁도 포함이 되며, 이것이 인류가 진보하는 형식이라고 말한다. 나는 이 구절을 읽으면서 상당히 새로웠다. 결국 우리 모두는 가치관을 형성하는 과정에 있는 것이며 이는 자신만의 정체성이 된다. 만약 정체성을 부정당한다면 큰 혼란에 빠질 것이다. 지금까지의 경험들과 판단이 틀렸다는 것이 되기 때문에, 정체성을 바꾼다, 흔히 말하는 "완전히 새로운 내가 되겠어!" 라는 다짐은 상당히 어려운 이유이다. 자신의 정체성은 지금까지 수없이 겪어온 자신의 경험이 탄탄하게 완벽한 근거를 제시하기 때문이다.

그렇게 해서 희망을 얻는다면? (통제력, 가치, 공동체를 모두 얻은 상태) 거기서부터 종교가 시작된다고 한다. 여기서 말하는 종교는 영적 종교(기독교, 불교 등)뿐만이 아니라 이념 종교(민주주의, 공산주의 등)와 대인관계 종교(결혼, 스포츠, 팬덤 등)까지 무신론자더라도 우리 삶에 전반적으로 퍼져있다. 이 관점은 나에게 너무나도 새로웠다. 나 또한 많은 종교를 갖고 있었고, 그 가치관들을 지니고 있었다. 문제는 다음이다. 처음 종교의 신적 가치는 부패되기 마련이기 때문이다. 얻은게 많을 수록 잃을 것도 많아지기 때문에 우리는 희망을 경험함으로 희망을 잃는다는 사실이다. 그것을 유지하기 위해서!
"꿈을 진정으로 파괴할 수 있는 유일한 길은 꿈을 실현하는 것이다."

Q. 그래서 작가는 뭘말하고 싶은걸까?

나는 1부의 마지막장에서 작가가 그래서 무슨 이야기를 하고 싶은 건지 내 방식대로 이해해보려 노력해보았다. CARPE DIEM, 현재에 집중하라는 의미인걸까? 작가는 희망을 버리는 것이 자유롭게 사는 것이라 했다. 희망은 파괴적이며 엉망진창의 원인이자 결과라고 한다. 이 말의 핵심은, 우리가 불행을 안으려고 하지 않는다는 사실을 겨냥한 것 같기도 하다. 삶은 행복으로 가득 차있을 수 없다. 그러나 사람들은 그것을 견디지 못한다. 희망하지 않으면 평가하지 않는다는 말로도 이해해보았다. 어쩌면 우리 모두는 자신의 가치관에 따라서 세상을 이분법적으로 생각하고 있는 것일 수도 있다. 나의 공동체에 소속되는 사람인가, 아닌가 하는 방식으로 말이다. 마지막 장의 마지막 문구는 니체가 한 말이었다. "나는 어떻게 살아야 하는지 모르는 사람들을 사랑해. 그들이야말로 경계를 가로지르는 자들이니까." 이 말의 의미가 무엇일까, 곰곰히 생각해보면서 2부를 읽기 시작했다.

<2부. 희망 너머의 세상>

아, 이 장을 읽으면서 충격의 연속이었음을 고백한다. 그래, 나는 청소년기의 인간이었던 것이다. 어린이는 그저 쾌락만을 쫓는다. 청소년은 흥정을 통한 쾌락을 쫓는다. 그 중심에는 가치 평가와 비교에 의한 목표 달성이 있다. 모든 것을 거래로 보는 것이다. 그러나 성인은 다르다. 우리가 정직하려는 이유는 무엇인가? 그것은 무조건적이기 때문이다. 정직은 거래하지 않는다. 핵심은, 누군가를 수단으로 보지않고 목적으로 본다는 것이다. 그러니까, 희망을 버릴 수 있을 때 우리는 성장한다는 것이다. 이것이 바로 인간성 공식이다.

종종 그런 생각들을 했다. 진정 범죄같은 일들 없이 행복으로만 가득한 세상이란게 존재할까? 그게 가능하기나 한 일인걸까? 여기, 기묘한 일들이 일어난다. 분명 과거에는 실제로 누군가 나를 신체적으로 해쳤을 경우에만 '폭력'이라는 단어를 사용했다. 그러나 이제는 자신을 불편하게 하는 상황에서조차 폭력이라는 단어를 사용한다. 저자는 '파란점 효과'에 대해서 말한다. 세상이 편해질수록, 우리는 불편한 부분을 굳이 찾는다는 것이다. 그러니까 만일 당신이 SNS 메시지 하나하나에 의미부여를 하며 기분이 나쁘다면, 아, 내가 지금 편안하고 행복하구나, 라고 생각하면 된다. 안티프래질한 삶을 살아라. 고통을 받아들이고 그 속에서 성장하라.

진정한 자유란 무엇일까? 우리는 베스킨라빈스에 가서 그 수많은 아이스크림의 맛 중 맘에 드는 것을 고르는 것에서 자유를 느낀다. 혹시 자유롭게 여행다니고, 밤마다 술을 마시며, 피씨방에 가서 게임을 하는 것이 자유로운 삶이라고 생각하는가? 나는 자유에 대해서 잘 몰랐던 것 같다. 저자는 진정한 자유는, 포기와 절제에서 온다고 한다. 우리가 한 가지에 몰입할 수 있을 때, 다양성보다는 한 가지에 가치를 둘 때 자유로운 것이다. 선택권이 많이 주어질수록 불행하다. 언제나 다양성과 새로운 경험을 추구했던 나에게, 얼마나 억압된 삶을 살아왔는가를 깨닫게 해주는 구절이었다.

오늘의 모든 문제가
마술처럼 해결된다 해도
우리는 여전히
내일의 피할 수 없는 문제를
지각할 것이다.

괴롭다면 견뎌야하고
상실감이 크다면 그 또한 감내해야 하며.
거절당할 것 같다면 용기의 미덕을 갖고 도전하고 또 거절의 고통을 견뎌야한다.
만약 오늘도 고통스러운 하루를 보냈다면 참으로 의미있는 하루를 살았다고 할 수 있다.

먼저, CROS 에러가 무엇일까?

CROS 란, Cross-Origin Resource Sharing 정책이며 해당 정책을 위반했을 때 나타나는 에러 상황이다.

다음과 같은 경우를 말한다. (사실 지금 나에게 발생한 에러 상황이다.)

리소스 요청을 제한하는 정책에는 크게 두가지가 존재하는데, 하나는 SOP(Same-Origin Policy) 이고 다른 하나가 CROS 이다. 웹 페이지에서 리소스를 로드할 때, 해당 출처(Origin)이 어디인지 확인하고 요청을 제한하거나 말거나를 정하는 정책인데, SOP 같은 경우에는 이름에서도 알 수 있다시피 "같은 출처"일 때 요청을 수락하는 경우를 말한다. 이 SOP를 전제로 웹페이지가 운영되고 있는 데, 문제는 웹페이지같은 경우에 리소스가 여러 출처에서 가져와 사용하는 일은 매우 흔한 일이며, 자연스러운 현상이라는 것이다. 그렇기 때문에 나온 예외 조항이 CROS 라고 생각하면 편하다.

그래서 해결 방법은?

로컬의 스킴 자체가 file:// 이기 때문에 오류메시지에서도 알 수 있다시피 http 혹은 https 가 아니다. 따라서 이 주소 부분을 바꾸어주면 되는데, http로 돌아가게 하는 명령어가 바로 다음과 같다.

npm i http-server -g

npx http-server

그러면 http 서버가 부여되면서 오류가 해결된다!

참고한 블로그

https://evan-moon.github.io/2020/05/21/about-cors/#access-control-allow-origin-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu

 무한 긍정을 요구하는 R=VD 의 자기계발서들은 대개 인생에 별 도움이 되지 않는다. 이 책은 그런 뻔한 이야기를 하는 자기계발서들과는 다르다. 제목 그대로, 인생에 도움도 되지 않는 거추장한 부속물들을 빼는 데 도움이 될 것이다. 명심하라. 실제로 행복한 사람은 절대 거울 앞에 서서 '나는 행복하다'고 주문을 걸지 않는다.(p53)

 우리는 모두 각오해야 한다. 왜 우리는 저 달콤한 꿀만을 인지하고 그 주변에 있는 왱왱대는 벌들을 보지 못하는가? 사람들은 결과만을 생각하고 그 과정에 집중하지 않는다. 오히려 반대다. 우리가 집중해야 하는 것은 과정이다. 그리고 우리의 인생은 그야말로 문제의 연속임을 깨달아야 한다. 모든 문제가 해결! 되는 순간따위는 존재하지 않는다.

 말은 이렇게 해도, 솔직히 너무나도 두려운 게 사실이다. '내가 이렇게 행동하면 싫어할거야.' 라는 생각은 나를 행동하지 못하게 만든다. 그리고, 아무 일도 일어나지 않게 만든다. 할까 말까 고민될 때는 하고 후회하라는 말이 있다. 어쩌면 저자는 이 부분에서도 "책임" 에 대해서 말하고 싶었던 걸지도 모른다. 저자는 불편한 감정이 들 때, 우리는 그 감정을 마비시키고 다시 '좋은 감정' 으로 돌아가기 위해 잘못된 방법일지라도 몰두한다고 한다. 그러나 정작 우리가 배워야 할 것은 자신이 선택한 고통을 견디는 법이다.(p179) 나는 지금껏 고통을 견디는 법을 몰랐던 것 같다. 아니, 고통을 견딜 생각을 하지 않았다. 내 선택에 따른 책임을 지려하지 않았고 고통을 회피했다. 그 대가는, 아무 일도 일어나지 않는다는 것이다. 우리는 견뎌야 한다. 사람들은 애인이나 배우자와 함께하는 삶을 꿈꾼다. 하지만 거절을 견뎌낼 때 느끼는 괴로움, 발산하지 못하고 쌓여가는 성적 긴장감, 얼빠진 눈으로 종일 바라봐도 도무지 울릴 생각을 안 하는 전화기를 받아들이지 않는다면, 멋진 누군가의 마음을 사로잡을 수는 없다. 이런 것들은 사랑이라는 게임의 일부다. 게임을 하지 않으면, 이길 수도 없다.(p40)

 "선택과 집중" 이라는 말을 들어봤는가? 현대 시대를 살고 있는 우리는 무수히 많은 선택의 기로에 서있다. 또한 나같은 성격을 지녔다면, 모든 선택들을 다 경험해보고 싶고, 폭넓은 이해를 추구할 것이다. 새로운 사람들을 만나는 것은 언제나 즐겁고 새로운 경험을 하는 것은 언제나 짜릿하다. 그러나 나는 이 책을 읽으면서 포기와 거절, 그로써 발생하는 몰입의 미덕을 알게 되었다. 나는 오늘부로 선택을 포기하겠다. 그럼으로 중요한 일들에 몰입하겠다.

 이 책은, 삶을 살아가면서 거추장한 짐들에 버거워졌을 때 혹은 그것들이 알아보지 못하는 글씨체로 적혀진 메모지처럼, 버리지못하고 있는 쓰레기인줄 모른채 삶 속에서 짊어지고 있다는 사실을 깨닫고 싶을 때, 버리는 기술에 대해서 말한다. 이 책을 읽고 나면, 삶이 한결 가벼워지고 무의미한 가치에 매달리지 않게 되며, 한 가지에 몰입할 수 있게 된다.

 나는 누구보다 자신이 자신을 제일 잘 안다고 생각했다. 그래서 내가 생각하기에 내 자신이 이해되지 않는 행동을 했거나 잘못된 선택을 했을 때, 자기자신을 질책하곤 했다. 그런데 더 큰 문제는 다음에 있다. 나는 비슷한 문제 상황을 계속해서 반복한다는 것이었다. 예를 들면, 특정 길목을 지나는데 돌부리에 걸려 넘어졌다고 해보자. '아, 저 돌부리를 피해갔어야 했는데 정말 바보같아. 왜 그걸 제대로 못봤지? 넘어지기나하고. 나는 왜 이렇게 덜렁대는거야.' 그렇게 자책을 하고 지나가면, 또 다시 그 길목을 지나가야 하는 상황이 생겼을 때 또 돌부리에 걸려 넘어지게 된다. 어찌보면 당연한 현상이다. 그러나 나는 그걸 몰랐다. 실수에 대한 자책을 할 것이 아니라 그 길목에서 돌부리를 치워야 한다는 것을.

 작가는 본인에게 특정 행동에 대해서 왜? 라는 질문을 계속 해보라고 제시했다. 특정 행동에 대해서 왜? 라는 질문을 반복하다보면 왜 그런 행동을 했는지 이해하게 된다. 이 점이 너무 신기했다. 본인이 하는 행동에 대해서는 반드시 이유가 있다. 또, 대개 예민하거나 꺼려하는 부분에 대해서는 본인만의 콤플렉스가 자리하고 있을 것이다.

 이 책은 자신의 방어기제에 대해서, 왜 내가 그렇게 행동하는지에 대해서, 내 마음을 나도 잘 모르겠을 때, 또 내가 어떤 잠재력을 가진 사람인지, 나를 더 알아가고 싶다면 반드시 읽기를 추천하는 책이다. 사실 우리 모두에게 다 필요하다고 말하고 싶다. 

어떻게 보면 keydown 은 keypress 의 상위버전이다.

keydown 은 문자키에 대해서만 반응한다. 즉,  Alt, Shift, Ctrl, Meta

같은 입력에는 반응하지 않는다.그러나 keypress 의 경우에는 모든 입력에 대해서 반응한다.

https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event