객체를 바르게 만들기
Jan 02, 2021
·in Titlein Title+Content
- 원시형 ECMAScript 5 기준으로 다음과 같다. 문자열 숫자 Boolean null undefined 객체 리터럴 객체 리터럴은 다음과 같이 선언할 수 있다. 다음은 객체 리터럴이 함수 반환값인 경우다. 객체 리터럴을 여럿 생성할 때 반복되는 …
javascript pattern (...ing)
Goal 다양한 자바스크립트 패턴을 익히고 어느 상황에서 사용되는지 파악한다. Good Javascript 일급 객체인 함수를 인자로 주고 반환값으로 돌려받는 형태에 길들어야 한다. 자바스크립트 함수는 일급 시민으로서 자신만의 프로퍼티와 메서드를 가…Jan 01, 2021Javascript OOP Inherit
상속 ECMAScript에서는 구현 상속만 지원하며 구현 상속은 대개 프로토타입 체인을 통해 이루어집니다. 포로토타입 체인 프로토타입 체인의 기본 아이디어는 프로토 타입 개념을 이용해 두 가지 참조 타입 사이에서 프로퍼티와 메서드를 상속한다는 것입니…Javascript OOP Object
이 내용은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍을 읽고 정리한 내용입니다. 객체에 대한 이해 객체를 만드는 방법은 간단한 방법은 Object 인스턴스를 만들고 여기에 프로퍼티와 메서드를 추가하는 방법입니다. 객체를 만드는 가장 많이 쓰이는…typescript embient
동기 타입스크립트를 학습하다가 타입 정의 파일에서의 의 용도가 궁금해져서 몇가지 테스트 후 정리 해봅니다. 배경 namespace 일명 내부 모듈로 전역 이름 공간과 분리된 네임스페이스 단위의 이름 공간입니다. 네임스페이스는 여러 파일에 걸쳐 하나…node stream 에 관하여
gulp 플러그인을 만들기 위한 사전 작업으로 node의 stream 공부한걸 정리 해보았습니다. 잘못 된 부분이 있을시 피드백 부탁드립니다. Stream 스트리밍 데이터 작업을 위한 인터페이스 입니다. 즉, 한곳에서 다른 곳으로 데이터가 흐를 수 …Jun 05, 2020React testing library 사용기 (ing)
동기 atomic 으로 디자인된 컴포넌트와 react testing library 를 사용하면서 느낀점을 정리합니다. 느낀점을 정리한 것이라고 꼭 이렇게 해야한다는 것은 아닙니다. 테스팅을 진행해야 할때 가져야할 생각을 정리 합니다. 컴포넌트 내에서…May 23, 2020React testing library의 전략
동기 React에 TDD를 적용을 하기로 마음을 먹고 testing library를 써보기로 했습니다. 과연 Enzyme 과는 어떤면이 다르고, 컴포넌트를 어떻게 테스팅을 진행 해야 할까를 고민하던 중 Kent C. Dodds 의 블로그 몇개를 읽고…May 21, 2020GraphQL Server
개요 Rest API의 호출 형식 말고도 GraphQL을 사용하면 더 코드가 직관적이고 적은 요청으로 원하는 데이터만 가져올 수 있다는 장점을 듣고 GrpahQL Server 학습을 듣고 정리를 해봅니다. 그럼 먼저 Rest API와 GraphQL의…[algorithms] advanced
동적 프로그래밍 동적 프로그래밍은 재귀와 상반되는 기법으로 알려져 있습니다. 하는 방식인 반면, 동적 프로그래밍에서는 아래에서 위로 해결하면서 결과를 모아 큰 전체 문제를 해결하는 방식입니다. 재귀 기법으로 해결할 수 있는 대부분의 프로그래밍 문제는…May 01, 2020[algorithms] Search
검색 알고리즘 리스트에서는 순차 검색(sequential search)과 이진 검색(binary search) 두 가지 방법으로 데이터를 검색할 수 있습니다. 리스트의 항목이 임의의 순서로 저장되어 있을 때는 순차 검색을 사용합니다. 리스트의 항목이…May 01, 2020XXS 와 CSRF
XXS(cross-site scripting) OWASP라는 단체에서는 다음과 같이 정의를 하고 있습니다. "Cross-Site Scripting (XSS) 공격은 주입타입의 공격으로 악의적인 스크립트가 다른 신뢰 받는 웹 사이트에 삽입되어 지면서 …Apr 30, 2020[algorithms] Sort
버블 정렬 버블 정렬은 가장 느린 정렬 알고리즘 가운데 하나 입니다. 배열의 데이터를 정렬할 때 배열의 한쪽 끝에서 다른 쪽 끝으로 버블처럼 값이 떠오른다는 의미에서 버블 정렬이라는 이름이 유래했습니다. 어떤 데이터 집합을 오름차순으로 정렬하면 큰 …Apr 28, 2020react SSR
이 글은 벨로퍼트님의 책의 SSR 부분을 핵심만 요약한 글입니다. SSR의 흐름을 알기 쉽게 보기 위해서 정리합니다. 정의 SSR은 으로 서버에서 HTML 코드를 만들어서 응답으로 보내주는 형식을 말합니다. 기존의 SPA의 경우에는 을 사용하고…Apr 23, 2020[algorithms] graph
그래프 정의 으로 이루어져 있다. (지도로 치면 이다.) 은 하며, 여기서 v1, v2는 그래프의 정점이다. 은 또는 을 포함할 수 있다. 간선에서 정점의 순서를 따지는 그래프를 라 한다. 방향성 그래프에서는 화살표로 간선을 표시하고 정점간 흐름을…Apr 20, 2020[algorithms] binaryTree
트리 정의 트리는 에지로 연결된 노드의 집합입니다. 예를 들면 회사의 조직도를 들수 있습니다. 각각의 상자가 며 상자를 연결하는 선이 이다. 트리의 최상위 노드를 노드라고 한다. 한 노드가 아래 노드와 연결되어 있을때 위에 있는 노드를 노드라 한…Apr 19, 2020setState가 비동기 인 이유
이 글은 setState가 왜 비동기 인가를 알아보다가 아래와 같은 글이 있어서 이해한 내용만 정리한 글입니다. 아래 글을 모두 번역하지 않았음을 알립니다. https://github.com/facebook/react/issues/11527 브라우저…Apr 07, 2020React 뒤로가기 시 이전 상태 유지를 위한 history
React SPA 구축시 뒤로가기 눌렀을때 이전 상태를 유지하도록 해야하는 일이 생겼었다. 이때, 어떻게 구축 했었는지를 기록해보자. 별도의 써드파티의 state management는 사용하지 않았다. 1차 도전 (Context) history 의 …Apr 04, 2020hello-iScroll
가로 스크롤 구현을 위해 react + typescript + iscroll 썼던 느낀점을 정리하고자 합니다. 1. iscroll + typescript 첫번째로 맞닥뜨린 문제는 iscroll의 type의 정의가 제대로 안되어 있다는 점이 였습니다.…Apr 04, 2020[algorithms] Hashing
해싱 개요 해싱은 데이터를 단시간에 삽입하거나 저장된 데이터를 가져올 때 주로 사용하는 기법이다. 해싱은 해시 테이블이라는 자료 구조를 이용한다. 해싱을 이용하면 데이터를 빠르게 삽입하고, 삭제하고, 가져올 수 있지만, 최솟값이나 최댓값 찾기 등 검…Mar 30, 2020[algorithms] Linked List
연결 리스트 배열로 작업했을때 느리다고 판단되면 대안으로 연결 리스트를 사용할 수 있다. 일차원 배열을 사용한 곳에서는 대부분 배열을 연결 리스트로 바꿀 수 있다. 임의의 요소에 접근해야 할 때는 연결 리스트보다 배열이 좋다. 노드(node) 라 불…Mar 29, 2020[algorithms] Queue
큐의 동작 큐에 요소를 삽입하는 동작을 인큐(enqueue) 큐에서 요소를 삭제하는 동작을 데큐(dequeue) 인큐는 큐에 끝부분에 요소를 추가하며, 데큐는 큐의 앞부분에서 요소를 삭제한다. 피크(peek)는 큐의 앞부분에 있는 요소를 확인할 수 …Mar 27, 2020[algorithms] Stack
스택의 동작 스택은 리스트의 한쪽 긑으로만 요소에 접근할 수 있다. 구내식당에 쌓아놓은 쟁반을 스택에 비유할 수 있다. 스택은 후입선출(Last-in, First-out) 자료 구조로 알려져 있다. 스택의 탑에 있지 않은 요소에는 접근할 수 있다. …Mar 27, 2020[algorithms] List
용어 리스트 : 순서가 있는 일련의 데이터 집합 요소 : 리스트에 저장된 각 데이터 항목 길이 : 리스트에 저장된 요소의 수 동작 append : 리스트 끝에 추가 insert : 기존 요소 뒤 또는 요소의 앞 부분에 삽입 remove : 요소를 삭…Mar 26, 2020세션 로그인
준비된 API /login → username, code /login/check → valid, username /logout 이때, HTTPS 통신을 하지 않을꺼라면 API 주소 도메인은 WEB 도메인과 일치 시켜야 크롬에서 same-site로 인…Mar 25, 2020OAuth 2.0
동기 OAuth 2.0의 절차를 글로 정리해 두자. 다음 글은 생활코딩 에서 알려주신 OAuth 2.0 을 정리한 것입니다. 역할 Resource Owner : User 사용자 - 우리의 서비스를 이용하는 사용자 및 구글,페이스북 등의 서비스도 함께…Mar 16, 2020web-cookie
동기 크롬 브라우저(v80) 에서 서브 도메인에 post 요청 시에 응답헤더로 Set-Cookie 가 설정되어서 오지만, 크롬 dev tools의 application > cookie 로는 저장되는 모습을 볼 수가 없었습니다. 하여 몇가지 테스트를 …Mar 15, 2020react-vega
vega 란 공홈 : https://vega.github.io/vega/ JSON 방식으로 시각화 문법을 작성하여 차트를 그리는 툴 입니다. d3.js 의 복잡한 메서드나 로직을 가지고 그리는 것이 아니라 vega에서 정해진 rule대로 json 을…Mar 12, 2020Hello rebass
이번 프로젝트에 rebass 라는 이라는 라이브러리를 사용해보고 정보와 사용 느낀점을 남깁니다. rebass 란 React에서 사용할 수 있는 UI 원시 컴포넌트들을 지원하는 라이브러리로써 기존의 라이브러리에 을 이용해서 만들어져 있습니다. 즉,…Mar 09, 2020typescript + react 사용기
설치 creact react app 로 typescript로 만들어진 템플릿을 설치해줍니다. 함수 선언식 Component 함수형 component를 만드는데는 대게 화살표 함수형으로 만들곤 했었습니다. 이때 사용할 수 있는 타입은 다음과 같습니다.…Mar 08, 2020React with RxJS
동기 react와 rxjs를 함께 사용할 때 어떻게 사용 할 수 있을까? React 컴포넌트를 update 할 수 있는 트리거들 function Component 의 hooks (useState, useEffect, useReducer 등등..) c…Jan 14, 2020preact 구성기
preact, rollup, babel 구성기 react의 경량화 버젼인 preact를 rollup과 babel로 환경 셋팅한 경험기 입니다. 가 존재하지만 각 설정들이 숨겨져 있고 시키기가 어려워서 새롭게 구성했습니다. preact 3kb 용량…Dec 19, 2019React Context 와 Hooks 설계
React 16 버젼으로 올라오면서 Context 와 Hooks를 이용해서 store를 대체 할 수 있다는데 Atomic 구조와 어떻게 쓰면 성능을 신경쓰면서 사용 할 수 있을지에 대한 고민 글입니다. React Context 와 Hooks를 사용하…Dec 11, 2019Hello Rollup
Rollup Setting & babel Setting 간단한 스크립트 개발 셋팅을 위한 rollup 과 babel 셋팅 및 crawling을 위한 proxy 서버 셋팅을 정리해둡니다. Rollup production setting rollup 셋팅…Nov 25, 2019React 정리
리액트가 동작하는 방법 (요약) react는 모든 요소를 생성해서 해당 되는 dom에 밀어 넣는다. react는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 법을 알고있다. 빈 HTML을 로드한 다음에 rea…Nov 20, 2019Hello Enzyme
이 글은 아래 링크에 있는 글을 의역 했습니다. 참조 엔자임은 리엑트를 위한 Javascript Testing 유틸리티 입니다. 리엑트 컴포넌트들의 결과물을 테스트 하기 용이합니다. 또한 출력에 따라 런타임을 조작, 탐색 및 런타임 시뮬레이션 할 수…Nov 18, 2019Hello Testing
이 글은 아래 링크에 있는 글을 의역 했습니다. 참조 Test Types 일반적으로 웹사이트를 위한 아주 중요한 테스트 타입들은 다음과 같다. Unit Tests - 입력을 제공하고 출력이 예상한것과 같은지 확인하여 function들 또는 class…Nov 14, 2019hello-geo
지리 공간 정보 시각화 지리 공간 데이터는 흔히 접할 수 있는 데이터 범주로서, 도나 군 등 행정구역 형태나, 도시 혹은 사람이 트윗한 장소, 지표면 위성 사진 등의 형태로 제공할 수 있다. 구글 API 등 전용 라이브러리를 사용하는 이유는 주로 구…Oct 16, 2019Virtual DOM is pure overhead
이글은 다음글을 보고 번역한 것입니다. 만약 지난 몇년 동안 자바스크립트 프레임워크를 사용했다면 아마 'virtual DOM은 빠르다'는 말을 들었을 것입니다. 또한 종종 real DOM 보다 더 빠르다는 의미로 사용되어져 왔습니다. 이런 생각들은 …Oct 12, 2019hello-d3
Intro D3는 데이터 주도 문서 (data-driven docuement)의 약자이다. D3.js는 웹으로 접근할 수 있고 데이터 시각화를 정교하게 하려는 요구를 만족하려 만들어졌다. 데이터 시각화라고 하면 지도, 대화형 다이어그램, 기타 도구와…Oct 01, 2019Under the hood of React Hooks
이글을 번역 및 분석 한 글입니다. 잘못된 번역이 있을 수 있습니다. 또한 예전 코드들이 많으므로 참고만 해야 합니다. 현재 코드랑 다른점이 많이 있습니다. Under the hood of React’s hooks system 우리는 모두 그것에 대…Jul 30, 2019React Fiber part3
이글을 번역 및 분석 한 글입니다. 잘못된 번역 및 생략된 번역이 있을 수 있습니다. In-depth explanation of state and props update in React 이전 기사 인 Inside Fiber: in-depth over…Jul 22, 2019React Fiber part2
이글을 번역 및 분석 한 글입니다. 잘못된 번역 및 생략된 번역이 있을 수 있습니다. Inside Fiber: in-depth overview of the new reconciliation algorithm in React React 는 유저인터페이…Jul 19, 2019React Hooks
이글을 번역 및 분석 한 글입니다. 잘못된 번역이 있을 수 있습니다. Deep dive: How do React hooks really work? What are Closures? 클로져들은 JS 의 기본 컨셉입니다. 클로져는 다음과 같이 정의 내릴…Jul 18, 2019React Fiber part1
이글을 번역 및 분석 한 글입니다. 잘못된 번역 및 생략된 번역이 있을 수 있습니다. The how and why on React’s usage of linked list in Fiber to walk the component’s tree Fiber…Jul 18, 2019Prototype in JavaScript
Prototype in JavaScript: it’s quirky, but here’s how it works 번역 : https://www.freecodecamp.org/news/prototype-in-js-busted-5547ec68872/ 다음…Jul 15, 2019Using JavaScript’s Try-Catch Statement
이 글은 https://www.impressivewebs.com/javascript-try-catch/ 의 번역 본입니다. 내가 javascript app 들을 개발할때 꽤 도움이 되는 한가지 기술은 Javascript 문이라고 믿는다. ( 또는 …Jun 07, 2019build-react
이 글은 아래 링크에 있는 글을 참조 했습니다. 참조 Rendering DOM element 우리가 render 할 때 필요한게 뭔지 설명하기 위해 plain JS object 를 하나 만들 것입니다. 이것을 우리는 element 라고 부를 것입니다…Jun 03, 2019꼬리 재귀
자바스크립트는 재귀 깊이가 너무 깊어지면 오류가 발생한다. 호출 스택을 펼쳐서 재귀 호출을 루프처럼 펼쳐주는 기법을 사용하면 이런 오류를 막을 수 있다. 컴파일러는 꼬리 재귀(tail recursion) 이라는 특별한 형태의 재귀 호출을 스택 깊이를…May 16, 2019(리팩토링) 리팩토링 요점 정리
중복 코드 중복 코드의 가장 단순한 예는 한 클래스의 두 메서드 안에 같은 코드가 들어 있는 경우 이다. 이럴땐 기법을 적용해서 겹치는 코드를 빼내어 별도의 메서드로 만들고 그 메서드를 두곳에서 호출하면 된다. 또 다른 상황은 한 클래스의 두 하위…May 10, 2019(읽기 쉬운 자바스크립트) 이벤트 처리
고전적인 방법 나쁜 예 위 예제는 이벤트 객체에서 clientX, clientY 프로퍼티만 사용한다. 이 코드만 으로는 간단하고 문제 없어 보이지만, 실제 활용하기에는 제한 사항이 많아서 사용하기 어려운 나쁜 패턴이다. 규칙 1. 애플리케이션 로직을…May 02, 2019(읽기 쉬운 자바스크립트) null 비교 금지
변수에 필요한 값이 할당되었는지 확인할 때 과 비교하는 방법은 흔히 잘못 사용하는 패턴이다. 위 코드는 items 변수에 sort() 와 forEach() 를 사용하는 것을 보아 items 변수가 배열이라는 전제하에 작성한 코드인 듯합니다. 코드 …May 02, 2019(읽기 쉬운 자바스크립트) 사용자 에러 던지기
에러의 본질 프로그래밍 언어는 코드가 정해진 기본 규칙에서 벗어나면 개발자에게 코드를 수정하라는 의미로 에러를 발생합니다. 만약 에러가 발생하지 않고 개발자에게 알려주지도 않으면 디버깅은 거의 불가능해지며 에러 수정은 고사하고 문제 발생을 알아차리기…May 02, 2019(리팩토링) 복합 리팩토링
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript 로 전환하였습니다. 상속 구조 정리 하나의 상속 계층이 두 작업을 동시에 수행할 땐 상속 계층을 하나 더 만들어서 위임을 통해 다른 계층을 호출하자. 상속구조로 만들면 하위클래스 안에…Apr 28, 2019(리팩토링) 일반화 처리
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript 로 전환하였습니다. 일반화 관련 리팩토링 기법은 별도로 분류할 수 있다. 일반화는 주로 상속 계층구조나 상속 계층의 위나 아래로, 즉 상위클래스나 하위클래스로 메서드를 옮기는 기법이다…Apr 22, 2019(리팩토링) 메서드 호출 단순화
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript 로 전환하였습니다. 객체에서 가장 중요한 것은 인터페이스다. 이해와 사용이 쉬운 인터페이스를 작성하는 기술이야 말로 좋은 객체지향 소프트웨어 개발에 꼭 필요하다. 메서드 변경 메서드명…Apr 15, 2019Javascript의 Value와 Reference Types 이해
자바스크립트는 메모리에 있는 데이터 구조의 전체 접근 권한을 주지 않는다. 하지만 언어차원에서 reference types 는 존재한다. value 와 reference types 의 혼합은 원하지 않은 사이드 이펙트나 버그를 유발하기도 한다. va…Apr 07, 2019(리팩토링) 조건문 간결화
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript 로 전환하였습니다. 조건문 쪼개기 (Decompose Conditional) 복잡한 조건문(if-then-else)이 있을땐 if, then, eles 부분을 각각 메서드로 빼내자. …Apr 03, 2019(리팩토링) 데이터 체계화2
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript 로 전환하였습니다. 클래스의 단방향 연결을 양방향으로 전환 (Change Unidirectional Association to Bidirectional) 두 클래스가 서로의 기능을 사…Apr 01, 2019Javascript 의 모든것은 Object 이다? 아니다?
번역 : http://blog.brew.com.hk/not-everything-in-javascript-is-an-object/ 자바스크립트가 OOP(객체 지향 언어인지 함수형 언어인지 많은 혼란들이 있다. 실제로 Javascript 는 이 두가지 …Apr 01, 2019(리팩토링) 데이터 체계화1
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript 로 전환하였습니다. 여기서는 데이터 연동을 더 간편하게 해준다. 객체지향 언어는 구형 언어의 단순 데이터 타입으론 불가능했던 것까지 할 수 있는 새로운 타입을 정의할 수 있어서 좋다.…Mar 27, 2019call stack
자바스크립트 콜스택의 이해 번역 : hocheol 원문 출처 : https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4 일부 의역이 들어간 경우도 있으므…Mar 27, 2019(리팩토링) 객체 간의 기능 이동
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript로 전환하였습니다. 기능을 어디에 넣을지 판단 하는것은 중요하다. 기능을 넣을 적절한 위치를 찾는 문제는 메서드 이동과 필드 이동을 실시해서 기능을 옮기면 해결된다. 이때, 필드 이동 …Mar 25, 2019(리팩토링) 메서드 정리
해당 글은 에서 발췌 했습니다. 코드 예제는 javascript 로 전환하였습니다. 메서드 추출 (Extract Method) 어떤 코드를 그룹으로 묶어도 되겠다고 판단될때 그 코드를 빼내어 목적을 잘 나타내는 직관적 이름의 메서드로 만들자. 예제…Mar 20, 2019sop와 cors 그리고 DNS Rebinding
cookie 쿠키는 사용자 속성을 기억하는 데 사용되는 작은 텍스트 파일이다. 서버에서 라고 헤더에 셋팅을 하게 되면 브라우저는 해당 쿠키를 로 저장하게 된다. 쿠키 중에는 2가지 쿠키가 존재한다. 웹브라우저를 끄면 사라지는 휘발성 쿠키를 . 웹브…Feb 27, 2019hello-RxJS
RxJS 의 특징을 알아보고 공부하자. RxJS 의 공홈을 독파해보자. definition RxJS 는 Observables 을 이용한 반응형 프로그래밍을 할수 있게 도와주는 라이브러리 입니다. 비동기와 콜백 베이스 코드를 observable seq…Jan 28, 2019hello-MobX
Intro MobX 의 특징을 알아보고 공부하자. MobX 의 공홈을 독파해보자. Concepts State state 란 어플리케이션을 이끄는 데이터 입니다. 흔히 todo items의 list 같은 domain specific state 라고 하…Dec 31, 2018hello middleware
intro Node.js 에서 사용되는 use 함수와 redux에서 사용되는 middleware 들은 어떤 원리로 동작하는지 알아보자. 문제인식 어떠한 함수 호출 속에서 내가 원하는 작업을 중간에 끼워 넣고 싶다. 원하는 작업이 서버를 거쳐서 오는 …Nov 15, 2018thinking high order function
High Order Function에 대해서 생각을 적는다. 서론 기본적인 high order function (고차함수) 특성을 이해한다. high order function 을 썼을때의 이점과 어느 상황에서 사용이 될 수 있을지 생각해 본다. P…Nov 05, 2018UI unit testing
Intro 비지니스 코드가 아닌 ui의 이벤트를 활용한 코드를 자스민으로 testing을 진행해보자. jasmine 이란? 행위 주도 개발 (Behavior-Driven Development, BDD) 방식으로 자바스크립트 단위 테스트를 작성하기 위…Aug 04, 2018make promise
동기 javascript 비동기를 다루는데 쓰이는 Promise 라는 객체가 있다. Promise 를 다루는 방법은 많지만 실제로이 객체가 어떤 방식으로 움직이는지 그 구조를 파악하면서 Promise 를 좀더 자유자재로 다뤄보자. 틀 만들기 prom…Jul 27, 2018experience monorepo
intro 공통모듈을 한 repo 에서 관리 하는 시도를 해보자. 여러 npm 패키지를 하나의 github repo 에서 관리하자. 즉, monorepo 를 구축해서 공통모듈을 관리하는 환경을 만들자. monorepo 의 이점 lint 나 build…Jul 13, 2018hello OOP
객체지향 이란? 시스템을 상호작용하는 자율적인 객체들의 공동체로 바라보고 객체를 이용해 시스템을 분할하는 방법 자율적인 객체란 상태와 행위를 함께 지니며 스스로 자기 자신을 책임지는 객체 객체는 시스템의 행위를 구현하기 위해 다른객체와 협력, 각 객…Apr 25, 2018lazy evaluation
게으른 평가 call-by-need 라고도 불리는 이 전략 방법은 ( 반대는 call-by-name ) 값이 실제로 필요할때 평가를 하는것이다. 또한 반복적인 평가를 피하기 위해서 한번 평가해둔 자료는 기억해 둔다.(memoization) 왜? 아래…Apr 05, 2018Javascript-Basic1
패턴 연습을 위한 기본 다지기 일급 객체인 함수를 잘 다루자 함수를 인자로 받거나 함수를 리턴한다. 이것은 즉, 함수가 high order function 임을 인지한다. 위의 getX 와 getY 를 그냥 getX() / getY() 처럼 호출 했…Apr 05, 2018hello-flow
Intro flow 는 자바스크립트의 스태틱한 타입들을 체크해주는 도구이다. flow 는 코드가 변경되는 동안 빠른 피드백을 줍니다. flow 는 타입을 추론할 수 있습니다. install 바벨을 이용해서 flow 유형을 변환시켜줘야 한다. 만약 …Mar 29, 2018hello monad
Intro 리엑트 및 함수형 프로그래밍에 많이 나오는 모나드 패턴 알아보자. 찾아보니 너무 어렵다. 특정하게 정의를 내려가기 보단 코드를 조금씩 발전시켜 나가면서 느낌을 익혀보자는 취지로 작성한다. 이해해보자 즉시 실행함수로 값 두개를 더해보자. 아…Feb 13, 2018Hello webpack
intro 웹팩을 알아보고 웹팩 번들링엔 어떤 특징이 있는지 알아보자. webpack config ( webpack version 3) webpack config ( webpack version 4) 기존과 달라졌다고 하는점은 기존에 config 파…Feb 01, 2018webpack-understanding
이글을 번역(의역)한 것입니다. Webpack Tutorial: Understanding How it Works Introduction to Webpack Tutorial Webpack은 모듈 번들러 입니다. 이것은 여러가지 디펜던시들을 받고 그것…Invalid datehello-webServer
web Server web server 는 요청 과 응답의 연속이다. web browser에 web page주소를 입력(요청) 하면 입력한 주소에 맞는 웹 페이지(응답) 을 제공한다. 요청은 요청하는 url , 요청하는 방식 (ex. get,pos…Mar 15, 2018webpack config
Intro 기존에 돌아가는 서버를 바라보는 dev proxy server를 띄워 부분적으로 react component를 개발하는 환경을 만들어보자. 그러기 위해서 사용하는 개발서버 webpack dev config 설정을 해보자. 배포를 위한 we…Mar 14, 2018Hello React
intro React 리엑트를 처음 마주해보자. 해당 정리 내용의 출처는 https://www.youtube.com/watch?v=GEoNiUcVwjE&list=PL9FpFz-xRGMujql3S_XGV2SpdfDBkeC 이곳을 참조 하였다. Bab…Jan 31, 2018Docker Depolyment
Docker Depolyment blue-green 배포 개념 로드발란서를 앞단에 하나를 두고 v1 버젼인 블루(가칭) 라는 앱을 띄운다. 그러다가 나는 v2 버젼인 그린(가칭)을 무중단 방식으로 업데이트를 진행하고 싶다. 그럴때 그린을 로드발란서…Jan 20, 2018Hello Docker
Docker term What is Docker? 소프트웨어를 containerization(컨테이너화) 한 플랫폼. ( 웹서비스 컨테이너 , 디비 컨테이너 따로 담는다고 하면 서로 isolation 화 할수 있고 서로 독립적인 공간을 가질수 있다.…Jan 09, 2018