노루의 씨분투 세상

[번역] 자바스크립트는 어떻게 동작할까? - JS엔진, 런타임, 콜스택에 대한 개요 본 포스팅은 How JavaScript works: an overview of the engine, the runtime, and the call stack 의 글을 번역한 글입니다. How JavaScript 시리즈는 9편정도가 있으며, 지금도 나오고 있습니다. 최대한 모든 시리즈를 번역할 예정입니다. 많은 의역이 포함되어 있을 수 있습니다. :) 자바스크립트가 점점 더 인기있어지면서, 많은 팀들은 프론트엔드, 백엔드, 하이브리드, 임베디드와 그 이상의 많은 영역에서 자바스크립트를 사용하고 있습니다. 이 포스팅은 자바스크립트와, 자바스크립트가 어떻게 동작하는지에 대해 깊이 파보기 위한 목적으로, 시리즈의 첫 번째 글입니..

[번역] 아직도 NgZone이 단순하게 Angular의 변화감지(Change Detection)를 위해서만 필요하다고 생각하시나요? 부제 - NgZone의 구현방법과 사용법 본 포스팅은 Do you still think that NgZone (zone.js) is required for change detection in Angular? 을 번역한 글입니다.많은 의역이 포함되어 있을 수 있습니다. :) 대부분의 포스팅에서 Zone(zone.js)와 NgZone이 Angular의 변화 감지Change detection과 강한 연관성이 있다고 말합니다. 분명 Angular의 변화 감지 기술에 Zone이 관련되어있는 것은 사실이지만, 기술적으로 부분 집합적인 관계는 아닙니다. 물론 Zone과 NgZone은 비..

[번역] Zones(zone.js)를 리버스 엔지니어링해서 찾은 것 본 포스팅은 I reverse-engineered Zones (zone.js) and here is what I’ve found 글을 번역한 글입니다.많은 의역이 포함되어 있을 수 있습니다. :) 부제 - Zones이란? (Zones은 무엇이며 또 어떻게 사용할까?) 이 포스팅은 NgZone에 대한 포스팅이 아니지만, NgZone의 메커니즘은 Zones(zone.js)을 이용하기 때문에 비슷할 수 있습니다. 이 포스팅에서는 NgZone을 직접 만들 수 있는 방법과 Angular의 NgZone은 어떻게 동작하는지에 대해서 설명합니다. NgZone에 대해서 더 많이 공부하시려면 "당신은 아직도 NgZone은 Angular의 Change De..

[번역] Angular에서 Zones(zone.js)의 역할 본 포스팅은 Zones in Angular 포스팅을 번역한 글입니다. 많은 의역이 포함되어 있을 수 있습니다. Zones의 이해 포스팅에서 우리는 Zones 의 능력에 대해 알아 보았습니다. Zones 을 이용하면 비동기적으로 실행되는 코드에 대해 성능을 프로파일링 할 수 있었습니다. Zones는 우리의 비동기적 작업을 후킹할 수 있는 실행영역(Execution Context)의 종류라고 배웠습니다. 만약 위 포스팅을 읽지 않으셨다면, 먼저 읽어보기를 강력하게 추천합니다. 본 포스팅에서는 Angular에서 Zones의 역할이 무엇인지에 대해서만 집중합니다. 역자주: 먼저 읽어보시 마세요. 혹 필요한 사전지식에 대해서는 제가 설명드리겠습니다.. ..

[CSS] inline 속성일 때, 4px의 여백에 대하여 오늘은 CSS 에서 display 속성이 inline 혹은 inline-block인 엘리먼트들에 왜 4px 정도의 여백이 생기는지를 알아보도록 하겠습니다. 물론 그 이유를 알게 되면 해결책도 간단합니다. 4px의 미세한 차이.. 4px의 미세한 차이를 볼 수 있는 예제코드를 먼저 띄워드립니다. block div block div 1 2 3 그리고 다음은 실행 결과입니다. 자, 그림을 먼저 봅시다. 위에는 float:left로 붙어 있는 block 속성의 div 엘리먼트구요. 아래 숫자박스는 inline-block의 span 엘리먼트입니다. float으로 붙어있는 엘리먼트들 사이에는 간격이 없는데, inline속성을 가져서 옆에 붙는 엘리먼트들 사..

[번역글] Angular에서 Rx.js의 Observable 관리하기 본 포스팅은 다음의 원문을 번역한 글입니다. 많은 의역이 포함되어 있을 수 있습니다. 원문: Manage your observable subscriptions in Angular with help of rx.js 서브스크립션(Subscription)을 위해 Observable 변수를 사용 할 때, 이 변수를 관리하는 것은 아주 중요합니다. Observable 은 영원히 동작할 수 있으므로 우리는 이 Observable의 사용이 끝났을 때, 중지하는 것이 필요합니다. 만약 우리가 서브스크립션을 중단하지 않고 계속 유지한다면, 불필요한 메모리와 컴퓨팅 자원이 낭비될 것이므로 좋지 않습니다. 물론 우리는 unsubscribe() 라는 함수를..

[Typescript] class에서 'this'를 사용할 때 주의사항 얼마전, 타입스크립트로 express를 사용할 수 있는 템플릿을 만들다가 곤란함에 빠졌던적이 있습니다. (참고: Github - express-ts-template) 우선 구조와 코드를 소개해드려야겠군요. 다만, 이 구조는 어려울 수 있으니까요. 좀 더 쉬운 설명을 원하시는 분은 바로 다음 파트로 넘어가셔도 무방합니다. express-ts-template 에서 발견된 문제점 타입스크립트의 클래스는 자바스크립트의 ES6보다 좀 더 기존 자바나 C++의 클래스와 유사합니다. 그래서 좀 더 MVC 패턴같은 구조를 만들어보고자 한 것이죠. 전체적인 구조는 컨트롤러의 생성자에서 모델을 등록하여, 해당 모델을 이용하게끔 하는 구조입니다. 이 과..

[Linux/macOS] 압축파일을 풀었더니 모든 폴더와 파일에 실행권한이 붙어 있을 때 1. 외부에서 다운로드 받은 압축파일을 풀었더니 모조리 실행권한이 붙어 있습니다. 가끔 웹에서 다운로드하거나 USB를 통해 압축파일을 받아 풀었을 때, 폴더의 모든 권한에 실행권한이 붙어 있는 경우가 있습니다. # 파일의 경우 -rwxrwxrwx 1 norux norux 22 files # 디렉토리의 경우 drwxrwxrwx 1 norux norux 3 directory 위 처럼 777 권한이 모조리 붙어있는 경우가 있습니다. 이 경우, 보안상 취약하기도 하구요. 리눅스의 파일관리 컨셉과도 안맞게 되구요. 또 보통 배시에서 실행권한이 있는 폴더와 파일의 색상을 다르게 보여주다보니, 관리의 어려움과 간혹 짜증이 나기도..

[Typescript] tsconfig.json의 lib 1. lib 옵션의 사용 타입스크립트가 빌드 될 때 참조하는 tsconfig.json의 컴파일 옵션중에 lib이라는 항목이 있습니다. 이 항목의 의미를 알아봅시다. // tsconfig.json { "CompilerOptions": { "target": "es5", "module": "commonjs", "lib": [ "dom", "es5", "es2015.promise" ] } } 이 tsconfig.json 에 등장하는 중간에 lib의 내용을 보면 배열형태로 사용할 라이브러리들을 정의하고 있습니다. 만약 lib 항목을 정의하지 않았다면 target 항목에서 지정한 ECMAScript의 버전에 따라 기본값이 정의됩니다. ES5의 기본 값: do..

자바스크립트 ES6 방식의 모듈 로딩 방식 (import/export) 1. import / export import와 export는 ES6 방식에서 새롭게 등장한 자바스크립트 모듈의 로딩 방식입니다. 모듈을 읽어들이는 import를 설명하기에 앞서, 모듈에 선언된 멤버를 외부에 노출시키는 export를 설명하겠습니다. export 에는 두 가지 타입이 있습니다. Named export Default export 1.1 Named export와 import 1.1.1. 여러 개의 멤버를 export // 함수 구현부 let sum = (a, b, radix = 10) => { return parseInt(a, radix) + parseInt(b, radix); }; let multiple = (a, b,..