앱개발 2주차 개발일지 [스파르타 코딩클럽]

2주차 강의자료 링크 : https://teamsparta.notion.site/2-76d90642d0ec4eeb8fdee1b4c7e3379d

 

[ 2주차 수업목표 & 목차 ] 

 

 

---

[ 앱개발 준비 : expo 실행하기 ] 

 

---

 [ 앱화면 만들기 : JSX 문법 ] 

---

[앱 화면 만들기] JSX 기본 문법

---

[앱 화면 만들기] View, Text, ScrollView, SafeAreaView, Button, TouchableOpacity, Image

 

- view : 화면의 레이아웃 잡아주는 태그. 

- text : 글자 쓰려면 text태그 안에다가 사용해야함.

- scrollview : 앱화면을 벗어나는 영역의 경우 scrollview태그를 사용하면 스크롤이 가능해지면서 모든 내용을 볼 수 있음

- safeareaview : SafeAreaView의 목적은 장치의 안전 영역 경계 안에서 컨텐츠를 렌더링하는 것이다. iOS 11 이상이 설치된 아이폰에만 적용된다. SafeAreaView는 중첩된 컨텐츠를 렌더링하고 탐색 표시줄, 탭 표시줄, 툴바, 기타 상위 뷰에서 다루지 않는 뷰 부분을 반영하도록 패딩을 자동 적용한다. 가장 중요한 것은 SafeArea의 패딩이 둥근 모서리나 카메라 노치(아이폰 13의 센서 하우징 영역) 같은 화면의 물리적 한계를 반영한다는 것이다

근데 나는 안드로이드 폰 사용해서 저태그 써봤자 별 차이 안나타남.

 

 

 

 

 

 

 

- button 

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

1. title : 버튼안에 글자 

2. onpress : 버튼눌렀을때 작동하는 장치 나타내는 코드

--> 이러한 각각의 코드들은 내 머릿속에서 작성하는것이아니라 공식문서 보고 복사하고 수정하면서 만드는 것임.(공식문서 사이트 : https://reactnative.dev/docs/button )

 

- TouchableOpacity

import React from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Alert } from 'react-native';

export default function App() {
  const customAlert = () => {
    Alert.alert("TouchableOpacity에도 onPress 속성이 있습니다")
  }
  return (
    <ScrollView style={styles.container}>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    borderColor:'#000',
    borderWidth:1,
    borderRadius:10,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  }
});

- image

두 가지 방식이 있습니다. assets 폴더에 있는 이미지를 가져와서 사용하는 방법과 (import), 외부 이미지 링크를 넣어서 사용하는 방식입니다(uri).

import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
			{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
      <Image 
        source={favicon}
				// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"repeat"}
        style={styles.imageStyle}
      />
    </View>
  );
}

resizemode : 가져온 이미지를 화면에 어떻게 표현할껀지 알려줌. repeat는 해당이미지를 화면에 반복해서 채워넣는 방식이고, cover와 contain의 방식도 존재.

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
			{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
      <Image 
        source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
				// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"cover"}
        style={styles.imageStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    //혹시 미리 궁금하신 분들을 위해 언급하자면,
    //justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
    justifyContent:"center",
    alignContent:"center"
  },
  imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  }
});

---

[앱 화면 만들기] 구성한 화면 꾸미기, Styles

---

[앱 화면 만들기] 콘텐츠의 위치: Flex

- flexDirection : "row"는 좌우정렬, "column"은 상하정렬

- justifycontent: flex-start, center, flex-end, space-between, space-around 속성을 가짐. 기본정렬베이스는 상하정렬임. 좌우정렬로 하고싶으면 flexDirection: "row"를 추가한뒤 작성해야함.

 

 

 

 

 

 

 

 

 

 

 

 

 

- alignItems: flex-start, center, flex-end, stretch 속성을 가짐. 얘의 기본정렬베이스는 좌우정렬임. flexDirection: "row"를하면 상하로 정렬됨.

 

 

 

 

 

 

 

 

 

 

 

 

---

[앱 화면 만들기] 메인화면 꾸미기

[ 라이브러리 임포트 ]

import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

 

[기본 함수 골격]

export default function App() {
  return ()

}

const styles = StyleSheet.create({})

* image태그는 style지정해줄때 width와 height를 설정해주지 않으면 이미지가 안뜸.

---