[앱개발 종합반] 2주차 개발일지

1. 배운 내용

expo-cli 설치하고 expo 프로젝트 생성하기

앱 화면 만들기

앱개발에서 자주 사용하는 문법 정리하기

 

2. 새로 알게 된 내용

1) expo-cli 설치 경로와 실행 경로가 상이한 점 해결

https://dev-jejecrunch.tistory.com/93

Windows에서 npm 패키지 전역 설치 경로 지정해주기

 

2) 노란색 경고창 없애기

export하는 함수 내에 return 전에 아래 코드 작성해주면 자동으로 안보이게 해준다.

console.disableYellowBox=true;

 

3) JSX 문법

JSX 문법 밖에서의 주석은 자바 주석으로 해결한다. 안에서의 주석은 {/** */}이나 {/* */} 형태.

vscode에서 단축키로 주석 처리하는 것이 좋다. 윈도우는 ctrl+/, 맥은 command+/.

 

4) Button과 TouchableOpacity의 차이

TouchableOpacity의 경우는 영역을 눌렀을 때 onPress를 활용할 수 있는 엘리먼트.

보통 Button으로 구현하기 어려운 경우 Text, Image 등으로 구현하고 TouchableOpacity로 감싸서 onPress로 해결하는 경우가 많음.

 

5) flex를 활용하여 컨텐츠의 위치 정하기

사실 알고 있었는데 하도 안써서 까먹고 있었다. 다시 강의 내용을 들으니까 생각났음.

flex로 화면에 보이는 비율 지정해주고, flexDirection으로 세로로 할지 가로로 할지 정하기.

flex로 지정해주면 자식 태그들도 flex를 지정해주어야 화면에 보임.

flexDirection은 column(세로)가 기본. row(가로)는 따로 지정해주어야 함.

justifyContent는 flexDirection과 동일한 방향으로 정렬하는 속성. space-between과 space-around 값도 있지만 space-between의 경우는 많이 사용되는 듯.

alignItems는 flexDirection과 다른 방향으로 정렬하는 속성.

 

6) 모듈 시스템 활용하기

json 파일로 데이터를 가져와서 map 이용해서 JSX 안에 반복문 적용하기.

{ 
  tip.map((content,i)=>{
    return (
    <View style={styles.card} key={i}>
      <Image style={styles.cardImage} source={{uri:content.image}}/>
      <View style={styles.cardText}>
        <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
        <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
        <Text style={styles.cardDate}>{content.date}</Text>
      </View>
    </View>)
  })
}

 

7) 여러 페이지를 관리하는 방법

pages 폴더 만들고 pages 폴더 안에서 여러 페이지들을 만든다. App.js에서는 그 폴더의 페이지들을 불러와서 <~~/> 태그로 화면에 보여준다.

 

3. 느낀 점

5주차간 앱을 완성시키는 게 이 수업의 목표라서 그런지 확실하게 이번 주차도 엄청 빡센 내용이었던 것 같다. 강의 갯수도 15개로 많았고, 심지어 중간에 같이 코딩하는 수업이 있어서 31분짜리 강의도 있었음. 그래도 팁이 될 만한 내용은 많이 있어서 좋았다. 다음 주차도 화이팅할 수 있었으면 !