Jacob's Development Blog

자바스크립트의 함수에 대한 주제가 많이 있으나, 오늘은 간단하게만 정리해보려고 한다. ECMAScript 5 까지의 함수 함수는 new 연산자와 함께 호출하거나 new 없이 호출하는 방법이 있다. 위 코드에서 보다시피, new 연산자와 함께 호출하면 함수 내부의 this 값은 새로운 하나의 객체이고 그 객체를 반환한다. 반면 new 없이 호출하면 undefined를 반환한다. 그럼 사용자가 new 연산자를 이용하도록 어떻게 강제했을까? 가장 흔한 방법은 instanceof를 사용하는 거다. // instanceof Syntax object instanceof constructor // object: 판별할 객체 // constructor: 판별한 함수 function Person(name) { if (t..

현재 사용 중인 맥북에서 항상 DB는 AWS의 lightsail 서비스나 RDS 서비스를 사용해 왔다. 이유는 밖에서 공부할 때는 맥북으로 해서 상관없지만, 집에서는 데스크톱으로 공부를 할 때가 있어서 애초에 클라우드 서비스를 이용해 왔다. 이번에도 그렇게 할려고 했으나, 돈이 없는 관계로 Local에 MySQL을 설치해 봤다. 근데 진짜 스트레스... 시킨 대로 해도 내 맥북은 계속 못한다고 징징거렸다. 정말 뭘 해도!! 안된다고만 한다. 도커 이미지 띄웠다가 지웠다가 홈브루로 설치했다가 지웠다가... 그냥 로컬에 파일을 다운로드하여서 설치했다가 지웠다가.. 그래도 똑같은 말만 나를 반겨 줬다. Access denied for user 'root'@'localhost' 엎친데 덮친격으로 aws에서 사용..

타입 스크립트로 Koa 서버를 띄우는 간단한 글이다. 사실 원래는 API 서버가 필요해서, 기존에 해보기도 했고 Javascript 기반인 NodeJS의 Express로 서버를 구축하려고 했다. 하지만 이번에는 Koa를 선택했다. 왜냐하면 async/await 문법을 정식적으로 지원하기 때문에도 있고, 기존 Express 개발팀이 Express에서 개선점들을 고치면서 내부 설계가 많이 다른 프레임워크를 개발한 게 Koa이기 때문이다(사실 단순히 정식 지원이 문제가 아니다. 내부적으로 발생하는 비동기 관련 오류를 Express는 잡아내지 못한다 - try, catch를 사용해야함; 이 부분은 다른 블로그를 참고하자). 또한 Koa는 미들웨어로서 충실하다. 반면 Express는 미들웨어, 라우팅, 템플릿 등..

DRY - "Don't Repeat Yourself" 타입 스크립트 사용에 대한 글은 이전에도 작성했고, 웹 상에도 수많은 글이 존재한다. 심지어 공식 문서 또한 친절하게 잘 나와있다. 그래서 이번 글은 말 그대로 더 나은 타입 스크립트를 작성하기 위한 요령(skills)을 담았다. 중복을 피하자 1 개발자라면 누구나 귀가 닳도록 들었을 말이다. 중복을 피하는건, 가독성이나 코드의 유지 보수 시에 매우 중요한 역할을 한다. 근데 이상하게 타입 스크립트를 사용하면 이 말을 피해 가는 경우를 종종 보곤 한다. 예를 들어보자. API에서 받아오는 User 모델로 Person과 PersonDetails 타입 두 개를 만들어 보자. type Person = { name: string; age: number; };..

Redux Reducer와 Array.reduce Redux를 사용하기 시작하면 가장 먼저 작성해 보는 것이 리듀서(Reducer)이다. 그런데 이 리듀서에 대해 이해를 하지 않고 넘어가면, 나중에 분명 헷갈리는 경우가 생긴다. 그래서 이번에는 리듀서에 대해 조금 더 깊게 알아보려고 한다. Where does the name "reducer" come from? 리듀서라는 용어는 어디서 등장했을까? 이것만 알면 리듀서에 대한 이해는 끝났다고 봐도 된다. 항상 구글 번역기에 돌려봐도 "감속기"라고만 나와서 짜증 났는데! 그런데 곰곰이 생각해 보니, 구글 번역기에 돌렸던 이유는 이 단어를 잘 몰라서이고, 알려고 하지도 않고 "리듀서"라는 단어로만 받아 드려서 그렇다. 일단 속는 셈 치고 Javascript의..

(입사 초기에 사내 위키에 올렸던 내용이나, 지식 공유 차원에서 쉽게 정리하여 다시 공유한다.) 바인딩(binding) 일반적으로 A를 B에 명시적 또는 암시적인 선언에 의해 매핑하는 것. 프로그래밍에서는 개체(데이터와 코드)들을 연결(할당)하는 것이라고 생각하면 된다. 대부분의 C 기반 언어에서 변수는 선언한 위치에서 바로 생성되지만, 자바스크립트의 경우 변수 선언 방식에 따라 변수 생성 위치가 다르다. 동적 바인딩 런타임(runtime) 시에 발생하며, 실행 중인 경우 변경될 수도 있다. 정적 바인딩 컴파일시에 발생한다. 다시 말해 프로그램이 메모리에 로드될 때, 메모리 셀에 바인딩된다. Scope 자바스크립트 프로그래밍에서 가장 까다로운 부분이 아닐까 싶다. 나 역시 자바스크립트를 맨 처음 배울 때..

웹 서버(Web Server)란, 웹 서버 소프트웨어와 이를 제공하는 물리적 서버 양쪽 모두를 가리키며, HTTP 요청을 처리하고 응답을 제공한다. 크기나 기능, 형태 등은 다양하며, 코드 몇 줄로 구현할 수 있는 서버가 있는 반면에, 몇 십 메가바이트의 안전한 상용 엔진 등도 있다. 하지만 기능은 달라도 모든 웹 서버는 리소스에 대한 HTTP 요청을 받아서 콘텐츠를 클라이언트에게 보내준다. 아래에서의 웹서버는 소프트웨어 적인 관점 위주로 설명하겠다. 웹 서버의 구현 웹 서버는 HTTP 및 HTTP 프로토콜을 구현하고 웹 리소스를 관리하며, 웹 서버 관리 기능을 제공한다. 즉 HTTP 및 그와 관련된 TCP 처리를 구현한 것이다. 그리고 웹 서버는 TCP 커넥션 관리에 대한 책임을 운영체제와 나눠 갖는다..

최근 아마존에서 영어로 된최신 개발 관련 서적을 사서 읽었다. (Front-End 관련한 서적은 기술이 워낙 빨리 바뀌다 보니, 한국에 존재하는 책은 대부분 마이너 버전 업(심지어 메이저 버전이 낮은 책도 많다...)이 안된 책들이 많아 나의 궁금증을 해소시키지 못했다. 또한 원리보다는 사용에 중심이 둔 책이 많기도 해서 고민하던 중, 외국 원서로 눈을 돌린 거다. 참고로 아마존에는 한국에 비해 책에 대한 리뷰가 상세히 써준 분들이 많아 구매에 도움이 많이 된다.) 하지만 욕심에 비해 부족한 영어 실력에 공부 시간이 2, 3배로 증가하였고, 한글 번역에 기여해서 기본적인 단어와 언어를 해석하는 소양을 기르자는 결론을 내렸다. 그래서 시작한 MDN 번역! 일단 워밍업으로 한 주제(비밀~ 아 이미 쓰여있나...

(너무 쉽거나 기본적인 내용은 맨 앞 글에 기본 문법을 참고하시거나 다른 글 or책을 참고 부탁드립니다.) 타입스크립트의 타입 시스템은 "왜 타입스크립트를 사용해야 하는가?"에 대한 적절한 대답이다. 타입 시스템은 놀라울 정도로 강력하고, 우리가 예측하지 못했던 많은 것들을 표현할 수 있게 해 준다. 여기에 대해 좀 더 자세히 알아보자. "타입 시스템은 집합의 개념이다" 위 문장을 지금 당장 이해하지 못해도 좋다. 하지만 집합의 개념에서 타입 시스템을 바라보지 않는다면, 기본은 알아도 활용할 때에 바로 한계에 부딪칠 가능성이 크다. 아래 글을 읽으면서 모르는 문제가 나왔을 때 집합의 개념에서 접근해 보자. extend 아래 코드를 먼저 살펴보자. function getKey(value: any, key:..

Typescript (타입스크립트) 타입스크립트는 좀 특이한 언어이다. python이나 Ruby처럼 인터프리터(Interpreter) 언어도 아니고, 그렇다고 Java나 C처럼 Lower-level language도 아니다. 대신 더 높은 수준의 언어(High-level language)인 JavaScript 언어로 컴파일된다. 그래서 자바스크립트와 타입스크립트의 관계는 필연적일 수밖에 없으며, 타입스크립트를 좀 더 명확히 알기 위해서는 이 관계를 먼저 정확하게 알아야 한다. Typescript와 Javascript 관계 타입스크립트를 한 번이라도 접해봤다면 제일 처음 듣는 개념은 이것일 것이다. "Typescript is a superset of Javascript." 한글로는 "타입스크립트는 자바스크..

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/**..