JiSoo's Devlog

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

크롬 개발자 도구크롬 개발자 도구란 크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다디버깅하고 싶은 페이지 접속 → 메뉴에서 보기 → 개발자 도구or웹페이지에서 마우스 우클릭한 뒤 검사 클릭 웹사이트를 제대로 디버깅하고 싶다면? 시크릿 모드라 불리는 개인정보 보호 모드에서 페이지와 개발자 도구 열기이유는 브라우저에 설치된 각종 확장 프로그램 때문브라우저 확장 프로그램은 웹페이지 방문 시 확장 프로그램의 실행을 위해 전역 변수나 HTML 요소에 실제 웹 애플리케이션이 제공하지 않은 다른 정보를 추가할 수 있다이 정보는 개발자가 추가한 정보도 아니고 다른 사용자에게서는 볼 수 없기에 디버깅에 방해가 될 수 있다개인정보 보호 모드에서는 각종 확장 프로그램이 실행되지 않기..

리액트 개발 도구 react-dev-tools→ 리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어졌고 리액트 웹뿐만 아니라 리액트 네이티브 등 다양한 플랫폼에서도 사용 가능 웹 개발 환경에서 이 개발 도구를 사용하는 가장 편리한 방법은 브라우저 확장 프로그램을 사용하는 것! 리액트 개발 도구 설치크롬, 파이어폭스, 엣지 브라우저를 지원하고 주로 개발하는 브라우저에 설치하면 된다위처럼 리액트 로고가 회색으로 표시되면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이다리액트 로고가 빨간색으로 표시되면 개발 모드인 웹 애플리케이션에 정상적으로 리액트 개발 도구가 접근할 수 있다는 의미이다개발 모드가 아니더라도 실데 프로덕션에 배포돼 있는 웹 애플리케..

상태란 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미웹 애플리케이션에서 상태로 분류될 수 있는 것들 ↓- UI- URL- 폼- 서버에서 가져온 값 tearing은 하나의 상태에 따라 서로 다른 결과물을 사용자에게 보여주는 현상을 말한다 Flux 패턴양방향이 아닌 단방향으로 데이터 흐름을 변경하는 것상태와 그 상태의 변경에 대한 흐름과 방식을 단방향으로 채택한 것이 특징 - 액션 : 어떤 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미- 디스패처 : 액션을 스토어에 보내는 역할, 콜백 함수 형태로 타입과 데이터 모두 스토어에 보낸다- 스토어 : 실제 상태에 따른 값과 상태를 변경할 수 있는 메서드를 가진다- 뷰 : 스토어에서 만들어진 데이..

스택 내비게이터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 설정해 초기에 불러와야 할 경로를 제어해..

싱글 페이지 애플리케이션렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄진다최초에 로딩해야 할 리소스가 커지는 단점이 있지만 한번 로딩되면 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX 제공 가능 전통적인 방식의 애플리케이션과거 서버 사이드에서 작동하던 애플리케이션은 페이지 전환이 발생할 때마다 새롭게 페이지를 요청하고 HTML 페이지를 다운로드해 파싱하는 작업을 거친다 웹페이지의 모든 영역(페이지 렌더링부터 사용자 인터랙션까지)을 담당하며 아우를 수 있는 싱글 페이지 렌더링이 인기를 얻었다과거..

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

함수 컴포넌트가 상태를 사용하거나 클래스 컴포넌트의 생명주기 메서드를 대체하는 등의 작업을 위해 훅이 추가됐다훅은 state, ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들었고 클래스 컴포넌트를 간결하게 작성할 수 있게 했다 useState함수 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해주는 훅import { useState } from 'react'const [state, setState] = useState(초깃값)useState의 인수로는 state의 초깃값을 넘겨준다아무런 값을 넘겨주지 않으면 초깃값은 undefiend반환 값은 배열이고 첫 번째 원소로 state 값 자체, 두 번째 원소인 setState 함수로 state의 값을 변경할 수 있다 함수 컴포넌트는 매번..

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..