[スパルタ]アプリケーション開発2週間コメント

74923 ワード

スパルタコードクラブアプリケーション開発総合クラス第2週アプリケーション開発準備
基本的なjavascript構文と使い方の1週間前以降、本格的にアプリケーション開発の準備を始め、アプリケーション画面の作成2週目を開始します.
今週のカタログ

反応本機&Expo

実行

Expo

JSX基本文法

アプリケーション画面実装

モジュールと繰り返し文、条件文

作業説明と説明

こうして簡単にカタログを整理してみました.

01.反応本機&Expo

はんのう
ReactNativeは、1つのJavaScript言語だけでアンドロイド、iOSアプリケーションの2つのアプリケーションを作成できるライブラリです.
ただし、反応式本体のみを使用すると、Android、iOSそれぞれのフォルダにアクセスして直接コードに触れる必要がある場合があります.
したがって,他の開発言語がわからなくても,本アプリケーションに反応する開発を支援するツールが存在する.

Expo
反応型アプリケーションを開発する際には、コードに触れる必要がある場合のほとんどのツールに触れないようにすることができます.

インストールプロセス
これは私がREACTION NATEVを勉強している間によく疑念を抱く部分です.多くのブログや公式サイトから分かるように、npmと言う人もいれば、npxと言う人もいれば、万博のたびに命令の意味を知らないと言う人もいますが、ダウンロードするだけで、後で混同しません.
< Node & NPM >
JavaScriptの「ギフトボックス」を想像することができます.Node.jsでjavascript開発環境を構築し、NPMで必要なjavaスクリプトアプリケーション開発ツールをインポートします.
👉 インストール
< Yarn >
npmよりも簡単で迅速にjavascriptパッケージを管理できるjavascriptパッケージマネージャツールを使用して、javascriptツールをいつでもインストールできます.(npmにインストール)
👉 JavaScriptの効率的なインストール
< Expo >
アプリケーションを生成し、必要なアプリケーション開発ツールのコマンドツールをインストールします.端末でExpoコマンドを使用できます.プロジェクトを簡単に作成、実行、導入できます.(npmにインストール)
👉 アプリケーション開発に必要な万博ツールボックス
インストールが完了したら、Expoに参加してアカウントを作成します.万博自体がサービスなので、管理と配布を支援するため、私のローカルコンピュータに参加して接続する必要があります.

02.Expoの起動

デスクトップにフォルダを作成し、vscodeで開きます.

expo init 프로젝트명 // 프로젝트 생성

次に、目的のタイプのアプリケーションを選択します.

cd 프로젝트명
expo start

作成が完了したら、適切なフォルダに移動してアプリケーションを実行します.
ブラウザが自動的に開き、サーバが開きます.これで生成されたアプリケーションはExpo goアプリケーションで確認できます.

(この場合、PCとスマートフォンを開発するwifiは同じでなければなりません)

これまでの過程をまとめる

インストール

Expoコマンド

ローカル設定Expoアカウント

万博initコマンド生成基本アプリケーション

エキスポ起動Expoアプリ

携帯電話にインストールされているExpo Goアプリケーションを使用して、Expoアプリケーション

を実行します.

03.JSX基本文法

App.jsはJSX構文で描画し、準備した画面に戻ります.
function App関数がJSXコードを返すと思ったら、Expoが画面に描画するので簡単です.
開発者はレンダリングと呼ばれます.
また,ラベル領域も開発者のように「要素」と呼ぶ.

基礎JSX文法原則
原則すべてのタグはreactic-native(ライブラリ)から取り出して使用する必要があります.import文を上に明記するという意味です.
原則タグを開く構造と閉じる構造は、それぞれのタグに書きます.( 詳細については、「文書」を参照してください。 )
原則各ラベルには、囲まれたトップレベルのラベルが必要です.
原則JSXコードをレンダリングするときは、かっこを付けます.
原則JSXコード内は{**},外用//でコメント処理を行う.

基本ラベル
簡単なラベルは言及するだけで、混同した属性や整理したいものだけを整理します.
:領域を位置決めするためのタグ.スタイルシートを使用して領域をスケールします.
:文章を書くためのタグ.
:アプリケーション画面以外の要素にスクロールするタグ.

スタイルのプロパティ
スタイルシート:タグにスタイルを提供する機能
styleSheet.create->私はあなたに服を着て、たんすを全部作ったコードをあげます.
flex:コンテンツの位置と領域のレイアウトを決定します.
flexDirection:領域の方向を指定します.defaultはcolumnで、rowに設定できます.
justifyContent:flexDirectionに位置するプロパティ.

alignItems:flexDirectionに垂直に配置されたプロパティ.

04.アプリケーション画面実装

実習

作成する画面(左)と作成する画面(右)

正確なサイズやピクセルは教えられず、スクリーンショットで実現されるため、サイズ、色、レイアウトが少し異なります.全体構成が似ているだけだ.

import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView } from 'react-native';
export default function App() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>나만의 꿀팁</Text>
            <Image
                style={styles.image}
                resizeMode={'cover'}
                // overflow={'hidden'}
                source={{
                    uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c',
                }}
            />
            <ScrollView horizontal={true} style={styles.scroll}>
                <TouchableOpacity style={styles.firstButton}>
                    <Text style={styles.text}>생활</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.secondButton}>
                    <Text style={styles.text}>제테크</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.thirdButton}>
                    <Text style={styles.text}>반려견</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.forthButton}>
                    <Text style={styles.text}>꿀팁 찜</Text>
                </TouchableOpacity>
            </ScrollView>
            <View style={{ flexDirection: 'row' }}>
                <Image
                    style={styles.pizza}
                    source={{
                        uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3',
                    }}
                />
                <TouchableOpacity style={{ width: '70%' }}>
                    <Text style={{ fontWeight: 'bold', fontSize: 18 }}>먹다 남은 피자를 촉촉하게!</Text>
                    <Text numberOfLines={3}>
                        먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지
                        안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고,
                        피자에 촉촉함을 더해줍니다.
                    </Text>
                    <Text style={{ color: 'grey', fontSize: 9 }}>2020.09.09</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        // height: '100%',
        marginHorizontal: 20,
        marginVertical: 50,
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    image: {
        width: '100%',
        height: '35%',
        borderRadius: 10,
        overflow: 'hidden',
        marginVertical: 20,
    },
    scroll: {
        flexDirection: 'row',
        height: '1%',
        // alignContent: 'center',
    },
    firstButton: {
        margin: 5,
        width: 100,
        height: 50,
        backgroundColor: '#ffe699',
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    secondButton: {
        margin: 5,
        width: 100,
        height: 50,
        backgroundColor: '#ffb399',
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    thirdButton: {
        margin: 5,
        width: 100,
        height: 50,
        backgroundColor: '#99ffb3',
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    forthButton: {
        margin: 5,
        width: 100,
        height: 50,
        backgroundColor: '#ff9999',
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'white',
    },
    pizza: {
        width: 90,
        height: 80,
        borderRadius: 10,
        marginRight: 10,
    },
});

コード再実装&再パッケージ

基本コード構造

覚えておきたい

alignItems、justifyContentを使用して中央に並べ替える場合は、flexプロパティを使用する場合にのみ使用できます.したがって、flexを使用して中央揃えをしたくない場合はalignSelfを使用します.

領域を装飾または実装したい場合は、borderWidth:1に設定し、実装が完了した後に削除する習慣を身につけてください.

修正コード

トップレベルタグをスクロールビューに変更して、ページ

全体をスクロールします.
最初に作成したコードは、最上位タグでサイズを調整し、各要素で指定するように変更されました.

テキストを正確にタッチ不透明度の中心に配置するために.
alignItems:center、justifyContent:[center]と書かれており、親ラベルをpaddingに簡単に変更し、textAlign:[center]を使用することができます.

テキストラベルに従ってスタイルを適用しますが、統一された部分もあるので、テキストラベル全体をほぼ1回バンドルします.(この場合、NumberOfLinesは適用されません)

flexを使用して、

ピザ画像とテキストの割合を1:3に設定します.

最終完了コード

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 (
        <ScrollView style={styles.container}>
            <Text style={styles.title}>나만의 꿀팁</Text>
            <Image style={styles.mainImage} source={main} />
            <ScrollView horizontal={true} style={styles.middleContainer}>
                <TouchableOpacity style={styles.middleButton01}>
                    <Text style={styles.text}>생활</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.middleButton02}>
                    <Text style={styles.text}>재테크</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.middleButton03}>
                    <Text style={styles.text}>반려견</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.middleButton04}>
                    <Text style={styles.text}>꿀팁 찜</Text>
                </TouchableOpacity>
            </ScrollView>
            <View style={styles.cardContainer}>
                <View style={styles.card}>
                    <Image
                        style={styles.cardImage}
                        source={{
                            uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3',
                        }}
                    />
                    <View style={styles.cardText}>
                        <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
                        <Text style={styles.cardDesc} numberOfLines={3}>
                            먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지
                            안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고,
                            피자에 촉촉함을 더해줍니다.
                        </Text>
                        <Text style={styles.cardDate}>2020.09.09</Text>
                    </View>
                </View>
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
    },
    title: {
        fontWeight: '700',
        fontSize: 20,
        marginTop: 50,
        marginLeft: 20,
    },
    mainImage: {
        width: '90%',
        height: 200,
        borderRadius: 10,
        marginTop: 20,
        alignSelf: 'center',
    },
    middleContainer: {
        // borderWidth: 1,
        marginTop: 20,
        marginLeft: 20,
        height: 60,
    },
    middleButton01: {
        width: 100,
        height: 50,
        padding: 15,
        backgroundColor: '#fdc453',
        borderRadius: 10,
        margin: 8,
    },
    middleButton02: {
        width: 100,
        height: 50,
        padding: 15,
        backgroundColor: '#fe8d6f',
        borderRadius: 10,
        margin: 8,
    },
    middleButton03: {
        width: 100,
        height: 50,
        padding: 15,
        backgroundColor: '#9adbc5',
        borderRadius: 10,
        margin: 8,
    },
    middleButton04: {
        width: 100,
        height: 50,
        padding: 15,
        backgroundColor: '#f886a8',
        borderRadius: 10,
        margin: 8,
    },
    text: {
        color: 'white',
        fontWeight: '700',
        textAlign: 'center',
    },
    cardContainer: {
        marginTop: 10,
        marginLeft: 10,
    },
    card: {
        flex: 1,
        flexDirection: 'row',
        margin: 10,
    },
    cardImage: {
        flex: 1,
        width: 100,
        height: 100,
        borderRadius: 10,
    },
    cardText: {
        flex: 2,
        marginLeft: 10,
    },
    cardTitle: {
        fontSize: 20,
        fontWeight: '700',
    },
    cardDesc: {
        fontSize: 15,
    },
    cardDate: {
        fontSize: 10,
    },
});

05.モジュールと複文、条件文

アプリケーション内のモジュールシステム
App.jsはアプリケーション画面を描く巨大な関数です.モジュールシステムからエクスポートします.
すなわち、複数のアプリケーションファイルを作成し、関数をexport default functionにエクスポートできます.

複文
繰り返し文を切り替えるときは、トップレベルのタグにキー値が必要であり、キー値は常に一意のキー値でなければなりません.
ラベルにjs文法を書きたいなら?かっこでいいです.

<Text style={styles.weather}>
  오늘의 날씨: {todayWeather + '°C ' + todayCondition} 
</Text>
-> 출력? 오늘의 날씨: 27°C 흐림

条件文
3つの演算子は、このアプリケーションを反映するために作成される最も一般的な条件文です.

let result = 10 == 9 ? true : false // result <-- false 
let result = 10 !== 9 ? true : false // result <-- true 
let reuslt = 99 > 10 ? true : false // result <-- true

06.作業説明及び説明

今週の作業は、デザインされた画面を見ながら、そのままクローンコードを行います.
左は

、右は私が実現した課題です.
画像と携帯電話の割合が少し違うので、スクリーンショットの時は横と縦が少し違うようですが、見た目はあまり悪くありません.
課題実施コード

import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
export default function AboutPage() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
            <View style={styles.contentContainer}>
                <Image
                    style={styles.contentImage}
                    source={{
                        uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4',
                    }}
                />
                <Text style={styles.mainText}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
                <Text style={styles.subText}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
                <TouchableOpacity style={styles.instaButton}>
                    <Text style={styles.buttonText}>여러분의 인스타계정</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#262C74',
        flex: 1,
        paddingVertical: 60,
        paddingHorizontal: 35,
    },
    title: {
        flex: 1,
        color: 'white',
        fontSize: 30,
        fontWeight: '700',
    },
    contentContainer: {
        flex: 4,
        backgroundColor: 'white',
        borderRadius: 20,
        borderWidth: 1,
        padding: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    contentImage: {
        width: 130,
        height: 130,
        borderRadius: 20,
    },
    mainText: {
        fontSize: 20,
        fontWeight: '700',
        marginBottom: 20,
        textAlign: 'center',
    },
    subText: {
        fontSize: 14,
        fontWeight: '700',
        textAlign: 'center',
    },
    instaButton: {
        width: 130,
        height: 50,
        borderRadius: 15,
        backgroundColor: '#F3B23E',
        justifyContent: 'center',
        marginTop: 20,
    },
    buttonText: {
        fontSize: 12,
        color: 'white',
        fontWeight: '700',
        textAlign: 'center',
    },
});

简単な宿题なので宿题の解说を闻いていません...時間があれば聞いてみます.

07.終了2週目

先週よりもっと有益な内容を学んだようです.
開発が始まるフロントを担当するプロジェクトがあるので、役に立つように勉強しています.より簡単にプロジェクトを行うために...
これは同じデザインを見て、他の人がどのように書いたのか、私のコードと何が違うのかを見て、比較する2週間の授業です.
ちょっと量が多かったですが、とても助かりました.

Reference

この問題について([スパルタ]アプリケーション開発2週間コメント), 我々は、より多くの情報をここで見つけました https://velog.io/@qortjddk100/스파르타-앱개발-2주차-리뷰

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[pytorch]activation function "swish"

[React][DJplaylist] react-youtube