JiSoo's Devlog

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

JSXXML과 유사한 내장형 구문으로 자바스크립트 표준의 일부는 아니다반드시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환된다JSX가 주로 사용되는 곳은 리액트 내부에서 반환하는 html과 자바스크립트 코드이지만 한정돼 있는 것은 X ◦ JSXElementJSX를 구성하는 가장 기본 요소로 HTML의 요소와 비슷한 역할JSXElement가 되기 위해 JSXOpeningElement, JSXClosingElement, JSXSelfClosingElement, JSXFragment 중 하나여야 한다JSXElementName은 JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다// JSXIdentifierfunction Valid1() { retur..

스택레이스를 보면 어디에서 에러가 발생했는지 알 수 있다  로그 기록하기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..

package.json 초기화 npm init -y typescript 설치 npm i -D typescript tsconfig.json 파일 만들기 code tsconfig.json tsconfig.json 파일이 있으면 vs code는 우리가 타입스크립트로 작업한다는 것을 즉시 알게 된다 { "include":[ "src" ] } include 배열에는 자바스크립트로 컴파일하고 싶은 모든 디렉터리 넣기 -> 타입스크립트가 src의 모든 파일을 확인한다는 것을 의미 compilerOptions에서 outDir라는 키를 만들어주는데 이 키는 자바스크립트 파일이 생성될 디렉터리를 저장한다 타입스크립트는 컴파일러니까 index.ts 같은 파일들을 일반적인 자바스크립트로 컴파일시켜준다 { "include": ..

타입스크립트에서는 파라미터들을 써주기만 하면 알아서 constructor 함수를 만들어 준다 필드의 보호 등급, 이름, 타입만 써주면 된다 private 키워드는 오로지 타입스크립트가 우리를 보호해 주기 위해서만 사용한다 abstract class User { constructor ( private firstName:string, private lastName:string, public nickname:string ) {} getFullName() { return `${this.firstName} ${this.lastName}` } } class Player extends User { } const jisoo = new Player("jisoo", "lim", "지수"); ❌ jisoo.firstName..

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