# RN
[React Native with TS] 타입스크립트로 리액트네이티브 boilder plate 만들기 (2)스택네비게이션 만들기 (React Navigation 5.0+)
이 글은 https://levelup.gitconnected.com/react-native-react-navigation-b27ab272e09b 을 보고 작성되었습니다.여기서는 타입스크립트를 이용하여 아주 기본적인 리액트네이티브 스택네비게이션을 만들어보도록 한
[React Native with TS] 타입스크립트로 리액트네이티브 boilder plate 만들기 (1)리액트 네이티브 앱 Typescript 로 세팅하기
이 글은 https://medium.com/@vdelacou/set-up-react-native-app-with-typescript-6c775e512336 을 보고 작성되었습니다.이번 주 목표는 기존에 JS 로 작성하고 있던 주식앱을 TS 로 마이그레이션 하는
React Native & Firebase & Analytics & FCM & BigQuery 연동하기
React Native & Firebase & Analytics & FCM & BigQuery 연동하기
useLayoutEffect Hooks
RN 토이 프로젝트 구성중 알게 된 "useLayoutEffect" hook리액트 공식문서에서는 아래와 같이 설명한다.이 함수의 시그니처는 useEffect와 동일하긴 한데, 모든 DOM 변경 후에 동기적으로 발생합니다. 이것은 DOM에서 레이아웃을 읽고 동기적으로 리
[Team Project] 2차 프로젝트(KIWI MARKET) - 3
가장 기억 남는 부분은 역시나 게시글 업로드 페이지 이다.아래 코드는 글쓰기 페이지의 이미지 슬라이드 부분이다.기본적인 기능은 카메라 버튼 클릭 시 앨범에서 이미지를 선택할 수 있고,선택된 이미지들은 순서대로 버튼 오른쪽으로 사각형의 이미지로 사용자에게 보이게 된다.X
[Team Project] 2차 프로젝트(KIWI MARKET) - 2
PostItem은 판매글을 업로드 하는 페이지이다.여기서 어려웠던 것은 이미지 파일(URL이 아님..)을 백엔드로 보내는 것 이었는데,그 동안은 이미지를 주고 받을 때, url을 주고 받으며 통신 했지만 이번엔 실제 이미지 파일을 전송해야 해서...
[Team Project] 2차 프로젝트(KIWI MARKET) - 1
2차 팀 프로젝트는 React-Native로 당근마켓을 클론 하기로 했다.아직 React에서도 모르는게 많고 실력도 부족하지만 새로운 것에 도전하는 것은 항상 즐겁다고 생각하는 편이다. 그렇게 시작한 RN.... 하루종일 터미널이 피를 흘린다...ㅠㅠ
RN 빌드 속도 올리기 (reference 모음)
우와 이거 신기하네 미리보기 바로 보인다아아앙마크업 까먹었는데 우측하단이나 그런데 툴바나 미리보기 형식으로 있었으면 좋겠다아아gradle.properties에서 건드려 주면 되는데 해보니까 내 앱은 왜 충돌이 나는걸까 ㅠㅠ설정 설명org.gradle.daemon : 데
[react-native-web 모노레포] - 웹 빌드 환경 구성
웹과 모바일에서 동일한 사용자 경험을 제공하기 위해 단일 React-Native 앱을 작성하고 모바일과 웹 모두 빌드할 수 있는 모노 레포지토리를 구성해보자. 주요 패키지 버전 react : 16.13.1 react-native : 0.63.3 react-nativ
[react-native-web 모노레포] - 공통 앱 작성, 모바일 빌드 환경 구성
리액트 네이티브로 작성된 앱을 웹, 모바일 모두 배포할 수 있는 모노 레포지토리를 구성한다. 구성 환경 typescript: 3.8.4 react : 16.13.1 react-native : 0.63.3 react-native-web : 0.14.8 styled-co
앱 개발의 첫 발
스파르타 코딩 클럽 앱 개발 종합반 2기를 통해 앱 개발에 첫 발을 디뎠습니다. 5주 동안 수강한 후기를 적어볼까 합니다.수강 목적앱개발을 시작하고 싶어서 강의를 찾던 도중 SpartaCodingClub을 발견했습니다. 요즘 트랜드에 맞는 언어와 각종 도구들을 이용하여
React Native UI 개발 시작
현재 앱 출시를 목표로 UX 기획자로 참여하고 있는 프로젝트에서 Figma로 와이어프레임을 시각화하고 필요시에 인터랙션을 연결해서 커뮤니케이션하고 있는데 한계를 느꼈다. 평소에 모바일 프론트앤드 개발에 도전하고 싶었기도 해서 이참에 앱 개발 환경인 react nati
React Native: Animated Scroll Header 구현기
애니메이션을 만들기위한 핵심 워크 플로: Animated.Value를 만들고 애니메이션 구성 요소의 하나 이상의 스타일 속성에 연결한 다음 Animated.timing()을 사용해 애니메이션을 업데이트한다. 스크롤 이벤트 생성하기... 왼쪽 정렬 상태를 만들고 폰트
React-Native) Custom Fonts/ Google Fonts 적용하기
구글 폰트에서 원하는 폰트를 다운받는다. Google Fontsroot 위치에 assets 폴더를 생성하고 assets안에 fonts 폴더를 하나 또 만들어준다.Root에 react-native.config.js 파일을 만들어주고 아래의 코드를 넣는다.assets> f
React-Native) FlatList
RN에서 많은 양의 데이터를 처리할때는 FlatList나 ScrollView 를 주로 사용한다. 화면보다 데이터의 양이 많을 경우 두 태그는 모두 스크롤을 생성한다는 공통점이 있다. 는 데이터를 모두 렌더링하고 화면이 벗어났을 때 스크롤을 생성하기 때문에 데이터가
React Native 사지방에서 사용하기
꼭 사지방이 아니더라도 컴퓨터와 핸드폰에 동일한 인터넷을 사용 불가능할 때 활용 가능합니다. 사지방에서 구름 ide를 이용해서 expo를 통해 React Native를 실행하려고 할 때는 크게 두가지 제약이 있다. 첫번째로는 QR코드를 촬영할 수 없다는 것인데, 이것은