시우진석

오늘은 모달을 사용해봅시다. 모달 · 네이티브 반응 (reactnative.dev) Modal · React NativeThe Modal component is a basic way to present content above an enclosing view.reactnative.dev여기에 잘 나와있어용! 저는 따로 빼서 base모달을 만들어뒀습니다, import { View, Modal, StyleSheet } from "react-native";import React from "react";interface BaseModalProps { isOpen: boolean; onClose: () => void; children?: React.ReactNode;}export default functio..

자 오늘은 저번에 깜박한 회원가입 성공 후, 이메일 인증을 구현해봤습니다! 우선 저는 중복되는게 보여서 Form에 사용되는 styles 코드를 따로 빼서 아래처럼 파일로 옮겨서 사용했습니다.import { StyleSheet } from "react-native";import { BASE_COLOR } from "../constants/color";export const formStyle = StyleSheet.create({ form: { flex: 3, justifyContent: "flex-start", }, submitButton: { backgroundColor: BASE_COLOR.LIGHT, padding: 20, borderRadius: 15, alig..

오늘은 좀 뻘짓을 많이 했네요 ㅠㅠ머리가 안돌아가는 날도 있는거죠. .ㅎㅎ 자 오늘은 로비를 간단하게만 만들어봤습니다. 이런 느낌으로 해봅시다. 우선 헤더를 만들었어요!일단 헤더에는 아이콘 박스 까지를 헤더로 잡았어요. 아이콘이 들어갈 이미지가 필요할거예요. 전 일단 gpt에게 부탁해서 만들어봤어용!그리고 이미지를 사용하려면 expo-image 설치해줘야 한다네요! 같이 설치해봅시다.npm i expo-image 사용법은 아래 사이트에 잘 나와있습니다. Image - Expo Documentation ImageA cross-platform and performant React component that loads and renders images.docs.expo.dev 전체 코드를 보여드릴게요!impo..

오늘은 어제 만든 로그인을 테스트해보겠습니다. axios로 로컬로 백엔드랑 연결해볼게요 우선 axios를 설치합니다. npm i axios 일단 지금은 간단하게만 axiosInstance를 만들어볼게요 import axios from "axios";export const axiosInstance = axios.create({ baseURL: "http://localhost:3000", headers: { "Content-Type": "application/json", },});axiosInstance.interceptors.request.use(async (config) => { return config;});axiosInstance.interceptors.response.use(async ..

오늘은 간단하게 디자인중입니다. 디자인에 자신이 없기 때문에 인터넷의 도움을 받아봅시다. 우선 아래 링크에서 원하는 색상조합을 골랐습니다. 색상 팔레트: #850F8D #C738BD #E49BFF #F8F9D7 - 컬러 헌트 (colorhunt.co) Color Palette: #850F8D #C738BD #E49BFF #F8F9D7 - Color HuntDiscover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.colorhunt.co  다음으로는 아래 사이트에서 우주관련된 이미지를 받아왔습니다. 20+ 우주 사진 및 이미지 [HD] | Unsplash에서..

오늘은 이력서 수정한다고 시간을 많이 사용해서 간단하게 expo 설치 및 router 사용해보기로 했습니다~ 앱을 만드는데 react-router-dom 처럼 사용할 수 있지 않을까 해서 찾아보니 Expo router가 있다고 하네요! 우선 expo먼저 설치해줍니다. npx create-expo-app@latest --template 저는 Blank (typescript) 로 설치했습니다. expo go 앱을 통해 테스트 해봅니다. npm run start 이제 라우터를 설치해봅시다. 참고로 아래 링크에 잘 나와 있습니다! Install Expo Router - Expo Documentation Install Expo RouterLearn how to quickly get started by creati..

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com) GitHub - SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용노마드 초보 RN 공부용. Contribute to SiWooJinSeok/nomad-RN development by creating an account on GitHub.github.com 3.5강AsyncStorage 설치하기npx expo install @react-native-async-storage/async-storage임포트 하기import AsyncStorage from "@react-native-async-storage/async-storage";저장하기AsyncStorage.setItem(STORGE_KEY, JSON...

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)3.1강TouchableOpacity 사용해보기클릭시 Opacity 활성화해서 애니메이션처럼 투명해지게 만듦사용하기import { TouchableOpacity } from "react-native";// ...// ...activeOpacity 투명도를 정할 수 있는 옵션TouchableHighlight 사용해보기옵션 없이 사용 시 아무동작도 하지 않음사용하기import { TouchableHighlight } from "react-native";// ...// ...onPress 옵션눌렀을 때 동작하게 하는 함수사용하지 않으면 눌러도 반응이 없음!underlayColor 옵션눌렸을 때 버튼의 배경색을 바꿔주는 옵션..

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)2.7강expo-location 설치하기npm i expo-location임포트하기import * as Location from "expo-location";Location.requestForegroundPermissionsAsync() 사용해보기const premission = await Location.requestForegroundPermissionsAsync();console.log(premission);// 출력 {"android": {"accuracy": "fine", "scope": "fine"}, "canAskAgain": true, "expires": "never", "granted": true, "s..

SiWooJinSeok/nomad-RN: 노마드 초보 RN 공부용 (github.com)설치하기프로젝트 설치npx create-expo-app@latest . --template 옵션 Blank 선택추가 라이브러리 설치 (웹으로도 실행 가능)npx expo install react-native-web react-dom @expo/metro-runtime 시작하기Expo 회원가입Expo 로그인npx expo login실행npm run startApp.js 수정Expo go 어플에서 연결 시 무한 로딩구글을 통해 원인 분석핸드폰 껐다가 키기노트북, 핸드폰 와이파이 같게 하기와이파이 속성에서 개인으로 수정앱 설정에 가서 expo go 앱 권한 다 없애기다른 앱 위에 표시 키기(이미 켜져 있으면 끄고 다시 키기..