JiSoo's Devlog

모바일 기기에서 앱을 실행하고 인증을 하기 위해서는 백엔드 API가 필요→ 사용자가 입력한 이메일 및 비밀번호의 유효성을 백엔드에서 검사해야 하기 때문에 사용자 데이터는 모바일 기기가 아니라 벡엔드에 있는 데이터베이스에 저장되기 때문에 기기에서 작업 수행 불가사용자가 인증 양식을 작성 후 이메일, 비밀번호를 입력하면 크리덴셜이 HTTP 요청과 함께 백엔드 API로 전송되고백엔드에서 해당 크리덴셜의 유효성이 검사된다 사용자가 처음 생성된 경우 → 유효한 이메일 주소인지, 비밀번호가 최소 길이를 충족하는지 확인 후 사용자 생성이미 생성된 사용자의 경우 → 크리덴셜이 올바른지 확인 크리덴셜이 올바르다면 인증 토큰이 생성된다이 토큰은 문자열로 되어있는데 모바일 기기로 다시 전송된다토큰이 중요한 이유는!토큰이 있..

스택 내비게이터npm install @react-navigation/native-stack 하단 탭 패키지 설치npm install @react-navigation/bottom-tabs  import { createNativeStackNavigator } from "@react-navigation/native-stack";const Stack = createNativeStackNavigator();Stack 상수는 두 컴포넌트에 대한 액세스를 제공하는 객체를 보유한다→ 내비게이터 컴포넌트와 화면 등록 컴포넌트   화면 순서를 사용해 ExpensesOverview가 앱이 시작될 때 불러오는 기본 컴포넌트가 되도록 설정initialRouteName 설정해 초기에 불러와야 할 경로를 제어해..

내비게이션이란 여러 화면 간 이동할 수 있도록 해주는 것모바일 앱에서는 URL 대신 버튼을 눌러 한 화면에서 다른 화면으로 이동하거나 이전 화면으로 돌아가는 방식 카테고리들을 출력하기 위해 FlatList 사용항목이 얼마나 많이 포함될지 미리 알 수 없는 동적 목록일 때 FlatList 사용할 수 있다요소를 느리게 렌더링 하기 위해서도 사용 가능고정된 목록에서는 필요 X item.id} />키가 있어야 하는데 키 프로퍼티가 없다면 keyExtractor 함수 설정 필요keyExtractor 함수는 자동으로 item을 매개변수로 받고 FlatList에 의해 렌더링 되는 개별 항목의 키로 사용할 수 있는 값을 반환해야 한다renderItem 프로퍼티로 각 항목에 실행될 함수를 정의해 항목을 렌더링 하는 방법..

maxWidth나 minWidth, maxHeight나 minHeight를 사용해 크기에 따라 너비와 높이가 반응하도록 설정 가능maxWidth를 80%로 설정했다면 최대 80%라는 뜻으로 기기에 따라 차지하는 공간이 달라진다퍼센트 값은 해당 요소를 가진 부모 컨테이너에 대한 퍼센트를 의미한다 Dimensions APIreact-native에 내장된 API로 JSX 코드에서 사용하는 컴포넌트가 아니라 JavaScript 객체라서 styles를 포함한 코드 어디에서나 정보 추출을 위해 사용 가능하다 Dimensions에서 get 메서드를 호출하면 get 메서드가 문자열 타입 인수로서 화면이나 윈도우의 치수를 지니는데iOS는 두 개념이 동일안드로이드에서 화면은 상태 표시줄을 포함한 너비와 높이, 윈도우는 상..

TextInput 컴포넌트는 데이터를 입력할 수 있는 입력 필드 렌더링 리액트 네이티브가 가장 먼저 로딩하는 파일이 App.js 파일이기 때문에 App.js 파일에서 내보낸 컴포넌트가 주요 렌더링 컴포넌트가 된다 커스텀 버튼을 만들려면 리액트 네이티브의 핵심 컴포넌트를 결합하면 된다실제 리액트 네이티브 팀이 버튼을 구축할 때도 소스 코드를 보면 결국 핵심 컴포넌트의 조합으로 만들었다import { View, Text } from "react-native";function PrimaryButton(children) { return ( {children} );}export default PrimaryButton;ResetConfirm 그림자 넣기Android : styles에 el..

스택레이스를 보면 어디에서 에러가 발생했는지 알 수 있다  로그 기록하기console.log를 추가해 애플리케이션의 흐름을 이해하는 데 도움을 받을 수 있다특정 시점에 우리가 변수로 저장한 값을 구체적으로 확인 가능 터미널에서 물음표?를 누르면 npm start 프로세스를 실행하는 중에 이용 가능한 단축키 목록 확인 가능m을 누르면 개발자 메뉴를 토글 할 수 있다iOS에서는 Command+d안드로이드에서는 Ctrl+m개발자 메뉴에서는 새로 고침도 강제할 수 있다자바스크립트를 원격으로 디버그도 가능한데 들어가면 Chrome에서 새 탭이 열리고 Chrome 개발자 도구를 확인 가능하다네트워크 요청, 콘솔도 확인 가능 React 개발자 도구브라우저에 확장 설치가 가능한데 리액트 네이티브에서는 그렇지 않다별도 ..

Text와 View는 React Native의 가장 중요한 내장 컴포넌트로서 JSX 코드에 사용된다네이티브 기기는 브라우저 아니라서 DOM을 가지고 있지 않으니 HTML 요소를 지원하지 않는다 몇 가지 핵심 컴포넌트로 원하는 사용자 인터페이스 구축 가능Button, Image, Text, View 등 React Native의 본질은 내장된 핵심 컴포넌트를 다루는 것전체적인 앱 UI와 UI를 구성하는 커스텀 컴포넌트는 핵심 컴포넌트를 합쳐서 만드는 것React Native에 의해 핵심 컴포넌트가 네이티브 UI 요소로 바뀐다핵심 컴포넌트는 JSX 코드에서 합쳐서 직접 컴포넌트를 만들고 사용자 인터페이스를 구축한다 React Native에는 CSS가 없다!브라우저가 아니기 때문에 CSS 코드 작성 불가 → 대..

사용한 JSX 요소는 각 플랫폼의 네이티브 요소로 컴파일된다 컴포넌트인 UI 요소는 컴파일되지만 JavaScript에서 작성한 논리는 컴파일되지 않는다 간단한 자바스크립트 프로세스를 구축하고 있는 네이티브 앱의 일부로 만들어 자동으로 프로세스를 관리해 네이티브 플랫폼과 상호작용할 수 있게 한다 CLI는 Command Line Interface 명령 행 인터페이스 Expo CLI와 React Native CLI 두 툴 모두 실질적으로 앱을 구축하고 배포 가능한 패키지로 만들 수 있다 Expo CLI → '정리된 앱 개발' 워크플로우로 작업 가능 프로젝트 생성이 수월하고 코드 작성이 비교적 쉬우며 카메라 등의 기능 활용이 쉬워진다 언제든 Expo 방식을 중지해도 된다 React Native CLI → Exp..

expo가 react native web이라는 프로젝트하고 통합되어 있기 때문에 iOS, 안드로이드뿐만 아니라 web에서도 실행 가능 react native web에서는 View를 div로 변경 alert는 react native web에서 작동 X splash screen은 앱이 로드되기 전에 보이는 스크린 혹은 이미지 "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#000000" }, confirm은 브라우저 API인데 유저에게 메시지를 보여주고 유저가 confirm 했는지 안 했는지 true 혹은 false 값으로 반환 if (Platform.OS === "web") { const ok ..

$ npx create-expo-app --template What is your app named? 앱이름 react native는 css가 가지지 않은 속성을 가진다 ex) padding 세로, 가로로 주기 paddingHorizontal: 20, paddingVertical: 20 TouchableOpacity는 누른 요소를 약간 투명해지게 만든다 // 투명도 조절 가능 TouchableHighlight는 요소 클릭하면 배경색이 바뀌게 해 준다 onPress는 유저가 Touchable 눌렀을 때 실행되는 이벤트 onPressOut은 손가락이 영역 벗어날 때 실행 underlayColor로 배경색 지정 TouchableWithoutFeedback은 화면의 가장 위에서 일어나는 탭 이벤트 listen ..