본문 바로가기

Create Expo + ReactNative + Typescript Manually I can make Expo + ReactNative + Typescript via below script easily.]$ create-react-native-app {{APP_NAME}} --scripts-version=react-native-scripts-tsBut, Sometimes I need setup typescript manually.Here the solution !]$ yarn add -D typescript tslib @types/react @types/react-native @types/expoWrite App.js file below..import AppContainer from "./src/AppContainer"; export default AppContainer;Make sr.. 더보기
Create ReactNative + Typescript App project ]$ yarn global add create-react-native-app]$ create-react-native-app {{APP_NAME}} --scripts-version=react-native-scripts-tsReactJS 웹프로젝트 생성해주듯이 Native 용 프로그램인 create-react-native-app을 설치해준다. 이해 해당 cli를 이용하여 --scripts-version=react-native-scripts-ts 옵션을 줘서 프로젝트를 생성해준다.생성해준 후 기존 expo 환경에서의 개발이 편하다면 scripts들에 명령들을 생성해주어 기존 CRNA를 통해 작업했을 때와 동일하게 작업이 가능하다. "scripts": { "start": "expo start", "eject":.. 더보기
PubSub via postgres in Graphql Yoga graphql-yoga 모듈을 이용하여 graphql 서버를 구동시킨 경우 yoga내에 존재하는 pubsub 모듈을 사용해서 Subscription 기능을 구현할 수 있지만 이 경우 안정성이라던가 서버 확장을 하였을 경우 정상 동작이 되지 않을 가능성이 있다.이에 별도의 Redis 서버를 구축한다거나 하여 PubSub용 시스템을 별도로 구비하여야 하지만 postgres DB 에서 PubSub 기능을 지원하기에 데이터베이스를 Postgres를 사용한다면 별도의 시스템을 구성할 필요가 없다.yarn add graphql-postgres-subscriptions필요한 모듈의 위 모듈이 전부다.실제 소스코드 상에서 Graphql Server를 생성할때 해당 설정 정보들만 추가해주면 된다....import { P.. 더보기
typescript + react project via parcel Parcel Bundler를 이용하여 typescript + reaact 프로젝트를 설정해 볼 예정이다.먼저 필요 패키지들을 설치해준다. yarn add react react-domyarn add -D parcel-bundler yarn add -D @types/react @types/react-dom많이 들 하듯이 package.json 파일내에 script를 추가해준다. "scripts": { "dev": "parcel ./src/index.html", "build": "parcel build ./src/index.html" }src 폴더를 만들어 주고 index.html 파일을 만들어 준다.DOCTYPE html> Parcel Example index.tsx 파일도 생성해준다.import React.. 더보기
React Hooks React v16.8에 React Hooks라는 기능이 추가가 되었다. 이 기능은 기존 state 기능을 Functional component에서도 가져다 사용할 수 있는 기능이다.기본 사용법은 아래와 같다.import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me );}기존에 이와같은 기능을 구현하려면 class component를 만들어 해당 클래스 내의 stat.. 더보기