Jacob's Development Blog

스토어 → 애플리케이션의 상태(state)를 가지고 있는 곳 → createStore라는 함수를 가지고 있고 이를 통해 스토어를 생성 → 스토어는 애플리케이션 내부에서 유일성을 가진다. 플럭스 표준 액션(Flux Standard Action) → 액션의 형식을 표준화한 것(with 페이스북 개발자) → 디자인 목표: Human-friendly, Useful, Simple 액션크리에이터(ActionCreator) → 액션을 생성하기 위한 함수 → 액션크리에이터를 만들어 두면 액션 테스트를 쉽게 할 수 있으며, 실제로 액션을 사용하는 경우에도 직감적으로 쉽게 사용할 수 있다. const addTask = task => ({ type: 'ADD_TASK', payload: { task } }) createSt..

리듀서(Reducer)란? → 리듀서는 이전 상태와 동작을 받아 새 상태를 리턴한다. → 리듀서는 반드시 순수 함수여야 한다. 이를테면 데이터베이스 호출이나 HTTP 호출 등 외부의 데이터 구조를 변형하는 호출은 허용되지 않는다. → 리듀서는 항상 현재 상태를 '읽기 전용'으로 다룬다. 기존 상태를 변경하지는 않지만 새 상태를 리턴은 할 수 있다. 리듀서가 포함하고 있는 세 가지. 할 일을 정의하는 Action(인수는 옵션) 애플리케이션의 모든 데이터를 저장하는 state state와 Action을 받아 새 상태를 리턴하는 Reducer 첫 리듀서 만들기 가장 단순한 리듀서는 상태 자체만을 리턴한다(identity reducer라고 한다). interface Action { type: string; pa..

먼저 간단하게 `메모제이션`에 대해 알고 넘어가자. 메모제이션(Memoization) → 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법. → 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 더 사용하는 경향이 있어도 성능 측면에서 큰 이점이 있어서 알고리즘 성능 최적화에 많이 사용된다. 컴퓨터프로그래밍용어로, 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 방지할 수 있게 하는 기법이다.동적 계획법의 핵심이 되는 기술로써 결국 메모리라는 공간 비용을 투입해 계산에 소요되는 시간 비용을 줄이는 방식이다. - 나무위키 - → 시간복잡도를 O(N)으로 줄인다. useMemo 일반적으로 Re..

(간단히 데레코이터 정의부터 살펴보자) 데코레이터 → 새로운 프로그래밍 개념이 아니지만, 파사드 패턴(facade pattern : facade는 건물의 정면을 의미한다. 파사드 패턴은 소프트웨어 디자인 패턴의 하나로 통일된 인터페이스를 통해 복잡한 서브 시스템을 간단히 사용하도록 만든 패턴이다)이나 플라이웨이트 패턴(flyweight pattern : 객체 내부에서 참조하는 객체를 매번 만드는 것이 아니라, 없다면 만들고 있으면 기존 객체를 공유하여 메모리 사용을 최소화하는 패턴이다)과 같은 구조적 디자인 패턴의 하나이다. → 데코레이터 디자인 패턴은 클래스를 수정하지 않고 클래스의 기능을 확장할 수 있는 구조적 패턴의 하나이다. 이것은 별도의 클래스를 생성하고 이 새로운 클래스로 메인 클래스를 래핑(..

귀찮은 패키지 업데이트 체크하기 프로젝트를 진행하다 보면, 내가 다운 받은 패키지가 최신 버전이 나왔는지, 궁금해 질때가 있다. (분명히 더 좋은 기능이 나온다고 했던거 같은데... ) 물론 한땀한땀 `패키지 github`나 `npmjs`에 들어가서 체크해도 상관은 없지만, 평균 수십개의 패키지를 받기 때문에 중요한 패키지가 아니라면 따로 관리하지 않는다. 하지만 버그 픽스나 기능 개선이 자주 일어나는 활발한 자바스크립트 생태계라는 점을 고려하면 자주 체크해 주고 업그레이드 한다고해서 문제 생길건 없다. 또한 다운그레이드조차 쉽기 때문에! 일단 조금 귀찮고 전통적인 방법을 먼저 알아보자. > npm outdated 패키지 업데이트를 생각한다면 제일 먼저 접하는 명령어다. 명령어를 검색하면 이렇게 잘 나온..

GraphQL 실행 환경 직접 구현하지 않고 온라인에서 해도 되지만, 직접 구성해도 어렵지 않기 때문에 소개한다. 추가적으로 노드몬을 설치하여 변경 사항을 자동 감지하도록 하겠다. 마지막으로는 Resolver에 대해 간단하게만 짚고 넘어갈려고 한다. Step by Step 아래 순서를 따라하면 된다. 1. 프로젝트를 만들 경로로 이동한다. 본인이 원하는 아무 곳이나 좋다. 새로 폴더를 만드는 것을 추천한다. 2. npm init -y -y 옵션은 npm 설정이 귀찮을때 애용하면 좋다. 3. 필요한 패키지를 설치한다. cf) Apollo를 사용할 예정이다. > npm i apollo-server graphql nodemon 세개의 패키지를 먼저 설치했다. 4. package.json을 수정한다. main과..

Schema-First Development 스키마 우선주의는 디자인 방법론의 일종이다. 개발시 스키마를 우선 개발하는 것이다. 여기서 스키마(Schema)란 데이터 타입의 집합이다. 이를 미리 정의해 두면, 스키마 정의는 API 문서 같은 역할을 하며, 프론트엔드 개발자와 백엔드 개발자가 많은 의사소통에 대한 비용을 줄이고 빠른 개발을 할 수 있다는 장점이 있다. 백엔드 개발자는 어떤 데이터를 전달해야 하는지, 프론트엔드 개발자는 인터페이스 작업 작업을 할 때 필요한 데이터를 정의할 수 있는 것이다. 하지만, 당연히 장점만 존재하지 않다. 단점은 이 글의 취지와는 멀기 때문에 링크를 첨부한다. GraphQL Schema 설계하기 GraphQL의 API을 설계하기 전에 항상 사용할 스키마(Schema)를..

GraphQL은 많은 툴들이 지원한다. GraphiQL, Apollo CLI는 많이 들어봤는데, TypeGraphQL과 GraphQL Code Generator도 시간이 나면 찾아봐야겠다. 이번 글은 "2. GraphQL 쿼리어1"에 의존하고 있다. 생각보다 코드를 넣으니, 양이 많아져 분리했다. mutation (뮤테이션) 뮤테이션은 REST에서 PUT 요청을 통해 데이터를 수정하는 요청과 비슷한 요청이다. 물론 REST에서 GET 요청으로 데이터 수정 요청을 못하는건 아니다. 이와 동일하게 뮤테이션이 아니더라도 가능은 하지만, 데이터 변경을 발생시키는 작업은 명시적으로 뮤테이션을 통해 전송되어야 하는 것이다. 또한 뮤테이션 또한 기본적인 쿼리와 마찬가지로 중첩 필드를 요청할 수도 있다. 예를 먼저보자..

(친절한 GraphQL은 한국어도 지원한다!!) SEQUEL GraphQL에 대해 본격적으로 알아보기 전에 SEQUEL부터 살펴보자. IBM에서 관계형 데이터베이스를 만들면서 사용하는 언어가 SEQUEL (Structured English Query Language)이다. 낯설게 느껴질지 모르는 단어지만 이게 나중에는 우리가 아는 SQL로 불리게 된다. SQL은 도메인에 종속된 언어로 DB 안의 데이터에 접근, 관리, 조작하는 데에 사용된다. SQL은 매우 유용한 언어지만, SQL로 실행할 수 있는 명령어는 굉장히 한정적이다. (SELECT, INSERT, UPDATE, DELETE - 데이터 작업은 이게 끝이다^^;;). 그래도 쿼리문 한 줄로 DB 안의 여러 데이터 테이블에서 필요한 데이터를 한 번에..

GraphQL이 뭐지? API를 만들 때 사용할 수 있는 쿼리 언어이며, 서버측 런타임이다. 뭐 이렇게 생긴? (GraphQL 메인에 있는 사진이다;;) 언뜻보면 그냥 JSON처럼 보인다. 그 말은 어려워 보이진 않고 친숙하다는 말이다! 벌써 배워보고 싶은 욕구가 넘친다 :) 그리고 불과 몇 년전에 페이스북에서 만든 만큼 트랜디하며, 이미 페이스북 내부의 데이터 페칭을 거의 GraphQL로 이루어 지고 있다! GraphQL 쿼리는 실제 필요한 데이터만 받도록 작성할 수 있다. URL에서 GraphQL 쿼리를 전송하여 유효성을 검사하고 실행할 수 있다. { hero { name } } 간단히 말해서 이렇게 보내면 { "data": { "hero": { "name": "R2-D2" } } } 이게 Graph..

RxJS를 사용한 Redux-observable을 알기 전에 중요한 패턴 하나만 먼저 알고 지나가려고 한다. Saga Pattern (사가 패턴) RxJS에서 나온 개념은 아니다. 1987년 논문에서 처음 알려졌다(https://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf, 영어를 좋아하고 잘한다면 읽어봐도 좋을거 같다. 물론 난 아쉽게 아직 그러지 못한다). 분산 트랜잭션의 가장 알려진 패턴이며 분산 시스템의 데이터 일관성을 유지하는 방법이다. 간단히 말하면 이러하다. 아래와 같은 일련의 로직이 있다고 해보자. 물건을 주문한다. 카드사에 결제정보를 넘긴다. 카드사에 결제를 한다. 카드사로부터 결제 정보를 받는다. 물건 주문처리를 완료한다. 각 단계..

A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. subject는 대표적인 Hot Observable이다. 또한 모든 Subject는 옵저버(Observer)이며, 구독(subscribe)하면 등록된 모든 옵저버에게 멀티 캐스팅된다. RxJS에서 제공하는 공식 예제를 봐도 잘 나와있다. import { Subject } from 'rxjs'; const subject = new Subject(); subject.subscribe({ next: (v) => console.log(`observerA..

(본 내용은 타입스크립트 2.8^ 버전을 기준으로 작성한다.) 조건부 타입(Conditional Type) 조건부 타입은 타입을 결정하는 새로운 방법으로 아래와 같은 문법 구조를 가지고 있다. T extends U ? X : Y 여기서 T, U, X, Y는 모두 타입이다. 위 구문을 해석해 보면 보다 쉽게 이해가 된다. "T 타입이 U에 할당 가능한 타입이면 X라는 타입이고, 아니면 Y라는 타입이다." 간단한 예제를 보자. interface Human { intro(): void; } interface Student extends Human { study(): void; } type Person = Student extends Human ? number : string; // Pserson은 number..

Typescript Generics 앞써한 포스팅에서 이미 any타입으로 타입을 느슨하게 만드는 법에 대해서는 공부하였다. 하지만, 문제가 있었다. any의 경우 타입 안정성이 떨어져서 의도치 않는 결과가 나올 수 있고, 그렇다고 한가지 타입으로만 정의하면 지정된 타입 이외에는 다른 타입을 받을 수 없기 때문에 고민이었다. 이 문제를 해결하기 위해 등장한 것이 제네릭(generic) 이다. 만약 다른 언어를 사용해봤다면 한번쯤은 들어봤을 문법이긴 하다. 사용법은 크게 다르지 않으며, 천천히 살펴보도록 하겠다. 제네릭 특징 제네릭은 다음과 같은 특징이자 장점을 가지고 있다. 컴파일시 타입 안정성을 보장한다. 캐스팅 관련 코드를 제거할 수 있다. 일단 예시 코드를 보면서 조금 더 상세하게 보겠습니다. fun..

제어문에 대해 간단히 살펴보겠습니다. 너무 쉬운 내용은 생략하고 한번더 생각해야되는 내용 위주로 소개하려고 합니다(if문 기본부터 하기에는...). Fall-through (폴스루) switch-case문에서 흔히 많이 사용하는 패턴입니다. 개발자가 의도하는 경우도 많고, 아닌 경우도 있습니다. const num: any = one; switch (num){ case "one": console.log("one이에욤"); // fall-through case "two": console.log("two이에욤"); break; default: console.log("모!!"); break; } tsconfig.json에서 컴파일 옵션을 통해 막을수도 있습니다. { "compilerOptions": { "noF..

자바스크립트 개요(ES6+) 자바스크립트(Javascript)는 일급 함수를 지원하는 언어입니다. 또한 동적 언어이며 HTML과 CSS와 함께 웹에서 가장 굴직한 줄기를 차지하고 있습니다. 참고로 Java와는 전혀 다른 언어입니다. 그런데 자바스크립트를 공부하다보면 ECMAScript, ES6, ES6+, ES7 ... 등의 말을 보게 됩니다. ES는 ECMAScript의 줄임말이며 뒤에는 버전이라고 생각하시면 됩니다(물론 ES1부터 다 있습니다). ECMAScript는 자바스크립트의 표준이며 현재도 계속 ECMA International 표준화 기구에 의해 버전이 업데이트 되고 있습니다. 그리고 ECMAScript2015를 ES6라고 하며, ES6 이후 버전을 통칭하여 "ES6+" 라고 합니다. 아래에..

Types 타입스크립트를 여러가지 타입을 같습니다(number, string, boolean...). 물론 앞에서도 약간의 언급과 함께 넘어갔지만, 이번에 좀 더 심화해서 살펴보겠습니다. number 타입의 경우 hex, binary, octal 모두 가능합니다. string 타입의 경우 큰 따옴표(", Double quotes), 작은 따옴표(', single quotes) 모두 가능 합니다. 또한 역따옴표(`, backtick)으로 깜싸져 있을 경우 멀티라인도 가능합니다. Array 타입도 가능하며, 방법은 두 가지가 있습니다. const listA: number[] = [1, 2, 3]; const listB: Array = [1, 2, 3]; 참고로 배열(array)타입의 요소로는 숫자 타입뿐만 ..

타입스크립트(TypeScript) - 정적 타입 언어 자바스크립트를 사용할때 안정성 있는 프로그래밍을 위한 방법입니다. 조금만 어렵게 말해보자면, 동적 타입 언어인 자바스크립트의 변수 타입은 런타임시에 결정되기 때문에 타입 오류 또한 런타임시에 발견됩니다. TMI이긴 하지만, 타입스크립트는 델파이의 창시자인 앤더스 헤일스버그(Anders Hejlsberg)라는 분이 만들었습니다. 그래서인지 타입스크립트를 하시다보면 C#과 비슷한데...라는 생각이 드실수도 있어요. 당연하겠죠? 워낙 유명하시니깐요.. [javascript] let sampleNumber = 9208; sampleNumber = "구이공팔"; (자바스크립트에서는 문제 없이 실행됨) 그러다보니 다른 정적 타입 언어(Java, C++)에 비해 ..

ABILITY ABILITY는 약 1개월 동안 준비한 비트캠프 3조(팀명: ABILITY)의 파이널 프로젝트입니다. 6개월 간의 배운 것을 총 활용해서 만든 프로젝트이며, 6명의 팀원이 함께 만들었습니다. 하지만, 뷰 라이브러리로 적용한 React는 별도의 스터디를 병행하며 진행한 것이며, 따로 배우지는 않았습니다. 그렇기 때문에 처음 리액트 설계부분에 부족함이 있어, 서버사이드 렌더링을 일부에만 적용했다는가, 리덕스나 리덕스 사가를 모든 페이지에 적용하지 못한 문제가 있습니다. 하지만, 준비 기간이 2개월(실제 코딩기간 45일) 동안 스터디를 병행하며, 한 사이트를 만들었다는 것을 높게 평가해 주시면 좋겠습니다. 프로젝트 개요 우리 프로젝트는 한국형 Stack overflow를 지향하고 있습니다. 여러..

자바의 정석 기본편 처음 국비지원학원에 갔을때, 전공자들이 추천했던 "자바의 정석". 이번에 기회가 있어 참여했습니다. 오탈자 잡는 것도 있었지만, 책에 의견을 제시할 수 있다는 점이 가장 큰 매력이었어요. 최대한 많은 의견을 낼려고 했고, 그러다보니 덜달아 자바 복습도 해서 좋았네요..ㅎ (책 출시되면 책도 보내주신다는?! 제 의견 전달한 부분이 반영되면 너무 뿌듯하겠네요...) 저도 언젠가 책으로 지식을 전달해 보고 싶구요.ㅎㅎ 여튼 좋은 경험이었습니다. 감사합니다.