2일차 | 엑스포가 뭐야??

도망가자!

웹앱 만들기 by 엑스포

---

엑스포는 웹앱을 만들때 앱 화면을 보여주는 도구다. 

화면을 JS로 구성하기 때문에

단순히 개발자 도구로 화면을 미리 볼 수 없다는 점을 해결한다. 

 

vscode에 코드를 작성하고 나서 연동하면 

핸트폰 화면에 이렇게 보인다. 

 

혼란하다 혼란해

이런 식으로 보이게 되는 것이다 빠밤

 

이제 플렉스를 활용해서 앱의 모양을 갖춰보자!
플렉스는 css에서 배운 내용과 동일하다. 

 

(좌) 기본 분석 (가운데) 연습용 화면 (우) 내가 분석한 내용

화면의 구조를 파악하면 

코드를 짜는 것이 용이해진다!

 

위의 캡처 화면을 보고 

직접 화면을 만들어봅시다

 

(좌) 공부 내용 (우) 응용 내용

제 스마트폰 화면을 캡쳐했습니다

화면 사진을 보고 만들어봤고 

오른쪽은 집게리아 어플을 만들어봤습니다 캬캬

 

이제 이번주 숙제를 하러 가볼까요!

 

 

얼추 비슷하게 만든 것 같습니다 

그럼 이번주 주차도 끝 

✧o(*￣▽￣*)ブ

 

리엑트 앱 기본 코드 

import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
export default function App() {
  console.disableYellowBox = true;
  //return 구문 밖에서는 슬래시 두개 방식으로 주석
  return ()

}

const styles = StyleSheet.create({})

 

알게된 것

---

•  {/* */}  js문법 안에서의 주석
• 엑스포 실행하는 법 vscode 터미널에서 expo start 입력 

---

•  alignSelf: "center"  플렉스의 영역 밖이더라도 스스로 위치를 조정
• <TouchableOpacity> 가로 스크롤 영역 만들기 (모든 스크롤안 버튼에 태그를 적용한다.)
• numberOfLines={3} 3줄 이상의 글인 경우 ... 으로 대체한다.

엑스포 설치하기 참고 2-4
버튼 만들기 참고 2-8
flex  참고 2-10
JSON 쓰는 방법 참고 2-13
화면에 반복문 적용 방법 참고 2-14

 

📌 TouchableOpacity (박스 클릭에 팝업창)

<TouchableOpacity style={styles.textContainer} onPress={customAlert}> <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text> </TouchableOpacity>

📌 button (그냥 버튼)

<Button style={styles.buttonStyle} title="버튼입니다 " color="#FF0000" onPress={()=>{ Alert.alert('팝업 알람입니다!!') }} />

---

참고 자료

https://m.blog.naver.com/hellonami/30189427178

색상표 색상코드표