Changwoo Blog

[태그:] javascript

  • Console.log의 대안들

    https://devdojo.com/posandu/consolelog-alternatives-you-didnt-know

    몰랐던 것이 많군.

  • 속깊은 JavaScript

    도서 정보 링크

    이 책은 작년쯤 사두고 방치해 두었다. 여유있을 때 조금씩 책을 읽고 싶은 마음이 들었는데, 방치해둔 책을 끝까지는 읽어보고픈 맘이 들어 읽게 되었다. 읽고 나니, 읽었던 기록을 남기고 싶었다. 간단히 적어 본다. 독서가 습관이 아닌 나, 글쓰기에 서투른 나다. 블로그에 글 적어 봐야 아무도 관심가지지 않을 거라는 확신 하에 적어 본다.

    2020년 12월 31일. 1년의 마지막이자 또다른 1년의 시작 전이 날이다. 대개 이런 날에는 안하던 짓을 하나씩 하게 된다. 그것 중 하나가 이건가보다. 이 책은 아침저녁으로 책상에 앉을 때 계속 눈길만은 주던 책이고 언젠가 읽어야지 생각만 하던 책이다. 요즘 괴로울 정도로 권태롭다. 일상에 변화를 주고 싶다. 자극을 주고 싶다. 평소와는 다른 것들을 해야한다고 생각한다. 독서가 그런 자극이 될까 모르겠다.

    책의 분량이 있어 하루만에 다 읽지는 못하고 1에서 4장까지 읽어내렸다. 이전에 책을 산 그날 대략 2장인가 3장까지 읽고 방치해뒀던 기억이 난다.

    1장은 초반이라 대략적인 설명이라 큰 감흥은 없고, 2장과 3장도 읽었던 내용이고 어지간히 숙지하고 있는 내용이라 큰 어려움은 없었다.

    4장이 좀 문제인데, 그동안 자바스크립트의 상속 개념, 프로토타입 개념이 조금 난해해서 대강 넘어갔었는데, 이 챕터에서 아주 자세하게 설명을 한다. ECMA 표준까지 인용해가며 설명해주는 것은 좋기는 하지만 읽다 보니 내용이 지나치게 깊게 들어가 이해하기 쉽지 않은 점은 좀 아쉽기도 하다. 내 독해력이 문제인가…? 몇 번 반복해야 할 문제일지도.

    아무튼 지금 생각은 이렇다. 4장의 개념은 원리적으로는 중요할지 모르지만, 결과적으로 그냥 새로운 문법인 class와 extend 키워드로 결국 끝난다는 것 아닌가? 지나치게 설명이 지루했다고 생각한다. 기술은 계속 발전해 ECMA에서 제안한 새로운 자바스크립트 문법은 점점 상용화 되어 가고 있고, 구 브라우저 들은 어지간하면 지원하지 않는 케이스도 늘어가고 있으며, 트랜스파일러나 웹팩 같은 것도 있는 마당에…

    암튼 5장 이후의 내용도 꽤 흥미롭다. 디자인 패턴, 성능 문제, 코딩 스탠다드, 여러 프레임워크.. 한 번쯤 보고 넘어갈 주제라고 생각한다. 만약 계속 읽게 된다면 이 포스트에 업데이트하자.

    새해 첫날 셀독에 와서 5장 ‘디자인 패턴 실용’을 읽었다. 패턴을 많이 공부 안 한 나는 이런 것 대환영이다. 이미 알던 것도 몇 개 있고, 알게모르게 개발에서 이러면 좋겠구나라고 막연히 생각한 것들도 있고 새로운 것들도 있다. 구체적인 이름, 구조, 기대 효과를 볼 수 있어 뜻깊다. 되게 뇌를 자극받는 느낌이다.

    5장에서 제시하는 자바스크립트 대표 디자인 패턴은 다음과 같다.

    • Module
    • Event delegation
    • Proxy
    • Decorator
    • Init-time branching
    • Self-definine function
    • Momoization
    • Self-invoking constructor
    • Callback
    • Currying

    지금 보니 Promise 가 없긴 하네. 딱히 여기서 모든 패턴을 바이블처럼 살펴보자는 것도 아니니 넘어가자. 이 부분 중요한 내용인 것 같으니 챕터 말미의 정리 부분을 인용하며 참고를 위한 웹페이지 링크를 달도록 하자.

    모듈은 간단히 말해 객체를 모듈로 사용해 여러 기능을 하나로 묶은 것. 쉽게 말해 $.ajax() 같은 함수가 $ 안에 있는 것.

    이벤트 전파는 캡쳐, 타겟, 버블 3단계로 구분하여 이벤트가 된다는 것. (참고: 이벤트 전파)

    프록시는 캐시를 활용할 때나 여러 요청을 하나로 합쳐 서버 요청을 최적화하거나 외부 인터페이스를 간편하게 할 수 있다. (참고: 프록시 패턴)

    데코레이터는 반복되는 기능의 조합을 조금씩 변경해 사용하는 경우 유용하다. (참고: 데코레이터 패턴)

    In-time branching 패턴은 브라우저 호환성을 지원하기 위해 많이 사용한다. 브라우저마다 다른 함수를 지원여부에 따라 브랜칭하여 polyfill 하기도 할 때 자주 본다.

    Self-defining function 패턴은 초기화 작업이 매번 필요한 함수나 클로저에 초개화 내용을 저정해야 하는 함수에 활용하면 좋다.

    메모이제이션 패턴은 캐시와 같은 기능을 수행하여 성능과 서버 요청 최적화에 유용하다. (참고: 메모이제이션 패턴)

    콜백 패턴은 늘 보는 바로 그것.

    커링 패턴은 하나의 공용 함수에 세부적인 기능을 함수로 나누고 싶을 때 유용하다. (참고: 커링 패턴)

    6장 브라우저 환경에서 자바스크립트는 setTimer를 예시를 들어 자바스크립트가 단일 스레드에서 운영됨을 알린다. 이 부분 어느 정도 이해하고는 있는데, 필자 특유의 지나치게 디테일한 설명이 좀 어렵게 느껴지기도 한다. 뭐 나중에 시간이 있다면 더 살펴볼까.

    DOM의 repaint와 reflow를 설명하고 더 나은 성능을 위해 reflow를 줄일 수 있는 방안을 제시하는 것은 흥미로웠다. 솔직히 집중력이 떨어진 시점에 독서했고, 지나치게 장황한 코드에 의존한 흐름이라 눈으로만 읽기 힘들어 설렁설렁 넘어간 부분이긴 하다. 뭐 언젠간 체감할 날이 오겠지.

    웹 워커라는 것을 알게 되어 흥미로웠다. UI 이벤트 핸들링과 로직 핸들링을 아예 다른 스레드로 분리하여 처리하는 것은 처음 봤다. 내 생각에는 워드프레스나 유튜브 API 어딘가에서 이걸 쓰지 않을까? 로그 메시지나 언더스코어 테마 코드 어디서 postMessage라는 걸 봤는데 관련 있는 것 같다.

    웹 기술은 계속 발전하고 따라가는 것도 쉽지 않다. 그리고 좋은 성능을 위한 노력은 정말 끝도 없이 깊게 갈 수 있다는 것을 느낀다. 물론 너무 거기에 경도되어서는 안되지만.

    1월 2일 07장 자바스크립트 성능과 사용자 경험 개선, 08잘 08장 자바스크립트 코딩과 개발 환경, 09장 자바스크립트 표준을 대략 봤다. 7장은 자바스크립트 범위를 넘는 최적화 방법도 있고 너무 겉핥기. 8장도 별 의미 없다. 9장은 ES2015 새로운 문법을 좀 자세히 설명해줘 몇 가지는 볼만했다. 하지만 이미 점점 쓰고 있는 것들이 많아 지금의 나한테는 좀 반복된 주제 같다. 다만 몇몇 문법은 잘 모르던 것들이라 다시 한 번 뒤적일 가치는 있다.

    10장은 진짜 몇 페이지 없고, 이 책이 좀 나온지 오래되었구나 라는 생각을 들게 만든다. jQuery, Underscore 같은 오래된 라이브러리 (물론 여전히 좋은 라이브러리라고 생각하지만)도 나오고… 이것은 그냥 읽었다고 치자. 이렇게 이 책을 한번 완독한 셈 치자.

    전반적으로 IT 관련 책은 뜨거울 때 빨리 읽고 소비하고 버려야 하는 것 같다. 그 중에서도 기술의 변화가 가장 빠른 웹 프론트엔드쪽의 책을 연단위로 묵혀 봤다. 당연히 그동안 변한게 많겠지. 그래서 오래된 설명도 좀 있고 지나치게 깊게 들어가는 설명도 있었지만, 그래도 나름 자바스크립트를 깊게 알고픈 사람에게 초반 몇 챕터는 읽어 보면 좋겠다 싶을 정도로 나름 잘 정리된 책이라고 생각한다.

  • wp_localize_script()로 숫자를 전달할 때

    아래 예제 코드와 결과를 보면 명확하다.

    wp_localize_script(
	'foo',
	'bar',
	[
		'initial' => [
			'value' => 0,
			'true'  => true,
			'false' => false,
			'null'  => null,
		],
		'value'   => 11,
		'true'    => true,
		'false'   => false,
		'null'    => null,
	]
);

// console.log( 'bar', bar ); in js.
    console.log( ‘bar’, bar );

    wp_localize_script() 로 전달한 연관 배열의 최상위 키의 값들은 모두 문자열로 변경된다. 때때로 PHP 측에서 자바스크립트 쪽으로 값을 전달할 때 타입이 달라 의도치 않은 버그를 낼 때가 있다.

    이것은 wp_localizae_script() 함수의 알짜인 WP_Scripts::localize() 함수 구현에서 이유를 찾을 수 있다.

    ...
foreach ( (array) $l10n as $key => $value ) {
	if ( ! is_scalar( $value ) ) {
		continue;
	}

	$l10n[ $key ] = html_entity_decode( (string) $value, ENT_QUOTES, 'UTF-8' );
}
...

    함수 내부에서 배열 내부의 키/값을 순회하면서 값을 문자열로 캐스팅한다. 단, 스칼라가 아닌 경우 무시하고 넘어간다.

    전달된 값을 숫자나 불리언으로 다시 변경하려면 스크립트 초기에 parseInt()나 parseFloat()을 호출하면 되긴 한다. 불리언은 parseInt() 후 ! 연산자를 두 번 사용하면 편리하다.

    하지만 일일이 파라미터마다 일일이 이런 짓을 하는 것은 매우 번거롭다. 가급적 문자열로 변경되는 것을 피해야 할 값들은 최상위 키/값에 값을 두지 말고, 위 예제처럼 배열을 중첩하여 중첩된 배열 안쪽에 두도록 하자.

    출처: wp_localize_script unexpectedly converts numbers to strings

  • WP AJAX 사용할 때 작은 팁들

    요즘은 웹 페이지들이 엄청 인터랙티브하다. 그만큼 비동기 호출, AJAX의 사용이 많을 수 밖에 없는 환경이다. 한편 워드프레스에서는 admin-ajax.php라는 곳에서 거의 모든 AJAX 요청을 처리하게 된다. 이 포스트에서는 워드프레스 플러그인에서 AJAX 요청을 작성할 때 참고하면 좋을 팁을 몇 가지 적어 보도록 한다.

    (더 보기…)

  • REST API와 커스텀 포스트 연동 시 주의할 사항.

    REST API와 커스텀 포스트 연동 시 주의할 사항.

    REST API v2를 사용하면 프론트 구성을 대폭 간결하게 만들 수 있다. 그리고 워드프레스 자체에서 backbone.js, underscore.js를 내장하고 있고, 이를 곳곳에 활용하고 있으며, 심지어 backbone.js의 model과 collection 개념을 사용하여 REST API를 구성하고 있다. 아직 REST API의 여러 부분을 깊숙하게 파악하지는 못했지만, 얼추 프로그램을 작성해 보면 한결 가볍게 페이지 구성이 가능해짐을 직접 느낄 수 있었다.

    이 포스트는 커스텀 포스트와 REST API를 사용하면서 삽질한 결과를 간단히 남겨 놓기 위해 작성한다.

    (더 보기…)