# RN

19개의 포스트
post-thumbnail

[React Native with TS] 타입스크립트로 리액트네이티브 boilder plate 만들기 (2)스택네비게이션 만들기 (React Navigation 5.0+)

이 글은 https://levelup.gitconnected.com/react-native-react-navigation-b27ab272e09b 을 보고 작성되었습니다.여기서는 타입스크립트를 이용하여 아주 기본적인 리액트네이티브 스택네비게이션을 만들어보도록 한

2021년 1월 18일
·
0개의 댓글
post-thumbnail

[React Native with TS] 타입스크립트로 리액트네이티브 boilder plate 만들기 (1)리액트 네이티브 앱 Typescript 로 세팅하기

이 글은 https://medium.com/@vdelacou/set-up-react-native-app-with-typescript-6c775e512336 을 보고 작성되었습니다.이번 주 목표는 기존에 JS 로 작성하고 있던 주식앱을 TS 로 마이그레이션 하는

2021년 1월 17일
·
0개의 댓글
post-thumbnail

React Native & Firebase & Analytics & FCM & BigQuery 연동하기

React Native & Firebase & Analytics & FCM & BigQuery 연동하기

2021년 1월 14일
·
0개의 댓글

useLayoutEffect Hooks

RN 토이 프로젝트 구성중 알게 된 "useLayoutEffect" hook리액트 공식문서에서는 아래와 같이 설명한다.이 함수의 시그니처는 useEffect와 동일하긴 한데, 모든 DOM 변경 후에 동기적으로 발생합니다. 이것은 DOM에서 레이아웃을 읽고 동기적으로 리

2021년 1월 13일
·
0개의 댓글
post-thumbnail

[Team Project] 2차 프로젝트(KIWI MARKET) - 3

가장 기억 남는 부분은 역시나 게시글 업로드 페이지 이다.아래 코드는 글쓰기 페이지의 이미지 슬라이드 부분이다.기본적인 기능은 카메라 버튼 클릭 시 앨범에서 이미지를 선택할 수 있고,선택된 이미지들은 순서대로 버튼 오른쪽으로 사각형의 이미지로 사용자에게 보이게 된다.X

2021년 1월 10일
·
0개의 댓글
post-thumbnail

[Team Project] 2차 프로젝트(KIWI MARKET) - 2

PostItem은 판매글을 업로드 하는 페이지이다.여기서 어려웠던 것은 이미지 파일(URL이 아님..)을 백엔드로 보내는 것 이었는데,그 동안은 이미지를 주고 받을 때, url을 주고 받으며 통신 했지만 이번엔 실제 이미지 파일을 전송해야 해서...

2021년 1월 10일
·
0개의 댓글
post-thumbnail

[Team Project] 2차 프로젝트(KIWI MARKET) - 1

2차 팀 프로젝트는 React-Native로 당근마켓을 클론 하기로 했다.아직 React에서도 모르는게 많고 실력도 부족하지만 새로운 것에 도전하는 것은 항상 즐겁다고 생각하는 편이다. 그렇게 시작한 RN.... 하루종일 터미널이 피를 흘린다...ㅠㅠ

2021년 1월 10일
·
0개의 댓글

RN 빌드 속도 올리기 (reference 모음)

우와 이거 신기하네 미리보기 바로 보인다아아앙마크업 까먹었는데 우측하단이나 그런데 툴바나 미리보기 형식으로 있었으면 좋겠다아아gradle.properties에서 건드려 주면 되는데 해보니까 내 앱은 왜 충돌이 나는걸까 ㅠㅠ설정 설명org.gradle.daemon : 데

2020년 12월 9일
·
0개의 댓글
post-thumbnail

[react-native-web 모노레포] - 웹 빌드 환경 구성

웹과 모바일에서 동일한 사용자 경험을 제공하기 위해 단일 React-Native 앱을 작성하고 모바일과 웹 모두 빌드할 수 있는 모노 레포지토리를 구성해보자. 주요 패키지 버전 react : 16.13.1 react-native : 0.63.3 react-nativ

2020년 12월 5일
·
0개의 댓글
post-thumbnail

[react-native-web 모노레포] - 공통 앱 작성, 모바일 빌드 환경 구성

리액트 네이티브로 작성된 앱을 웹, 모바일 모두 배포할 수 있는 모노 레포지토리를 구성한다. 구성 환경 typescript: 3.8.4 react : 16.13.1 react-native : 0.63.3 react-native-web : 0.14.8 styled-co

2020년 12월 4일
·
0개의 댓글

앱 개발의 첫 발

스파르타 코딩 클럽 앱 개발 종합반 2기를 통해 앱 개발에 첫 발을 디뎠습니다. 5주 동안 수강한 후기를 적어볼까 합니다.수강 목적앱개발을 시작하고 싶어서 강의를 찾던 도중 SpartaCodingClub을 발견했습니다. 요즘 트랜드에 맞는 언어와 각종 도구들을 이용하여

2020년 11월 8일
·
0개의 댓글

React Native UI 개발 시작

현재 앱 출시를 목표로 UX 기획자로 참여하고 있는 프로젝트에서 Figma로 와이어프레임을 시각화하고 필요시에 인터랙션을 연결해서 커뮤니케이션하고 있는데 한계를 느꼈다. 평소에 모바일 프론트앤드 개발에 도전하고 싶었기도 해서 이참에 앱 개발 환경인 react nati

2020년 11월 5일
·
0개의 댓글

React Native: Animated Scroll Header 구현기

애니메이션을 만들기위한 핵심 워크 플로: Animated.Value를 만들고 애니메이션 구성 요소의 하나 이상의 스타일 속성에 연결한 다음 Animated.timing()을 사용해 애니메이션을 업데이트한다. 스크롤 이벤트 생성하기... 왼쪽 정렬 상태를 만들고 폰트

2020년 10월 29일
·
0개의 댓글

[React Native] 나만의 팁

App name 변경

2020년 9월 22일
·
0개의 댓글
post-thumbnail

React-Native) Custom Fonts/ Google Fonts 적용하기

구글 폰트에서 원하는 폰트를 다운받는다. Google Fontsroot 위치에 assets 폴더를 생성하고 assets안에 fonts 폴더를 하나 또 만들어준다.Root에 react-native.config.js 파일을 만들어주고 아래의 코드를 넣는다.assets> f

2020년 9월 5일
·
0개의 댓글
post-thumbnail

React-Native) FlatList

RN에서 많은 양의 데이터를 처리할때는 FlatList나 ScrollView 를 주로 사용한다. 화면보다 데이터의 양이 많을 경우 두 태그는 모두 스크롤을 생성한다는 공통점이 있다. 는 데이터를 모두 렌더링하고 화면이 벗어났을 때 스크롤을 생성하기 때문에 데이터가

2020년 8월 23일
·
0개의 댓글

리액트 네이티브 개발환경 세팅 (Mac / RN CLI QuickStart)

리액트 네이티브 개발환경 세팅

2020년 4월 29일
·
0개의 댓글

리액트 네이티브 정리

리액트 네이티브 정리

2020년 4월 29일
·
0개의 댓글
post-thumbnail

React Native 사지방에서 사용하기

꼭 사지방이 아니더라도 컴퓨터와 핸드폰에 동일한 인터넷을 사용 불가능할 때 활용 가능합니다. 사지방에서 구름 ide를 이용해서 expo를 통해 React Native를 실행하려고 할 때는 크게 두가지 제약이 있다. 첫번째로는 QR코드를 촬영할 수 없다는 것인데, 이것은

2020년 3월 17일
·
2개의 댓글