JiSoo's Devlog

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

자바스크립트의 데이터 타입 ● 원시 타입 : 객체가 아닌 모든 타입으로 메서드를 갖지 않는다undefined : 선언 후 값 할당 Xnull : 명시적으로 비어있음을 나타내는 값, typeof로 확인 시 object 반환Boolean: 참 거짓, 조건문에서 truthy, falsy 값 존재  falsy → false, NaN, null, undefined, 0, -0, "", '', ``  truthy → if (1){ }Number : 모든 숫자, 진수별로 별도 데이터 타입 제공 XBigInt : number의 한계를 넘은 더 큰 숫자 저장String : 텍스트 타입(작은따옴표, 큰따옴표, 백틱)  → 템플릿 리터럴은 같은 줄 바꿈 가능, 문자열 내부에 표현식 작성 가능  → 문자열이 원시 타입이라 한..

react native는 웹사이트가 아니기 때문에 html X -> div 쓸 수 없다 View는 container ->div 대신 View를 사용하기 때문에 항상 import 해줘야 한다 react native에 있는 모든 text는 text component에 들어가야 한다 Hello! I'm jisoo~~ 스타일 적용 시 웹에서 사용하던 모든 것을 사용할 수는 없다 const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ↑ StyleSheet.create는 object를 생성하는 데 사용 Styles object..