Category: frontend

React native realm (typescript) 적용하기

시작하기react natvie 애플리케이션에서 로컬db로 저장하는 방법은 여러종류가 있습니다.sqlite, AsyncStorage, realm 등이 있습니다.이중에 realm을 사용해보도록 하겠습니다. 공식홈페이지에서는 기존 스토리지보다 더욱빠르고 향상된 기능을 제공한다고 합니다. 설치하기react-native v0.60이상에서 작성하였습니다. 1npm i

React native splash screen 적용하기

시작하기애플리케이션을 처음실행하면 홈화면이 등장하기전에 로고가 나오는 페이지를 splash screen이라 합니다.react native splash screen패키지를 이용해서 splash screen를 구현해보겠습니다. 설치하기react-native v0.60 이상에서는 자동으로 링크해주기 때문에 추가로 link를 할 필요는 없습니다. 1npm i re

React-native 프로젝트 이름변경

시작하기기본 토대가 되는 프로젝트를 만들어 놓고, 프로젝트 생성시에 사용하고 싶을때 이름만 변경해야 하는데 그 과정이 복잡합니다. web 프로젝트와 다르게 react native에서는 많은 파일의 이름을 바꾸어주어야 하기 때문이죠.이러한 과정을 간단하게 해주는 패키지가 있습니다. 변경하기react-native-rename패키지를 설치합니다. 1npm ins

React native 절대경로 (absolute path) 설정하기

시작하기React native 공식 홈페이지에서 제시하는 absolute path가 적용 되지 않는 경우가 있습니다. React native 초기설정 포스트를 통해서 생성한경우 1npx react-native init ProjectName --template react-native-template-typescript 템플릿으로 생성된것에 대해서 absol

React navigation v5 설정하기

시작하기웹 React에서 사용하는 react-router-dom과 같이 react native에서 페이지네이션을 위해 react navigation을 사용하도록 하겠습니다. 설치하기React native 초기설정 포스트를 통해 프로젝트를 생성합니다. React Native 0.60이상에서 연결은 자동으로 되기때문에 이전버젼에 사용하던 react-native

D3로 pie chart 그리기

시작하기d3 bar차트 포스트에서 다루었던 데이터를 토대로 pie차트를 만들어보겠습니다. 기본설정123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html> <meta charset="utf-8" /> <head&g

D3로 bar chart 그리기

시작하기d3포스트에서 다루었던 기본을 토대로 bar차트를 만들어 보도록 하겠습니다. 축그리기처음 html파일을 생성하고, 다음과 cdn d3를 불러와줍니다. 12345678<!DOCTYPE html><html> <meta charset="utf-8" /> <head> <script src="https

D3 기본 알아보기

시작하기웹에서 차트를 그리기 위해서는 다양한 방법이있습니다. chartjs, vxchart 등 라이브러리가 많습니다. 그중에 기본이 되는 d3을 얕게 한번 알아보겠습니다. 선택기1document.querySelectorAll("pre, code"); 일반적으로 자바스크립트에서 엘리먼트다수를 선택할때 사용하는 방법입니다. 1d3.selectAll("pre,

Gatsby에 typescript 적용하기

시작하기Gatsby는 React에 기반한 무료 오픈 소스 프레임 워크로 개발자가 정적 웹 사이트를 구축 할 수 있습니다. 설치하기Gatsby CLI 설치 1npm install -g gatsby-cli 프로젝트 생성 1gatsby new gatsby-project 프로젝트로 이동 1cd gatsby-project 개발 서버 시작 1gatsby dev

React 상태 관리 라이브러리 Recoil-js 사용해보기

시작하기리액트 유럽에서 리액트의 새로운 상태관리 라이브러리 recoil을 발표했습니다.기존에 사용하던 redux 라이브러리와 어떤차이가 있는지 사용해보도록 하겠습니다.Recoil js홈페이지에서 자세한 내용을 확인 할 수 있습니다.Recoil 소개 유투브 설치하기1npx create-react-app my-app 프로젝트를 생성합니다. 1npm insta