스파르타 코딩클럽

2022.01.03

dev_swH 2022. 1. 3. 21:01

FAQ에서 가져온 내용

 

Text 태그 안에 Text 태그들이 있으면 개행(한줄 띄어쓰기)이 되지 않는다.

View 태그 안에 있어야 내부 Text 태그들이 각각의 성격을 가지게 된다.

 

<Text 태그 내부의 텍스트에서 줄바꿈하는 방법>

<ˇˇ>
Hi~{"\\n"}
this is a test message.
</Text>

또는

<Text>{`
Hi~
this is a test message.
`}</Text>

 

[Q] import 시에 그냥 작성하는 것과 {} 처럼 괄호에 감싸서 import 하는 것은 어떤 차이가 있나요? / export default 와 export 는 어떤 차이가 있나요?

 

[A] export와 import는 자바스크립트에서 파일을 여러 개로 쪼개는 방식에서 출발이 되었습니다.

크게 두 가지 방법으로 사용하실 수 있습니다.

export default 는 import ... 와 대응이 됩니다. 아래처럼 사용을 할 수 있습니다.

export default function First() {
  return 42;
};
import First from "./First.js";

export 는 import { ... } 와 대응이 됩니다. 아래처럼 사용을 할 수 있습니다.

export function First() {
  return 42;
};
import { First } from "./First.js";

그렇다면 왜 App.js에서는 첫 번째 방식인 export default function App() 으로 정의를 할까요? Expo도 결국은 자바스크립트 프로그램이므로 모듈을 import 해서 사용합니다. 그것이 App.js 으로 고정이 되어 있는 것이고요. Expo가 import 해서 사용하려면 이제 App.js 에서 export 를 해야지 사용을 할 수 있는 것입니다.

 

----------------------------------------------------------------------------------------------------------------------------

 

숙제로 열심히 코딩 짜고 있는데

방금 전까지 멀쩡하던 게 갑자기 앞부분에서 괄호가 안 맞는다면서 오류가 났다...

(기존에 한 거나 강사님 코드랑 비교해봐도 똑같았다 답답해서 복붙도 해봄 대체 왜??????????????

괄호도 막상 클릭해보면 다 짝 맞춰서 들어가있는데 도대체 왜 빨간줄이 뜨면서 오류가 난 건지 여전히 미스테리.)

 

그래서 결국 하던 중간에 싹 지우고 처음부터 다시 했다ㅠㅠ....

 

어찌저찌해서 만들기 성공...

하면 할수록 (쉽다는 얘기는 절대 아닌데) 난이도보다도

품이 많이 들어가는 작업이라는 생각이 들기 시작했다.

익숙해지면 빨라지겠지! 소,대문자 괄호 콜론 등호 이런 것들도 외워지겠고...

기능이랑 용어 외우는 것도 어렵지만 솔직히 이런 게 제일 헷갈려ㅠㅠ

 

여하튼 오늘의 숙제

글씨가 왜 이렇게 크냐 폰으로 볼 때는 몰랐는데;

 

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

const styles = StyleSheet.create ({
    container: {
        flex: 1,
        backgroundColor: '#323164',
        alignItems: 'center'
    },
    main_title: {
        color: '#fff',
        fontSize: 27,
        fontWeight: '700',
        marginTop: 70,
        marginBottom: 50,
        marginHorizontal: 18
       //강사님은 이 부분을 margin이 아니라 padding을 쓰셨는데, container 안에 main_title이 있기 때문에
          안쪽 여백을 준 거라고 하셨다.
    },
    middle_container: {
        width: 320,
        height: 550,
        backgroundColor: '#fff',
        alignItems: 'center',
        borderRadius: 40
       //강사님은 justifyContent: "center"도 설정하셨다. 이게 세로 가운데정렬이고, alignItems는 가로 가운데정렬인 것.
         나는 그냥 다 여백으로 밀어버렸는데 이런 방법이.....
    },
    about_image: {
        width: 150,
        height: 150,
        borderRadius: 40,
        marginTop: 50
    },
    middle_text: {
        fontSize: 25,
        fontWeight: '700',
        textAlign: 'center',
        marginTop: 10
    },
    desc: {
        textAlign: 'center',
        fontSize: 20,
        marginTop: 25,
        fontWeight: '700'
    },
    button: {
        backgroundColor: '#FFCC66',
        marginTop: 30,
        padding: 25,
        borderRadius: 20
    },
    button_text: {
        color: '#fff',
        fontWeight: '700',
        fontSize: 15
    }


}

)

export default function AboutPage() {
    return (
        <View style={styles.container}>
            <Text style={styles.main_title}>HI! 스파르타코딩 앱개발반에 오신 것을 환영합니다</Text>
           
            <View style={styles.middle_container}>
                <Text style={styles.middle_text}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
                <Text style={styles.desc}>
                    꼭 완주하셔서 꼭 여러분 것으로 만들어가시길 바랍니다            
                </Text>
                <TouchableOpacity style={styles.button}>
                    <Text style={styles.button_text}>여러분의 인스타계정</Text>
                </TouchableOpacity>

            </View>
        </View>
    )
}

 

해설 강의를 들은 소감: padding도 많이 활용하자......

'스파르타 코딩클럽' 카테고리의 다른 글

2022.01.12~13  (0) 2022.01.12
2022.01.07  (0) 2022.01.07
2022.01.06  (0) 2022.01.06
2022.01.05  (0) 2022.01.05
2022.01.02  (0) 2022.01.02
2022.01.01  (0) 2022.01.01
2021.12.31  (0) 2021.12.31
2021.12.30  (0) 2021.12.30