MobX와 React Hooks를 조합하려고 하면 mobx-react-lite를 자연스럽게 접하게 됩니다. 그러나, 기존의 모든 기능이 구현되어 있지는 않아서 직접 구현을 하셔야 합니다. 예를 들면, 외부에 스토어를 생성하고 사용할때, 리액트에 안에서 사용할 수 있도록 해주는 inject나 Provider를 제공하지 않습니다. Hooks로 코드를 작성...
Dependency injection (의존성 주입) 출처 의존성 주입 패턴의 장점 1. 재사용성 2. 테스트 용이 3. 코드 단순화 4. 종속성 감소 5. 가독성 증가 6. 결합도 감소 7. 유연성 증가 8. 확장성 증가 9. 의존관계를 설정하거나 없애거나 줄일 수 있음 의존성이란? A Class의 내부에서 B Class를 변수로 사용하면 A Cla...
이번에 준비한 튜토리얼에서는 TypeScript 환경에서 Redux를 프로처럼 사용하는 방법을 다뤄보도록 하겠습니다. 왜 제목이 "프로처럼"이냐! 사실은 조금 주관적입니다. 이 튜토리얼에서는 지금까지 제가 다양한 TypeScript/Redux 관련 코드를 읽고, 작성해오면서 그 중에서 제가 맘에 들었던 구조를 소개시켜드리겠습니다. 그런데 프로처럼 사용해...
타입스크립트를 배워보자 최근 많은 회사와 개발자들이 사용하고 있는 TypeScript! 많은 장점을 가지고 있다고 하는데 기존 자바스크립트만 사용했을 때와 타입스크립트를 도입하면 어떤 차이점이 있는지 궁금증이 생겨 포스팅을 합니다. image.png 개발자 중심의 산업 분석 회사인 RedMonk가 GitHub 저장소와 Stack Overflow의 데...
해당 포스트는 TypeGraphQL 을 소개하는 포스트입니다. - 선행 지식으로 server 개발에 대한 어느 정도의 지식, Typescript, SDL을 포함한 GraphQL에 대한 이해를 요구합니다. GraphQL 서버에서의 타입 정의의 피로함 GraphQL을 Typescript와 함께 사용할 때 피로함과 실수를 만들어내는 부분이 바로 각각의...
이번 튜토리얼에서는 타입스크립트 환경에서 Context API를 제대로 활용하는 방법에 대해서 다뤄보도록 하겠습니다. Context API를 사용함에 있어서, 코드의 구조를 어떻게 가져갈 지에 대해서는 딱 정해진 방법이 존재하지 않습니다. Context 를 준비하는 과정에서 클래스형 컴포넌트를 사용 할 수도 있고, 함수형 컴포넌트를 사용 할 수도 있죠. 함...
이번 섹션에서는 타입스크립트를 사용하는 리액트 컴포넌트에서 `useState` 및 `useReducer` 를 사용하여 컴포넌트의 상태를 관리하는 방법과 `useRef` 를 사용하여 컴포넌트 내부에서 관리하는 변수 및 DOM 을 이용하는 방법에 대해서 알아보겠습니다.
이 튜토리얼에서는 타입스크립트가 적용된 리액트 프로젝트를 만드는 방법을 알아보고, 리액트 컴포넌트를 타입스크립트로 작성하는 방법에 대하여 다뤄보게 됩니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리액트 프로젝트를 만들어볼까요? 타입스크립트를 사용하는 리액트 프로젝트를 만들때는 다음과 같이 명령어를 사용하세요. 제 yarn start를...
이 포스트에서는 여러분들이 타입스크립트를 리액트 프로젝트에서 사용해보기 전에, 알아두면 유용한 타입스크립트의 기초 핵심을 다뤄보게 됩니다. 추후 리액트를 사용할 것이 아니더라 하더라도, 이 튜토리얼에 나와있는 연습을 진행해보시면 타입스크립트를 통해 어떤 도움을 얻을 수 있는지 갈피를 잡을 수 있게 되어 입문에 도움이 될 거예요. 이 튜토리얼에서는 리액트...
이번에 올리게 될 개발 튜토리얼 시리즈에서는 리액트 프로젝트에서 타입스크립트를 사용하는 방법에 대하여 알아보겠습니다. JavaScript 는 Weakly-typed 된 언어이기 때문에 특정 숫자 변수를 선언 한 다음에 그 안에 다른 타입의 값을 담을 수 있어요. 예를 들자면, 숫자로 선언한 변수에 문자열을 넣을 수도 있고, null을 넣을 수도 있고 배열...
4주 프로젝트 DAY 7 * Exploring Async/Await Functions in JavaScript * generic? * 추상 클래스와 인터페이스? * promise.all? Exploring Async/Await Functions in JavaScript https://alligator.io/js/async-functions/ 내...
이전에 한거 다 날라갔네.. 저장을 안했나보다.. 함수 선택적 매개변수 기본 매개변수 까지..했었는데 https://typescript-kr.github.io/ 핸드북만 보기 * tsconfig.json( typescript 개발환경 구축 ) * interface vs type * this * class tsconfig.json cli ...
함수형 cartSuynag. 하면 user,get, put 은 참조가 가능하지만 store은 참조 불가 * 속성 private = 선언된 class 안에서만 참조가능 public = default 값 이고 모든 참조 가능 protected = 선언된 class 안에서만 참조가 가능하지만 private와 다른점은 상속때 값을 줄 수가 있다. (P...
TypeScript 란? 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분 로직은 주로 웹서버에서 실행되었고 브라우저(클라이언트)는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이다. 타입스크립트는 정적 타입!!! EX
서론 지난 포스트에서 프로젝트 세팅을 모두 끝마쳤습니다! 이제 실제로 멋진 Typescript Express 크롤러를 만들어볼 차례입니다. 어서 개발하러 가시죠! 1. 크롤러의 작동원리 크롤러의 작동원리는 사실 정말 별 것도 없습니다. 우리가 일반적으로 웹 서핑을 할 때 보는 웹 페이지들은 다들 알고 계시는 것처럼 HTML과 CSS, 자바스크립트로 동...
서론 저번 포스트에서 크롤러에서 필요한 모듈들을 설치하는 것까지 진행했었죠? 이번 포스트에서는 프로젝트 세팅을 이어서 해볼 것입니다. 이번 포스트에서 할 작업들은 다음과 같습니다. 1. tsconfig 세팅 2. tslint 세팅 3. jest 세팅 tsconfig 세팅 Typescript를 해보신 분들도 계시겠지만, 이전 포스트에서도 말했다시피 ...