Tag: react

2020
frontendReactNative

React native firebase 적용하기

업데이트2023.01.10 업데이트 시작하기firebase는 손쉬운 방법으로 데이터 관리를 할수 있는 서비스 입니다. 서버의 인프라를 고민할 필요가 없습니다. 그리고 백엔드를 작업해야할 시간이 단축되는 장점이 있습니다. 설치설치를 먼저 해줍니다. 1npm install --save @react-native-firebase/app ios메인 페이지에 로그인

frontendReactNative

React native realm (typescript) 적용하기

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

frontendReactNative

React native splash screen 적용하기

업데이트2023.01.10 업데이트(안드로이드 부분 디테일 추가) 시작하기애플리케이션을 처음실행하면 홈화면이 등장하기전에 로고가 나오는 페이지를 splash screen이라 합니다.react native splash screen패키지를 이용해서 splash screen를 구현해보겠습니다. 설치하기react-native v0.60 이상에서는 자동으로 링크해주

frontendReactNative

React-native 프로젝트 이름변경

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

frontendReactNative

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

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

frontendReactNative

React navigation v5 설정하기

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

frontendreact

Gatsby에 typescript 적용하기

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

frontendreact

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

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

frontendreact

React Next js에서 카카오맵 사용하기

시작하기지도를 표시해주는 어플리케이션을 만들기 위해서는 맵이 필요한데 많은 api중에 카카오 맵 오픈소스api를 사용해보도록 하겠습니다. 개발자계정 로그인카카오맵 개발자 사이트에 접속해서 로그인을 해줍니다. 로그인후 내 어플리케이션을 선택합니다. 어플리케이션을 추가해주도록합니다. 추가한 어플리케이션을 선택하면 대시보드가 나옵니다. 좌측의 플랫폼을 선택합니다

frontendreact

React Ref사용하기

시작하기React에서 엘리먼트로 접근해서 사용하기 위해서는 Ref를 사용하는 것을 권장하고 있습니다.input focus, element 사이즈 측정 등에서 이용합니다. 사용법Ref를 사용하는 여러가지 방법이 있습니다. 다양한 방법을 알아보겠습니다. class에서 사용하기class에서 Ref를 사용하는 방법은 12345678910111213141516171