Jacob's Development Blog

Typescript 3.7.0 버전부터는 많은 개발자들이 고대하던 몇 가지 스펙이 추가되었다. 그래서 간단하게나마 소개해 보려고 한다. cf) vs-code 사용자라면 "Typescript 버전 3.7 + 워크 스페이스 버전 3.7" 설정을 잊지 말자! Optional Chaining typescript 3.7.0 vs-code 1.41 ECMAScript 기능 중 많은 요구가 있었던 Optional Chaining이 TypeScript 3.7에서 추가되었다. 이미 많은 다른 언어에서는 지원되고 있었다. 물론 이름은 다를 수 있다. C#: Null-conditional operator Swift: Optional Chanining CoffeeScript: Existential operator What i..

"디자인은 구현과 인터페이스 모두에서 단순해야 한다. 구현이 인터페이스보다 단순해야 하는 것이 중요하다. 단순함은 설계에서 가장 중요한 고려 사항이다" - 리차드 가브리엘(Richard P.Garbriel) - reactor 패턴을 알기 전에 몇 가지 개념들에 대해 먼저 짚고 넘어가려고 한다. Polling vs Callback 폴링이란, 충돌을 피하거나 동기화 처리 등을 목적으로 다른 장치(또는 프로그램)의 상태를 주기적으로 검사하여, 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식이다. 언뜻 느끼기엔 Callback과 유사해 보이지만, 콜백은 콜백함수를 등록해 놓고, 자신이 호출되기를 기다리는 것임에 반해, 폴링은 원하는 응답을 얻을 때까지 서버에 반복적으로 확인 요청을 하는 것이다. 이벤..

HTTP 메시지를 보기전에 몇가지 개념을 짚고 넘어 가겠다. Proxy(프락시) 클라이언트와 서버 사이에 위치한 HTTP 중개자로서, 프락시 서버는 웹 보안, 애플리케이션 통합, 성능 최적화 등의 역할을 수행한다. 또한 프락시는 요청과 응답을 필터링한다. 클라이언트와 서버 사이에는 다수의 프락시가 존재할 수 있다. Upstream vs DownStream 1 -> 2의 순서로 일이 진행되고 있고, C는 B에 의존하고, B는 A에 의존한다. 이때 빨간색 방향을 Downstream이라고 하며, 보라색 방향으로의 진행을 Upstream이라고 한다. 여기서 B는 A가 존재하지 않았다면 당연히 존재할 수 없을 것이다. C의 경우도 마찮가지이다. 어떤 것이 다른 것에 가치를 더하거나 다른 방식으로 의존한다면, Do..

빅오 표기법에서 `n`은 입력의 개수를 나타낸다. `n이 무한으로 접근할 때 무슨 일이 일어날까?` O(1) `O(1)`은 입력 공간에 대해 변하지 않으며, 그래서 이를 상수 시간이라고 한다. 배열에 있는 항목을 인덱스를 사용해 접근하는 경우가 `O(1)`의 예이다. O(n) `O(n)`은 선형 시간이고 최악의 경우에 n번의 연산을 수행해야 하는 알고리즘에 적용된다. // NOTE: O(n) 알고리즘 function bigO1(n) { for (let i = 0; i < n; i++) { console.log(i); } } // NOTE: O(n^2) 알고리즘(Quadratic) function bigO2(n) { for (let i = 0; i < n; i++) { console.log(i); for(..

HTTP는 웹 트래픽을 어떻게 전송할까? 하루에도 수십억 개의 이미지, HTML 페이지, 텍스트 파일, 동영상 파일 등이 인터넷을 통해 전 세계 사람들의 웹브라우저로 전달된다. 모두 HTTP를 사용해서 통신하여 인터넷의 공용어라고도 할 수 있다. 그렇다면 HTTP는 웹 트래픽을 어떻게 전송하는 것일까? 우선 항상 정보를 요청하는 웹 클라이언트와 내가 원하는 정보를 가지고 있는 웹 서버가 있다. 클라이언트는 서버에게 HTTP 요청을 보내고 서버는 요청된 데이터를 HTTP 응답으로 돌려준다. 이게 월드 와이드 웹(www)의 기본 요소이다. 여기서 말하는 클라이언트는 웹브라우저를 의미하며, 우리가 흔히 사용하고 있는 크롬(Chrome)이나 인터넷 익스플로러다. 그리고 웹브라우저는 HTTP 객체를 요청하고 사용..

DOM 돔(DOM)이란 Document Object Model의 약자이며, HTML 및 XML 문서를 위한 API이다. 돔은 객체 간의 관계를 지정하지 않았기 때문에 논리적 구조라고 하며, 개발자는 DOM을 사용하여 문서를 작성하고 구조를 탐색하며, 돔에 요소 또는 내용을 추가, 수정, 삭제할 수 있다. Dom을 조금 더 이해하려면 Data Structure Tree(데이터 트리 구조)에 대해 이해 해야 한다. Data Structure Tree 트리의 최상위 데이터(Root, 루트)는 매우 중요하거나 그 아래 다른 요소를 포함하기 위해 존재한다. 루트는 매우 중요한 역할을 하며, 트리에서 추출할 정보를 검색할 수 있는 공간을 제공한다. DOM Parser 모든 브라우저에는 HTML 문서를 DOM으로 구..

7 Data Types call by value와 call by reference에 대해 다루기 전에 7가지 데이터 유형을 먼저 설명하려고 한다. primitive data type - number, string, boolean, undefined, null Objects - Array, Object 여기서 중요한 점은 primitive data type은 값으로 전달되고, Objects는 참조로 전달된다. 여기서 값으로 전달된다(Call by value)는 의미는 사본을 만드는 것과 동일하다고 생각하며 되며, 좀 더 정확하게는 다른 메모리 위치에 저장된다. 아래 예제를 보자. let name = 'jacob'; let newName = name; name = 'master jung'; console.l..

모듈 관리자는 아래와 같은 규칙을 따라야 합니다. - 이전 버전과 호환되지 않는 변경은 메이저 번호를 증가 시킵니다. - 이전 버전과 호환되는 새로운 기능은 마이너 번호를 증가 시킵니다. - 기존 기능에 대한 간단한 버그 수정은 패치 번호를 증가 시킵니다. 위 규칙들은 기본적으로 셈버 규칙을 따릅니다. 이런 규칙을 따르기 때문에 신뢰를 할 수 있고 npm에서 기본 설치시 모든 버전은 캐럿(^, caret)을 붙인 상태가 기본입니다. 캐럿 버전은 `npm update` 를 했을때 최신 마이너 버전까지 업데이트가 됩니다. 하지만 무조건적인 최신 버전도 좋은게 아니고, 패치 버전업이라고 또 다른 사이드 이펙트를 발생시키지 않을거라는 보장은 할 수 없지만, 간단한 버그 수정에 대한 혜택까지도 포기하면서 버전을 ..

cause vs block `A causes B`: A가 B의 원인이다. - 예시) 파티를 준비해야해서, 요리를 한다. `A blocks B`: A를 끝내야 B를 할 수 있다. - 예시) 손을 씻고, 요리를 한다. https://developers.google.com/issue-tracker/guides/block-issue clone vs duplicate https://community.atlassian.com/t5/Jira-questions/what-is-the-difference-between-a-clone-and-a-duplicate/qaq-p/45628 `clone`: 복사, 기존 이슈를 복사하고 싶을 때 clone 사용 `duplicate`: 중복, 실수로 같은 이슈를 2개 이상 올렸을 때 ..

허스키는 강아지가 아니라 npm 라이브러리 중에 하나입니다. git hook을 사용하는데에 여러가지 용도로 사용할 수 있지만, 이 글에서는 간단한 사용법만 짚고 넘어가겠습니다. (참고: https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) 제 Mac이 이상한건지 설정을 잘못한건지, eslint 설정은 잘 되어있으나, 저장을 두번, 세번하면 eslint가 깨지는 현상이 있었습니다. 아래 방법은 eslint가 깨졌다면, commit 자체를 막는 방법입니다. > npm i huksy 그 다음 `package.json` 에 아래와 같이 추가해 줍니다. ... }, "husky": { "hooks": { "pre-commit": "eslint 'src/app/**..